Draggable Pin

7 posts, 0 answers
  1. Daniel
    Daniel avatar
    34 posts
    Member since:
    Feb 2011

    Posted 12 Aug 2015 Link to this post

    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

  2. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 14 Aug 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    34 posts
    Member since:
    Feb 2011

    Posted 14 Aug 2015 in reply to Stanimir Link to this post

    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

  5. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 19 Aug 2015 Link to this post

    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
  6. Daniel
    Daniel avatar
    34 posts
    Member since:
    Feb 2011

    Posted 19 Aug 2015 in reply to Stanimir Link to this post

    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

  7. Daniel
    Daniel avatar
    34 posts
    Member since:
    Feb 2011

    Posted 19 Aug 2015 in reply to Daniel Link to this post

    - 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

  8. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 24 Aug 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017