none
Win 10 map control: Is dragging a MapIcon or other MapElement supported? RRS feed

  • Question

  • On Win10, Build 10130 I'm attempting let the user drag around a MapIcon I've placed on the map.  Am I missing something, or is the crucial capability of dragging map objects around unsupported?

    There is a MapElementClick event which I can use for element selection.  And MapControl derives from Control, which defines a PointerMoved event, but the Map.PointerMoved event is never fired, since presumably the map control is eating all the pointer messages for its own purposes.

    How do I drag objects around? 

    Wednesday, June 10, 2015 4:16 PM

Answers

All replies

  • Hi, I'm actually working on a similar thing right now. As far as I can see there is no way to have MapIcon objects be dragged around, so you have to make your own 'DraggablePin' type. I used this as a reference -

    http://blogs.msdn.com/b/bingdevcenter/archive/2013/10/03/draggable-pushpins-in-bing-maps-net.aspx

    There are a couple of changes that you have to make for it to work on Windows 10 such as using 'map.ActualCameraChanged' instead of 'map.ViewChanged', and instead of locations you should use  Geopoints/BasicGeopositions instead in most places, but they are all be pretty simple changes.

    Now the only issue is that TryPixelToLocation apparently does not exist in Windows 10, so I am having a hard time attempting to get it to recognise where the mouse is in relation to the map to notify where we end up dragging the pin to, but I'll update here if I find a solution.

    Hope this helps!

    Monday, July 27, 2015 1:34 PM
  • In the Win10 maps you can convert between pixel and location by using the GetLocationFromOffset and GetOffsetFromLocation methods:

    https://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.maps.mapcontrol.getlocationfromoffset.aspx

    https://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.maps.mapcontrol.getoffsetfromlocation.aspx

    I'm not a fan of this method naming, but, that was the naming convention in WP8.1 maps and they wanted to be backwards compatible.


    http://rbrundritt.wordpress.com

    Monday, July 27, 2015 10:13 PM
  • I used similar approach but I am facing one problem adjusting the pin at proper geocordinate. When I zoom in or zoom out, the pin moves from its position. Can you suggest a solution for that? I icon I am using is

    pushpin

    and I am setting normalized anchor as 

    MapControl.SetNormalizedAnchorPoint(addressPin, new Point(0.5, 0.5));

    await LocationMapControl.TrySetViewAsync(CurrentLocation, 18);



    Kinjan Bhavsar Software Engineer iTouchVision

    • Proposed as answer by Herbertm.1060 Thursday, February 2, 2017 12:15 PM
    Monday, January 9, 2017 6:27 AM
  • 0.5, 0.5 would not be the appropriate anchor point for that icon image. If you want the tip of the pin to be the anchor, you should use 0.5, 1.0
    Monday, January 9, 2017 6:58 PM
    Moderator
  • >When I zoom in or zoom out, the pin moves from its position

    I had this very issue and it drove me mad until I worked out that if I added an appropriate margin it would always move the point of the pin  to the exact location of the waypoint or selected location.  My MapPin.png image is 50px wide by 70px high hence the margin below - I move it the full height up and half the height to the left and the point of the pin (which is at the bottom centre of the image) is right on the correct location.

    <maps:MapControl.Children>
        <maps:MapItemsControl ItemsSource="{x:Bind vm.Route.WayPoints, Mode=TwoWay}">
            <maps:MapItemsControl.ItemTemplate>
                <DataTemplate x:DataType="model:WayPoint">
    
                    <!-- We need both the NormalizedAnchorPoint and the Margin to ensure the point -->
                    <!-- of the icon actually points to the exact location of the waypoint. -->
                    <Grid Background="Transparent"
                          DoubleTapped="MapPin_DoubleTapped"
                          RightTapped="MapPin_RightTapped"  
                          maps:MapControl.Location="{Binding GeoPoint}"
                          maps:MapControl.NormalizedAnchorPoint="0.5,1"
                          Margin="-25,-70,0,0" >
    
                        <Image Source="/Icons/MapPin.png" HorizontalAlignment="Center" />
                        <TextBlock Text="{Binding Number}" FontSize="28" Margin="0,4,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black"/>
                    </Grid>
                    
                </DataTemplate>
            </maps:MapItemsControl.ItemTemplate>
        </maps:MapItemsControl>
    </maps:MapControl.Children>

    You can see this below: in the first image the map is zoomed out and in the second the map is zoomed in to a waypoint and the pin is pointing to the exact same location in both - so using the margin as a workaround definitely works for me.

    Zoomed out

    Zoomed In

    I still can't work out whether this whole issue is a bug in the Map control or not but either way what I do know is the the default MapElement/MapIcon objects are *very* disappointing - no native dragging and no custom images to name just two (major!) shortcomings. To give us so much power in the Map control then give us these half-baked MapIcon objects is poor work from MS in my humble opinion.... really hoping these will be improved as the UWP platform matures.

    EDIT: Btw, if anyone is wondering why the icon is in a grid, you'll notice the Textblock below the <Image> is overlaying the waypoint number (my app is a journey planner) over the white part of the pin.  I also have a Flyout Menu attached to the grid for a right click/long tap but I didn't show it here to keep it simple.

    Anyway, hope this helps someone... it took me a day of tearing my hair out to work this one out.



    • Edited by nzmike Saturday, February 25, 2017 10:03 PM
    Saturday, February 25, 2017 6:05 AM
  • MapIcon's are limited for a reason,they are converted into native c++ objects for better rendering performance. They also have some custom functionality like collision detection. If you don't want to use a MapIcon for a pushpin you don't have too. You can add standard UIElements as children of the map as well.

    As for the drifting of the pushpin when you zoom, this is an effect that happened in all maps. The issue is the the map has no idea of what part of your pushpin to anchor to the map unless you tell it. This has been documented for many map api's a lot of times. Here is one I wrote ages ago that covers several map APIs: https://blogs.msdn.microsoft.com/rbrundritt/2014/10/02/correctly-anchoring-pushpins-to-the-map/


    [Blog] [twitter] [LinkedIn]

    Saturday, February 25, 2017 4:36 PM
  • Thanks Ricky - I stumbled across this solution myself (out of desperation and not expecting it to work), didn't realise it was such a common issue.

    Fair point re the MapIcons - I didn't realise they were purposely limited in scope but I wish we could at least get  a nicer looking icon than the frankly awful looking one we get by default.... or maybe a choice of 3 or 4?  It would be nice if you could also number them and have the number appear on it as per my example above... maybe you can already but I couldn't see how without using native XAML as I have. 

    Anyway, as my native XAML solution works very well, looks good  and doesn't seem to have any lag or performance issues I'm happy - just wanted to share my solution to the issue with @Kinjan above.

    Also, it's a bit off-topic (sorry!) but I have another question re maps and driving directions.  My app allows a user to completely plan a journey by putting down multiple waypoints so any required roads can be added (I ride a motorcycle so I want the twisty, traffic-free back roads not freeways) and then when using the app (I have my  950XL clamped to the bars of my bike), do a long tap on the next waypoint and select "drive to" from the menu which then opens the Maps app via a ms-drive-to URI.  This works really well but I can only do one waypoint at a time because it does not appear  the ms-drive-to URI can pass multiple points to the Maps app since the app itself does not appear to be able to follow a route of pre-defined waypoints.

    So my holy grail is to be able to pass in a list of waypoints and have the Maps app give me the entire directions of my route so I can just follow it from start to finish without having to go back to the app and select the next waypoint whenever I reach the current one. The nearest I have got is to build a bingmaps URI using a route point collection (eg: bingmaps:?collection=name.My%20Cool%Route~point=....~point=... (etc) but when I call this URI and the Maps app opens it only gives me a textual list of directions and won't allow me to drive the whole route following my waypoints... is this something that might be in future release of Maps?  Essentially I guess what I'm asking is to be able to use Maps to drive from points A to D via B and C rather than just getting from point A to D the fastest way as the app currently does.



    • Edited by nzmike Saturday, February 25, 2017 11:03 PM
    Saturday, February 25, 2017 10:42 PM