Changing Marker Colors in Kendo UI Map

Environment

Product	Progress® Kendo UI® Map
Version	2024.4.1112

Description

How can I change the colors of the markers in the Kendo UI Map?

This knowledge base article also answers the following questions:

• How to set custom colors for map markers in Kendo UI?
• Can I use CSS to change the color of a marker in Kendo UI Map?
• Is it possible to assign different colors to each marker in Kendo UI Map?

Solution

To customize the color of markers in the Progress® Kendo UI® Map, you need to follow two main steps. First, define a custom property for markers to specify their colors. Then, use the markerActivate event to apply these colors.

1. Define the markers with a custom color field in the Map's configuration:

$("#map").kendoMap({
  markers: [{
    shape: "pinTarget",
    location: [30.2675, -97.7409],
    colorField: "green"
  },{
    shape: "pinTarget",
    location: [30.2707, -97.749],
    colorField: "red"
  },{
    shape: "pinTarget",
    location: [30.2705, -97.7409],
    colorField: "#333999"
  },{
    shape: "pinTarget",
    location: [30.2686, -97.7494],
    colorField: "#48B6A2"
  }],
  // Additional config...
});

1. Use the markerActivate event to dynamically apply the color to the marker's element:

markerActivate: function(e) {
  e.marker.element.css("color", e.marker.options.colorField);
}

Implementing these steps allows you to set custom colors for each marker on your Kendo UI Map. For a practical demonstration, refer to this Progress Kendo UI Dojo example.

See Also

• Kendo UI Map Overview
• Kendo UI Map MarkerActivate Event Documentation