Dynamic Map Markers

[Chuck]

I am using the map and all is working mostly. My problem is how can I change the map marker based on the data feed?

I am getting my data as latlng = [32.123, 80.123], name = "KDAY", color = "green"

I can get the marker to show up in the correct place and the name set properly the next thing I need to do is set the color of the marker based on the color field. I have three different colors that I need to be able to use.

Any ideas?

[Hristo Germanov]

Hi Chuck,

The problem here is to set the marker's color because in the markerCreated haven't it. But we will fix this issue for the next official release of the Kendo UI.

Now you can set the color only with class. For other two properties you can use titleField and locationField. You can examine this example: http://trykendoui.telerik.com/@germanov/eYaY/3

Regards,
Hristo Germanov
Telerik

 

 

[Chuck]

Thanks for your help. I did manage to get it working.

Here is my short write up and solution. 

Hope this helps someone else.

Chuck

[Matt]

Hristo,

 Was this functionality part of a release yet? If so can you send me a link to an example on setting a markers color.

 

Thanks,

 

Matt

[T. Tsonev]

Hi,

The markerActivate event will fire when a marker DOM element has been created.
It can be used to change sprites, styles and content on per-element basis.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Gerber]

Hi Chuck - your solution is actually what we need but the link is no longer working. I know it's been a couple of years now. Is it ok if you post again your solution.

Thanks,

Gerber

[Alex Hajigeorgieva]

Hello, Gerber,

We have a Knowledge Base article with a runnable example which uses the suggested approach - adding a handler to the markerActivate event and customizing the marker dynamically:

https://docs.telerik.com/kendo-ui/knowledge-base/map-marker-color-from-field

Please check it out and let me know if you need further help with the suggested approach.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Gerber]

Hi Alex - thank you for your reply.

Do you have an example wherein the marker color dynamically change based on value provided from datasource? I have attached an example image map.

Appreciate it.

Thanks,

Gerber

[Gerber]

By The way I wrote it using ASP.NET MVC source

[Alex Hajigeorgieva]

Hello, Gerber,

From the private thread that we have discussed the same approach, I understand that you have already found the solution you were looking for. However, I will post my reply here for any future visits to the same topic.

This functionality is not a built-in property of the marker but it is easily achievable by adding an event handler to the markerActivate event.

At this point, I suggest either adding a class to the marker element and then targeting the colour with CSS rules:

<style>
     .k-marker.low {
       color:green;
     }
     .k-marker.medium {
       color:yellow;
     }
     .k-marker.high {
       color:red;
     }
   </style>

markerActivate:function(e){
   e.marker.element.addClass(e.marker.dataItem.risk);
}

http://dojo.telerik.com/@bubblemaster/EXIxEmUS

You may submit an official Feature request if such functionality is important to you. I had a look through the ones that we have for DataViz and Map but there wasn't one for a colour field of the marker data.

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=46450&query=map

The most popular requests get looked at by the Product Manager and pushed forward to the roadmap.

Let me know if I may assist you further. 

Kind Regards,
Alex Hajigeorgieva
Progress Telerik