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

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.

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

        center: [45, 45],
        minZoom: 3,
        zoom: 4,
        wraparound: false,
        layers: [{
          type: "tile",
          urlTemplate: "https://#= subdomain zoom #/#= x #/#= y #.png",
          subdomains: ["a", "b", "c"],
          attribution: "&copy; <a href=''>OpenStreetMap contributors</a>"
        }, {
          type: "bubble",
          attribution: "Population data from Nordpil and UN Population Division.",
          dataSource: {
            transport: {
              read: {
                url: "",
                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.
            // 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.
            var p1 = map.locationToView(l1);
            var p2 = map.locationToView(l2);

            // Draw the lines.
            var path = new draw.Path({
              stroke: {
                width: 2,
                color: "red"


            path.dataItem = e.dataItem;
            return path;
        shapeClick: function(e) {

See Also

In this article
Not finding the help you need? Improve this article