Set Different Colors Dynamically for Markers Based on Field in Map

Environment

Product	Progress® Kendo UI® Map for jQuery
Progress Kendo UI	version 2017.2.621

Description

I have a Kendo UI Map in which the data is retrieved from the database and the markers are added dynamically. The locations are grouped by category and for each category I have added a color to the dataSource.

How can I use this color to the marker on the Map based on the field value?

Suggested Workarounds

The Kendo UI Map does not provide a built-in solution for achieving this behavior. However, you can still work around this issue.

After the marker is created, the markerActivate event is fired. Although the styles of the markers come from the selected themes styles, handle the markerActivate event, get reference to the rendered element, and manually change its color by using jQuery.

markerActivate: function(e) {
   $(e.marker.element.context).css("color", "THE NEW COLOR")
}

The following example demonstrates the full implementation of the approach.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        markers: [{
            shape: "pinTarget",
            location: [42, 27],
            colorField: "green"
        },{
            shape: "pinTarget",
            location: [42, 32],
            colorField: "red"
        },{
            shape: "pinTarget",
            location: [42, 38],
            colorField: "#333999"
        }],
        markerActivate: function(e) {
          $(e.marker.element.context).css("color", e.marker.options.colorField)
        }
    });
</script>