Display map content in Windows Phone 8.1

The API of the new MapControl in Windows Phone 8.1 have many changes compared to the map controls in Phone 8.0. Gone is the old MapLayer and MapOverlay and you now have two other ways to add content, with the MapsElements collection or with the Children collection. The simplest way is to add a MapIcon to the MapElements collection. Here you can keep the default image or provide a custom image as well as add a custom text above the image:

It’s also the MapElements Collection you use to add objects of type MapPolygon and MapPolyline. These are used to visualize e.g. routes and land areas and work just like before with the minor difference that they now use the new Geopath type to specify its points.

The MapElements collection is optimised for performance and allow a huge load of elements. These elements are drawn by the map itself (and not the XAML renderer) and it takes care of hiding the elements when they start to overlap each other or other labels when you zoom out. If you want your element to be shown at all time, use the other way to add extra content to the map: The Children collection.

You can add any object that inherits from DependencyObject to the Children collection. The coordinate and position origin are set with the two attached properties Location and NormalizedAnchorPoint. This is the preferred way to add XAML-controls like a Button or a TextBlock.

You can also databind to the Children collection. Use the MapItemsControl for this:

There seems to be a converter missing for the NormalizedAnchorPoint so you can’t set that value by text in xaml. You have to databind to that as well.

You can find sample code for pushpins using both MapIcon and a custom shape added to Children here: https://github.com/jayway/MapsWP81
For other news regarding the maps control see my previous article.

Have fun mapping around!

This Post Has 5 Comments

  1. Tell me if I’m doing something wrong, but I found new MapControl to be totally unusable. I have a simple task to show about 30 pushpins on the map at the same time, and keep them interactive. I can’t use MapIcon because of it’s self-hiding behavior and non-interactivity. I can’t use something like Polygon because I want to use a pretty image for my pushpins. I can’t use XAML rendered pushpins because at large quantities they are very shaky which looks pretty ugly when you moving your map, and also they tends to froze on one place without updating their geopoints when you do some networking, even though you do it in async method.

    Do I have a curve hands or does Microsoft need to work on it a bit more, either way – I had to downshift on Silverlight.

    1. Sorry, I don’t get the same problem. I added 200+ pins with code almost identical with the buttonJayway_Click in my sample project (using the Children approach) and don’t see any performance problems. I even added an image to the grid in the CreatePin() function and a DoubleTapped eventhandler for the image. I guess that you either have other performance issues in your app that infects the map performance or that it is a hardware/firmware problem. I use the Lumia 930 with the lastest update (but no developer preview). Maybe there are problems on older firmware or slower devices. I notice updates on the map Control in almost every phone update.

  2. Andreas hi,
    I second Syn’s issues. There is some lag when displaying lots of XAML elements on the MapControl. In my case, these XAML elements are simple Images, filled with images found in the project. I tried setting BitmapCache to them with no performance gains. Even worse, if you try and set BitmapCache on the MapControl (or to a parent of it), there is no map information rendered, only a black fill. In your sample, I tried the below, there is a slight lag when dragging the map, probably because the XAML elements are rendered by the XAML renderer, not the MapControl itself

    private void buttonJayway_Click(object sender, RoutedEventArgs e)
    {
    double lat = 55.6127809826285;
    double lon = 13.0031764693558;
    Geopoint lala = new Geopoint(new BasicGeoposition() { Latitude = lat , Longitude = lon });
    for (int i = 0; i < 200; i++)
    {
    var jayway = new Geopoint(new BasicGeoposition() { Latitude = lat + (double)i / 1000, Longitude = lon + (double)i / 1000 });
    var youPin = CreatePin();
    map1.Children.Add(youPin);
    MapControl.SetLocation(youPin, jayway);
    MapControl.SetNormalizedAnchorPoint(youPin, new Point(0.0, 1.0));

    }
    map1.TrySetViewAsync(lala, 15, 0, 0, MapAnimationKind.Bow);

    }

  3. Yeah well same here but of course only on lower devices like :
    samsung ativ S
    Nokia lumia 530
    Even with juste one pushpin you can really notice that its become ugly when you moving your map…

    So for me i have to redoo all my app on the silverlight 8.1 to use the map control and not the controlmap….

    And of course i use the cluster puhpin instead of pushpin… and there is no more problem…

  4. Hello,

    I’am trying to bind a collection of a custom type (with has a property Position of type Geopoint), but nothing appears on the map:

    If i bind a collection a Geopoint, it work by using following syntax in the data template
    -maps:MapControl.Location=”{Binding}” –
    I’am currently doing this with a DataContext and not in the code behind, did someone encoutered this behavior ?

Leave a Reply

Close Menu