How to conditionally set the shape color

7 posts, 0 answers
  1. Jim
    Jim avatar
    4 posts
    Member since:
    Dec 2015

    Posted 11 Dec 2015 Link to this post

    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?

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 12 Dec 2015 Link to this post

    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:
    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Jim
    Jim avatar
    4 posts
    Member since:
    Dec 2015

    Posted 14 Dec 2015 in reply to Konstantin Dikov Link to this post

    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...
    };

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 16 Dec 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Joe
    Joe avatar
    62 posts
    Member since:
    May 2012

    Posted 31 Dec 2015 Link to this post

    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);

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 04 Jan Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 04 Jan Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready