Modifying marker background color dyanmically

7 posts, 1 answers
  1. Wei Shiong
    Wei Shiong avatar
    11 posts
    Member since:
    Aug 2012

    Posted 24 Jan Link to this post

    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

  2. Patrick
    Admin
    Patrick avatar
    173 posts

    Posted 26 Jan Link to this post

    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
     
    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. Wei Shiong
    Wei Shiong avatar
    11 posts
    Member since:
    Aug 2012

    Posted 05 Feb in reply to Patrick Link to this post

    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

  5. Patrick
    Admin
    Patrick avatar
    173 posts

    Posted 05 Feb Link to this post

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

    Posted 06 Feb in reply to Patrick Link to this post

    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

  7. Answer
    Patrick
    Admin
    Patrick avatar
    173 posts

    Posted 09 Feb Link to this post

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

    Posted 15 Feb in reply to Patrick Link to this post

    Hi Patrick,

        Thanks for your help. This works.

     Best Regards,

    CH

Back to Top
Kendo UI is VS 2017 Ready