Draggable Pin

[Daniel]

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

[Stanimir]

Hi Daniel,

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

[Daniel]

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

[Stanimir]

Hello Daniel,

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

[Daniel]

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

[Daniel]

- 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

[Ianko]

Hello Daniel,

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