Hello
We are wishing to replace a couple google maps with the Telerik map control with openstreet tiles. In most cases this has been a straight forward effort.
In one instance, we have a pin that we can drag and drop on the map to identify a location. Is this possible with the Telerik control? If so, can you provide some sample code using openstreet that includes also capturing the lat/lon of the dropped pin?
Thanks in advance
6 Answers, 1 is accepted
Here is a code sample where you can see the required functionality implementation:
<
telerik:RadMap
runat
=
"server"
ID
=
"RadMap1"
Zoom
=
"2"
CssClass
=
"MyMap"
>
<
ClientEvents
OnMarkerActivate
=
"telerik.OnMarkerActivate"
/>
<
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
>
<
MarkersCollection
>
<
telerik:MapMarker
Shape
=
"PinTarget"
Title
=
"Palo Alto"
>
<
TooltipSettings
Content
=
"US - Palo Alto, CA"
></
TooltipSettings
>
<
LocationSettings
Latitude
=
"37.444610"
Longitude
=
"-122.163283"
/>
</
telerik:MapMarker
>
</
MarkersCollection
>
</
telerik:RadMap
>
<
script
type="text/javascript">
telerik = {};
var marker123 = null;
telerik.OnMarkerActivate = function(e) {
var marker = e.marker;
var element = marker.element;
var width = element.width();
var height = element.height();
var map = e.sender;
marker123 = marker;
element.kendoDraggable({
// Move marker "hot point" under the cursor
cursorOffset: { top: -height, left: -width / 2 },
// Create and style drag hint
hint: function() {
var hint = element.clone().css({
width: width,
height: height
});
element.hide();
return hint;
},
// Constrain drag area
container: e.layer.map.element,
// Update marker location
dragend: function(args) {
args.sender.hint.hide();
element.show();
var loc = map.viewToLocation([args.x.client, args.y.client]);
marker.location(loc.toArray());
}
});
};
</
script
>
<
style
type="text/css">
.k-marker:before {
position: absolute;
display: block;
width: 38px;
height: 42px;
line-height: 45px;
line-height: 47px\9;
overflow: hidden;
font-family: TelerikWebUI, monospace;
font-size: 40px;
text-indent: 0;
text-align: center;
left: 50%;
margin: -4px 0 0 -20px;
padding-top: 2px;
color: #e30000;
}
.k-marker:before,
.k-marker-Pin-target:before,
.k-marker-pin-target:before {
content: "\E124";
}
span.k-marker-Pin:before,
span.k-marker-pin:before {
content: "\E125";
}
</
style
>
Also review the following online code sample:
http://dojo.telerik.com/IcutE
Regards,
Stanimir
Telerik

Hello Stanimir
Thank you for the reply and great sample. I am having one small issue. When I drop the pin on a location, it settles down and to the right about an inch down and 3 inches to the right from where I intend to drop it
I believe the issue is in the following code, specifically map.viewToLocation. I have not been able to locate any documentation on this.
var loc = map.viewToLocation([args.x.client, args.y.client]);
marker.location(loc.toArray());
Any direction would be great...
Thanks
I also noticed that when the marker is dropped it is moved slightly down and to the right. The only solution with I currently found is the following code:
var loc = map.viewToLocation([args.x.client - 8, args.y.client - 8]);
Please inform me if this does not fix the problem for you.
Regards,
Stanimir
Telerik

Hello again...
To achieve a "correction", my adjustment is quite significante compared to yours... below is my adjusted code to get the pin to dop where my cursor is...
var loc = map.viewToLocation([args.x.client - 196, args.y.client - 80]);
My concern of course is why the difference in our experiences (such a difference in correction)... I tested locally on Chrome, Firefox, Safari and IE (all current builds). IE, the drag does not work at all, the other browsers, respond consistently. I will post to a staging site soon and see if I get the proper correction, but the fact that we need to correct with different numbers causes me concern that our users will experience different behavior.
Is this correction a work-around until your team can dive deeper into the problem?
Thanks again

- UPDATE -
The correction required appears to be related to the size of the map.
Map1 is sized at 708h, no width set and the correction is var loc = map.viewToLocation([args.x.client - 196, args.y.client - 80]);
Map2 is sized at 456h x 890w and correction is var loc = map.viewToLocation([args.x.client - 20, args.y.client - 60]);
Cheers
Indeed, such a behavior exists and it is relevant to how the browser retrieves the cursor position withing the drop event's arguments.
I am afraid, there is no more suitable fix for that. As you can see this is also more relevant to the Kendo Map and you can put your concern in Kendo User Voice portal, so to be further reviewed and discussed by the map's developers.
Regards,
Ianko
Telerik