New to Kendo UI for jQuery? Download free 30-day trial

Render Custom Symbols for Map Bubble Layers

Environment

Product Progress® Kendo UI® Map for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I add some custom symbols to the Bubble layer of the Kendo UI for jQuery Map?

Solution

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.

    <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://demos.telerik.com/kendo-ui/content/dataviz/map/urban-areas.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 the (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

In this article