This is a migrated thread and some comments may be shown as answers.

Draggable Pin

6 Answers 45 Views
Map
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 12 Aug 2015, 07:52 AM

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

Sort by
0
Stanimir
Telerik team
answered on 14 Aug 2015, 01:34 PM
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
0
Daniel
Top achievements
Rank 1
answered on 14 Aug 2015, 06:27 PM

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

0
Stanimir
Telerik team
answered on 19 Aug 2015, 12:36 PM
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
0
Daniel
Top achievements
Rank 1
answered on 19 Aug 2015, 04:07 PM

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

0
Daniel
Top achievements
Rank 1
answered on 19 Aug 2015, 04:40 PM

- 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

0
Ianko
Telerik team
answered on 24 Aug 2015, 01:24 PM
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
Tags
Map
Asked by
Daniel
Top achievements
Rank 1
Answers by
Stanimir
Telerik team
Daniel
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or