Modifying marker background color dyanmically

[Wei Shiong]

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

[Patrick | Technical Support Engineer, Senior]

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:

markerActivate: function(e) {
             if(e.marker.options.shape == "myImage"){
               e.marker.element[0].style.backgroundColor = "red";
             }
           }

Hopefully, this helps steer you in the right direction.

Regards,
Patrick
Telerik

 

 

[Wei Shiong]

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

[Patrick | Technical Support Engineer, Senior]

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:

.k-map .k-marker-my-image{
       background-color: red;
     }

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

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

.k-map .k-marker-my-image{
   background-image:url( http://kendo.cdn.telerik.com/2016.1.112/styles/Material/markers.png),
   linear-gradient(to right, #f00, #0f0, #00f);
 }

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

 

 

[Wei Shiong]

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

[Patrick | Technical Support Engineer, Senior]

Hello Wei Shiong,

Please take a look at this Telerik Dojo illustrating how to change the background Image, and a list of style properties in the console window.  Just Click on a marker and you will see the list.  

I used the following code to change the background image using a linear-gradient when the markerActivate event is fired:

markerActivate: function(e) {
   e.marker.element[0].style.backgroundImage="url(http://kendo.cdn.telerik.com/2016.1.112/styles/Material/markers.png), linear-gradient(to right, #f00, #0f0, #00f)"
            },

Regards,
Patrick
Telerik

 

 

[Wei Shiong]

Hi Patrick,

    Thanks for your help. This works.

 Best Regards,

CH