AUTHOR: Peter Milchev
DATE POSTED: April 05, 2018
Move a Map marker to the clicked location or create a new one.
Changing the Location of the marker in the OnClick client-side event can achieve the movement of the marker to the clicked position.
<script type=
"text/javascript"
>
function
onClick(args) {
var
clickedLocation = args.location;
lat = args.location.lat;
lng = args.location.lng;
if
(args.sender.markers.items.length == 0) {
args.sender.markers.add({ location: clickedLocation })
}
else
{
marker = args.sender.markers.items[0];
marker.location(clickedLocation);
</script>
<
telerik:RadMap
RenderMode
=
"Lightweight"
runat
"server"
ID
"RadMap1"
Zoom
"3"
CssClass
"MyMap"
ClientEvents
OnClick
"onClick"
/>
CenterSettings
Latitude
"23"
Longitude
"10"
LayersCollection
telerik:MapLayer
Type
"Tile"
Subdomains
"a,b,c"
UrlTemplate
"http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
Attribution="© <a
href
'http://osm.org/copyright'
title
'OpenStreetMap contributors'
target
'_blank'
>OpenStreetMap contributors</
a
>.">
</
If you need to create a marker on a different event (e.g., from the browser geolocation), you must create a Kendo Location object from the coordinates you receive:
myLat = 1;
myLng = 2;
clickedLocation =
new
kendo.dataviz.map.Location(myLat, myLng);
(map.markers.items.length == 0) {
map.markers.add({ location: clickedLocation })
marker = map.markers.items[0];
Here is an example that puts the current location on the map:
<telerik:RadMap RenderMode=
runat=
ID=
Zoom=
"1"
CssClass=
Width=
"500px"
Height=
"300px"
<ClientEvents OnLoad=
"OnLoad"
<CenterSettings Latitude=
Longitude=
<LayersCollection>
<telerik:MapLayer Type=
Subdomains=
UrlTemplate=
Attribution=
"© <a href='http://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>."
</telerik:MapLayer>
</LayersCollection>
</telerik:RadMap>
OnLoad(map, args) {
(
"geolocation"
in
navigator) {
//note: this will show a browser prompt asking for location
//you may not want this to hapen when the page is loading to avoid deteriorating the UX
//so you may want to move the logic to a different event
navigator.geolocation.getCurrentPosition(
(position) {
map = map.get_kendoWidget();
currLocation =
kendo.dataviz.map.Location(position.coords.latitude, position.coords.longitude);
map.markers.add({ location: currLocation })
marker.location(currLocation);
});
Resources Buy Try