Draw on map example

4 posts, 0 answers
  1. Sam
    Sam avatar
    8 posts
    Member since:
    Sep 2019

    Posted 09 Oct 2019 Link to this post

    Hi, is there an example somewhere of how to draw a shape on the map?
  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    973 posts

    Posted 11 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Matt
    Matt avatar
    12 posts
    Member since:
    Jun 2014

    Posted 10 May in reply to Alex Hajigeorgieva Link to this post

    How about an example where you click on the map and it draws lines between where you are clicking?
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    973 posts

    Posted 12 May Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top