Draw on map example

[Sam]

Hi, is there an example somewhere of how to draw a shape on the map?

[Alex Hajigeorgieva]

Hi, Sam,

We have an example that draws a shape here:

https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/add-shape-title

In case that does not help, can you give more details about what you are trying to accomplish and when(is it on map render or ist on user interaction) so we can suggest the most suitable approach.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Matt]

How about an example where you click on the map and it draws lines between where you are clicking?

[Alex Hajigeorgieva]

Hi, Matt,

Using the  how-to Link Marker to Location  example, I created a map that draws lines on click between the markers. To make this possible and visible, I added a shape layer after the tile layer:

layers: [{
          type: "tile",
          urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
          attribution: "© OpenStreetMap"
        },{
         type:"shape"
   }],

Check it out here:

https://dojo.telerik.com/@bubblemaster/AJoYeSap/2

click: function(e) {
          var map = e.sender;
          map.markers.add({
            location: e.location,
            tooltip: {
              content: "Foo"
            }
          });
          var markers = map.markers.items;
          var markerLength = markers.length;
          if( markerLength > 1){

            var from = map.locationToView(markers[markerLength-2].location());
            var to = map.locationToView(markers[markerLength-1].location());
            var shapeLayer = map.layers[1];
            var line = new kendo.dataviz.drawing.Path({
              stroke: {
                color: "#aaa",
                width: 4,
                lineCap: "round"
              }
            });
            line.moveTo(from).lineTo(to);

            shapeLayer.surface.draw(line);
          }
        }

Kind Regards,
Alex Hajigeorgieva
Progress Telerik