How to conditionally set the shape color

[Jim]

I am trying to understand how I can programatically set the color of a given shape.

I've seen examples where they are setting the color on the map's shapeCreated event.  However that is changing the color for all shapes on that map.

 

For example say I have 4 shapes(polygons) and I want to make one red, the second blue, third yellow and fourth pink.  How could I go about setting an individual shape color?

[Konstantin Dikov]

Hi Jim,

As you have already noticed, the color of the shapes could be applied within the onShapeCreated event and this is the place where you could add your condition, based on some value of the shape. In the following you could see how the color is set, based on the number of users:

• http://demos.telerik.com/kendo-ui/map/geojson

var scale = chroma
    .scale(["white", "green"])
    .domain([1, 1000]);

function onShapeCreated(e) {
    var shape = e.shape;
    var users = shape.dataItem.properties.users;
    if (users) {
        var color = scale(users).hex();
        shape.options.fill.set("color", color);
    }
}

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Jim]

How can I load a color (different shades) in this event?

function onShapeCreated(e)
{
    debugger;
    var shape = e.shape;
    var blue = kendo.Color.fromBytes(0, 0, 255, 1);
    //shape.fill("blue");  // This generates an error...
    //shape.fill("#88f");  // This works....
    shape.options.set("fill.opacity", .5);
    shape.options.set("fill.color", "#999999");  // This works...
    //shape.options.fill.set("color", blue);  // This generates an error...
};

[Konstantin Dikov]

Hello Jim,

You should either store the information about the color in the shapes and load the color directly or perform some custom logic for calculating the different color, based on some value from the created shape.

As for setting the color, you need to pass the hex color and not the kendo.Color object:

var color =  "#" + kendo.Color.fromBytes(0, 0, 255, 1).toHex();
shape.options.fill.set("color", color);

Best Regards,
Konstantin Dikov
Telerik

 

 

[Joe]

I am using this method for changing shape colors on a conditional basis, and it works great.  However, I've run into a fairly large issue.  I'm also using the shapeCreated event to display a label on the map (state postal code) using this code. However, the data is actually made up of multipolygons, so the created shapes may or may not refelect the actual state outline. As such, the label prints multiple times.  I can put code in place to ensure it's a new state name when a shape gets created, but the label doesn't get centered any more since it centers on the actual shape being created, and not the shape the subshape belongs to (hope that makes sense).

So what is a good way of centering the label on a shape made up of multiple polygons?

 

var provNum = e.shape.dataItem.properties["postal"];

var bbox = e.shape.bbox();
var center = bbox.center();

// Create the label
var label = new kendo.drawing.Text(provNum);
var labelCenter = label.bbox().center();

// Position the label
label.position([
    center.x - labelCenter.x,
    center.y - labelCenter.y
]);

// Render the label on the layer surface
e.layer.surface.draw(label);

[Konstantin Dikov]

Hi Joe,

There is no built-in functionality that will allow you to center a single label for multipolygons, because each polygon will represent separate shape. The only thing that I could suggest is to manually calculate the position by gathering all coordinates for all polygons. However, I am not sure how you will be able to determine which polygon is the last one from the multipolygons collection that fires the shapeCreated event (maybe to use some add some custom attribute to the first polygon that will hold information about the number of polygons)


Best Regards,
Konstantin Dikov
Telerik

 

 

[Konstantin Dikov]

Hello Joe,

Just a quick follow up.

I have contacted our developers team and they have decided to log this as an enhancement for future releases. The idea is to expose another event that will fire after a group shape (such as multipolygons) is created, which will allow such customization.


Regards,
Konstantin Dikov
Telerik

 

 

[Gill]

Has this enhancement been done yet?

[Konstantin Dikov]

Hi Gill,

You should be able to handle the shapeFeatureCreated event for applying the custom logic: 

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map#events-shapeFeatureCreated

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik