New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Move or Create a Map marker at the clicked location

HOW TO

Move a Map marker to the clicked location or create a new one.

[MapMarkers

SOLUTION

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;
        var lat = args.location.lat;
        var lng = args.location.lng;
        if (args.sender.markers.items.length == 0) {
            args.sender.markers.add({ location: clickedLocation })
        } else {
            var 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>.">
        </telerik:MapLayer>
    </LayersCollection>          
</telerik:RadMap>

TIP

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:

var myLat = 1;
var myLng = 2;
var clickedLocation = new kendo.dataviz.map.Location(myLat, myLng);
if (map.markers.items.length == 0) {
    map.markers.add({ location: clickedLocation })
} else {
    var marker = map.markers.items[0];
    marker.location(clickedLocation);
}

Here is an example that puts the current location on the map:

<telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="1" CssClass="MyMap" Width="500px" Height="300px">
    <ClientEvents OnLoad="OnLoad" />
    <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>.">
        </telerik:MapLayer>
    </LayersCollection>
</telerik:RadMap>
<script type="text/javascript">
    function OnLoad(map, args) {
        if ("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(function (position) {
                map = map.get_kendoWidget();
                var currLocation = new kendo.dataviz.map.Location(position.coords.latitude, position.coords.longitude);
                if (map.markers.items.length == 0) {
                    map.markers.add({ location: currLocation })
                } else {
                    var marker = map.markers.items[0];
                    marker.location(currLocation);
                }
            });
        }
    }
</script>
In this article
Not finding the help you need? Improve this article