Render Custom Symbols for Bubble Layers

The Bubble Layer allows you to define the way symbols are rendered.

This approach works by defining a symbol function that uses the Drawing API to define the shape. The symbol is typically a Group of shapes.

The following example demonstrates how to render 200-kilometer lines in West-East direction as a symbol. Note that the lines get longer the farther you go North, which is due to that fact that the example uses the Mercator Projection.

Example

    <div id="map"></div>
    <script>
      var draw = kendo.dataviz.drawing;
      var geom = kendo.dataviz.geometry;

      $("#map").kendoMap({
        center: [45, 45],
        minZoom: 3,
        zoom: 4,
        wraparound: false,
        layers: [{
          type: "tile",
          urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
          subdomains: ["a", "b", "c"],
          attribution: "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
        }, {
          type: "bubble",
          attribution: "Population data from Nordpil and UN Population Division.",
          dataSource: {
            transport: {
              read: {
                url: "https://runner.telerik.io/fullscreen/EsuDU.json",
                dataType: "json"
              }
            }
          },
          locationField: "Location",
          valueField: "Pop2010",
          symbol: function(e) {
            var map = $("#map").data("kendoMap");

            // Bubble location
            var location = e.location;

            // Find locations 100km west and east of center
            //
            // https://docs.telerik.com/kendo-ui/api/javascript/dataviz/map/location/methods/destination
            //
            // Actual distance can be bound to e.dataItem fields
            var l1 = location.destination(100000, 270);
            var l2 = location.destination(100000, 90);

            // View (screen) coordinates for the locations
            //
            // https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map/methods/locationToView
            var p1 = map.locationToView(l1);
            var p2 = map.locationToView(l2);

            // Draw the lines
            //
            // https://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/circle
            var path = new draw.Path({
              stroke: {
                width: 2,
                color: "red"
              }
            });

            path.moveTo(p1).lineTo(p2);

            path.dataItem = e.dataItem;
            return path;
          }
        }],
        shapeClick: function(e) {
          console.log(e);
        }
      });
    </script>

See Also

• Map JavaScript API Reference
• How to Add Shape Titles
• How to Drag and Drop Markers
• How to Highlight Map Shapes by ID
• How to Update Map Shapes by ID
• How to Zoom on Area

For more runnable examples on the Kendo UI Map, browse the How To documentation folder.