UWP MapControl highlight countries

Question

I’m writing a little app which will receive a country code (2 ISO letters) and a state code (also 2 letters ISO code).

I would like to highlight (And color) the region specified by these 2 information (So let’s say “CA, QC”, will highlight Quebec state in Canada)

I don’t need Anything else (Well, maybe FadeIn, FadeOut animation, but I’ll figure this one out later)

All zoom/tap/click/other actions are blocked.

The MapControl declaration is really easy :

<maps:MapControl Grid.Row="1" x:Name="myMap" ZoomLevel="0"/>

Thanks in advance

Edit: After a lot of research, the help from following answer, I’m astonished that a BASIC action is NOT a part of Microsoft’s platform. That’s insane. All back end was coded in less than 30 minutes (Including authentication, listing properties, checking access level, setting up SignalR callbacks), but on the visual side, welp, we have NOTHING from UWP platform. That’s just sad. /bye UWP, I’ve tried. multiple times.

Edit 2 : Made it work with some adjustements :

 if (feature != null && (feature.Geometry.Type == GeoJSONObjectType.Polygon) || (feature.Geometry.Type == GeoJSONObjectType.MultiPolygon))
                {
                    myMap.MapElements.Clear();
                    MapPolygon polygon = null;
                    if (feature.Geometry.Type == GeoJSONObjectType.Polygon)
                    {
                        var polygonGeometry = feature.Geometry as Polygon;
                        polygon = new MapPolygon
                        {
                            Path = new Geopath(polygonGeometry.Coordinates[0].Coordinates.Select(coord => new BasicGeoposition() { Latitude = coord.Latitude, Longitude = coord.Longitude })),
                            FillColor = Colors.DarkRed
                        };
                        myMap.MapElements.Add(polygon);
                    }
                    else
                    {
                        var ploy = (feature.Geometry as MultiPolygon);
                        foreach (var item in ploy.Coordinates)
                        {
                            var polygon1 = new MapPolygon
                            {
                                Path = new Geopath(item.Coordinates[0].Coordinates.Select(coord => new BasicGeoposition() { Latitude = coord.Latitude, Longitude = coord.Longitude })),
                                FillColor = Colors.DarkRed
                            };
                            myMap.MapElements.Add(polygon1);
                        }
                    }


                }

Martin Zikmund Martin Zikmund · Accepted Answer · 2018-03-20T00:21:25

There is no built-in way to achieve this, so you will have to do some additional steps to make this work.

First you need to download a geojson-based dataset with polygonial definitions of all countries. One lightweight and functional can be found here on GitHub.

Now you need to install the GeoJSON.NET package from NuGet into your project and include the downloaded .geojson file in your project, for example in the Assets folder. Make sure that its Build action is set to Content.

Now you can use code like this to highlight a country by creating a MapPolygon and placing it on the map:

private FeatureCollection _countryPolygons = null;

private async void HighlightClick(string country)
{
    if (_countryPolygons == null)
    {
        _countryPolygons = JsonConvert.DeserializeObject<FeatureCollection>(
            await FileIO.ReadTextAsync(
                await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/countries.geojson",
                    UriKind.Absolute))));
    }

    var feature = _countryPolygons.Features.FirstOrDefault(f =>
        f.Id.Equals(country, StringComparison.CurrentCultureIgnoreCase));

    if (feature != null && feature.Geometry.Type == GeoJSONObjectType.Polygon)
    {
        var polygonGeometry = feature.Geometry as Polygon;
        MapPolygon polygon = new MapPolygon();
        polygon.Path = new Geopath(polygonGeometry.Coordinates[0].Coordinates.Select(coord => new BasicGeoposition() { Latitude = coord.Latitude, Longitude = coord.Longitude }));
        polygon.FillColor = Colors.DeepSkyBlue;
        Map.MapElements.Clear();
        Map.MapElements.Add(polygon);
    }
}

UWP MapControl highlight countries

1 Answers