Hi, 

     I'm trying to modify markers' color dynamically based on datasource info. My marker css looks something like the following:

 .k-map . k-marker-Myimage{background-color:red}

And in the markerCreated event, I did something like

markerCreated: function(e)

{

     e.marker.options.shape = "Myimage";

     e.marker.options.shape.css("background-color",e.marker.dataItem.Color);

}

 However, the map does not even load at all. Perhaps, I'm doing this wrongly. Would appreciate if you can point me in the right direction. Thanks in advance.

 Best Regards,

CH

Hello Wei Shiong,

Take a look at this dojo illustrating how I changed the background color of a marker based on the shape name.  

When the markerActivate event fires, the function will check the shape and change the background color:

Hopefully, this helps steer you in the right direction.

Regards,
Patrick
Telerik

Hi Patrick,

      Thanks for your help. Suppose I need to set up a tri-color background on my marker, how would I be able to modify the background color? If there's some means to modify the css dynamically, I could do something as seen in http://jsfiddle.net/cfz6v5cn/2/. And by the way, is there an api reference for the list of properties that are exposed by style, apart from backgroundColor?

Best Regards,

CH

Hi Wei Shiong,

Please take a look at this Telerik Dojo illustrating a better approach on how to change the background color of a marker to red.

I did not have to set any conditionals.  I used the following CSS to set the color:

As for setting multiple backgrounds for a marker, check out this Dojo.

Here is the code I used to set up the multiple colors:

For more information pertaining to using multiple backgrounds, take a look at this article at MDN.

Hope this helps steer you in the right direction.

Regards,
Patrick
Telerik

Hi Patrick,

       Thanks for the response but I think you may have understood me. I certainly can setup the background color via css but how would I be able to do so dynamically? I'm reading of a JSON that contains an array of items. Each of this items represent a marker with different combination of tri-colors. As such, I presume I would have to do update the background color via script? I certainly do not intend to create a css for each combination of tri-color background.

For example, e.marker.element[0].style.backgroundColor controls the 'background' property of the css class. Which other properties can be exposed from e.marker.element[0].style that would allow me to modify the color gradient of the css class? Thanks.

Best Regards,

CH

Hi Patrick,

    Thanks for your help. This works.

 Best Regards,

CH