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

Link Map Markers to Locations


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


How can I draw a straight line between a marker and a location on a Kendo UI for jQuery Map?


  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>
        center: [18.89, -72.19],
        zoom: 5,
        layers: [{
          type: "shape",
          dataSource: {
            type: "geojson",
            transport: {
              read: ""
        }, {
          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:
          var from = map.locationToView(marker.location());
          var to = map.locationToView(data.pointTo);

          // Draw a path on the shape layer.
          // See:
          var shapeLayer = map.layers[0];
          var line = new kendo.dataviz.drawing.Path({
            stroke: {
              color: "#aaa",
              width: 4,
              lineCap: "round"


See Also

In this article