How to remove dot and tail from MapIcon on UWP Map

Question

Is there any way to remove the dot and tail attached to MapIcons? (Without using a map child)

Thanks in advance

score 2 · Accepted Answer · answered Jun 22 '18 at 06:32

2

Found the answer. I had to modify the MapStyleSheet for the MapControl itself - not the MapIcon. Specifically the userPoint > stemAnchorRadiusScale in the stylesheet.

answered Jun 22 '18 at 06:32

Russell Corbin

135
8

If you have resolved your issue please [mark](https://meta.stackexchange.com/a/5235) it as accepted to convenient people who visit this thread later, Thanks for understanding. – CoCaIceDew Jun 25 '18 at 08:04
Could you explain how to do this? the MapStyleSheet class doesn't have a userPoint property (https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.maps.mapstylesheet), so I have no idea what you mean. – Stef Sep 11 '18 at 15:08
@Stef See new answer below. – Russell Corbin Mar 09 '20 at 10:35

score 0 · Answer 2 · answered Mar 09 '20 at 10:35

Below code will style your UWP map to look similar to Google Maps. You'll need to adjust below to suit your app.

                string highwayColor = mode == MapController.MapMode.Satellite ? "\"strokeColor\": \"#B6F3D072\", \"fillColor\": \"#50FEF0AC\"" : "\"strokeColor\": \"#F3D072\", \"fillColor\": \"#FEF0AC\"";
                string accessHighwayColor = mode == MapController.MapMode.Satellite ? "\"strokeColor\": \"#B6E3C072\", \"fillColor\": \"#50EEE0AC\"" : "\"strokeColor\": \"#E3C072\", \"fillColor\": \"#EEE0AC\"";
                string jsonString = "{" +
                    "\"version\": \"1.*\"," +
                    "\"settings\": { \"landColor\": \"#ECEAE4\", \"fillColor\": \"#FFFFFF\" }," +
                    "\"elements\": {" +
                        "\"continent\": { \"labelScale\": 0.5 }," +
                        "\"political\": { \"borderStrokeColor\": \"#C2C0B9\", \"borderOutlineColor\": \"#00000000\" }," +
                        "\"userPoint\": { \"scale\": { \"value\": 1.0 }, \"stemAnchorRadiusScale\": { \"value\": 0 } }," +
                        "\"vegetation\": { \"fillColor\": { \"value\": \"#C2EDB1\" } }," +
                        "\"water\": { \"fillColor\": \"#AADAFF\" }," +
                        "\"drivingRoute\": { \"strokeColor\": \"#ffffffff\", \"fillColor\": \"#00b3fd\" }," +
                        "\"highway\": { " + highwayColor + " }," +
                        "\"controlledAccessHighway\": { " + accessHighwayColor + ", \"labelOutlineColor\": \"#E0C060\"}" +
                    "}" +
                "}";

                    MapStyleSheet[] css = new MapStyleSheet[2];
                    css[0] = mode == MapController.MapMode.Satellite ? MapStyleSheet.AerialWithOverlay() : MapStyleSheet.RoadLight();
                    css[1] = MapStyleSheet.ParseFromJson(jsonString);
                    nativeMap.StyleSheet = MapStyleSheet.Combine(css);

How to remove dot and tail from MapIcon on UWP Map

2 Answers2