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
- Add shape and marker
layers
to the Map configuration. - Attach a handler to the
reset
event of the map. - Create a method that will draw a line between a marker and a specified position.
- Inside the method, retrieve the from and to coordinates for the line by using the
locationToView
method. - Get a reference to the shape layer so you can draw on its surface.
- 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>