Search code examples
xamluwpbing-mapsuwp-maps

How to have a pushpin (MapIcon) without the black line and offset

I'm using a XAML-MapControl in a UWP-project.

When you create a MapIcon, the image is floating a fixed offset above the desired location on the map, instead of directly on the map, with a black line connecting the icon with the map, as you can see in this image:

enter image description here

I can't find a way to remove this line, or reduce its size.

And none of the other MapElement-types seem to do what I want, I want the exact behavior of the MapIcon, but without this line.

Is there a way to do that?

Edit: Here's how I create the MapIcons:

var icon = new MapIcon
{
    NormalizedAnchorPoint = new Point(0.5, 1),
    Image = image,
    Visible = true,
};
MapControl.MapElements.Add(icon);

Edit2:

I tried to set the stylysheet, but it does not work for me, probably because it's only supported in a version newer than the one I target:

MapControl.StyleSheet = MapStyleSheet.ParseFromJson("{ \"version\": \"1.*\", \"settings\": { }, \"elements\": { \"userPoint\": { \"stemAnchorRadiusScale\": 0, \"stemHeightScale\": 0 }}}");
Solution

  • You need to set the stemAnchorRadiusScale and stemHeightScale properties of userPoint to 0 in the map style sheet. See this topic for how to work with style sheets: https://learn.microsoft.com/en-us/windows/uwp/maps-and-location/elements-of-map-style-sheet. For example:

    {
    "version": "1.*",
    "settings": {
    },
    "elements": {
        "userPoint": {
            "stemAnchorRadiusScale": 0,
            "stemHeightScale": 0
        }
    }
}