Link Map Markers to Locations

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 draw a straight line between a marker and a location on a Kendo UI for jQuery Map?

Solution

1. Add shape and marker layers to the Map configuration.
2. Attach a handler to the reset event of the map.
3. Create a method that will draw a line between a marker and a specified position.
4. Inside the method, retrieve the from and to coordinates for the line by using the locationToView method.
5. Get a reference to the shape layer so you can draw on its surface.
6. Draw the line by using the kendo.drawing.Path element.

The following example demonstrates how to draw a straight line between a marker and a location on a Kendo UI Map.

    <div id="map"></div>
    <script>
      $("#map").kendoMap({
        center: [18.89, -72.19],
        zoom: 5,
        layers: [{
          type: "shape",
          dataSource: {
            type: "geojson",
            transport: {
              read: "https://output.jsbin.com/zuguhajiye.js"
            }
          }
        }, {
          type: "marker",
          dataSource: {
            data: [{
              location: [20.69, -70.96],
              title: "Foo",
              pointTo: [18.89, -72.19]
            }],
            locationField: "location",
            titleField: "title"
          }
        }],
        reset: function(e) {
          var map = e.sender;
          var markers = map.layers[1].items;

          for (var i = 0; i < markers.length; i++) {
            linkMarker(map, markers[i]);
          }
        }
      });

      function linkMarker(map, marker) {
        var data = marker.dataItem;
        if (data.pointTo) {
          // Convert the latitude and longitude locations to coordinates on the screen.
          // See: https://docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView
          var from = map.locationToView(marker.location());
          var to = map.locationToView(data.pointTo);

          // Draw a path on the shape layer.
          // See: https://docs.telerik.com/kendo-ui/api/dataviz/drawing/path
          //      https://docs.telerik.com/kendo-ui/getting-started/dataviz/drawing/basic-shapes
          var shapeLayer = map.layers[0];
          var line = new kendo.dataviz.drawing.Path({
            stroke: {
              color: "#aaa",
              width: 4,
              lineCap: "round"
            }
          });
          line.moveTo(from).lineTo(to);

          shapeLayer.surface.draw(line);
        }
      }
    </script>

See Also

• Basic Usage of the Map (Demo)
• Using the API of the Map (Demo)
• JavaScript API Reference of the Map