Intersecting circles on a Map in Windows Store apps

Joost van Schaik written a nice article how to draw circles on a Map in Windows Phone and in Windows Store apps. You can read it here: http://dotnetbyexample.blogspot.nl/2014/02/drawing-circle-shapes-on-windows-phone.html

In this article i will show how you can Union two circles in a nice way.

Based on the code joost maked, lets assume we have this:

var location1 = new Bing.Maps.Location(52.181427, 5.399780);
var location2 = new Bing.Maps.Location(52.181827, 5.399780);

var layer = new MapShapeLayer();
layer.Shapes.Add(location1.GetCirclePoints(30));
layer.Shapes.Add(location2.GetCirclePoints(30));
Map.ShapeLayers.Add(layer);

Map.Center = location1;
Map.ZoomLevel = 18;

The result will look like

As you can see, the two colors are really over each other and make it harder to see the map tiles. Unfortunately there is no easy solution to render the shape as one shape. So we have to union those shapes. For Windows Phone you can easily use GeoAPI.Net and Net Topology Suite libraries. For Windows Store apps its harder, these lirbaries aren't ported yet.

Porting these libraries isnt too hard, only some classes are heavily depending on IO classes like FileStream and FileInfo. I ported these libraries (and you can download them at the bottom of this post). BUt i have to warn, i didnt maked them async.

After porting i included these libraries in my Windows Store app and created a new extension method

public static MapPolygon Union(this List<MapPolygon> polygons)
{
 List<List<Bing.Maps.Location>> gpsCoordinateLists = polygons.Select(x => x.Locations.Select(y => y).ToList()).ToList();
 var coordinateList = gpsCoordinateLists.Select(x => x.ToCoordinate()).ToList();

 var geometryList = coordinateList.Select(x => new NetTopologySuite.Geometries.Polygon(new LinearRing(x.ToArray()))).Cast<IGeometry>().ToList();
 var unionedGeometry = NetTopologySuite.Operation.Union.CascadedPolygonUnion.Union(geometryList);
 var outPoints = unionedGeometry.Coordinates.ToList();

 var poly = new MapPolygon();
 poly.FillColor = Color.FromArgb(150, 120, 120, 120);
 foreach(var loc in outPoints.ToLocation())
 {
  poly.Locations.Add(loc);
 }
 return poly;
}

and to do the conversion between the Bing.Maps.Location class and the ones that are in GeoAPI.NET, i created these 4:

public static List<Coordinate> ToCoordinate(this List<Bing.Maps.Location> location)
{
    return location.Select(x => x.ToCoordinate()).ToList();
}

public static Coordinate ToCoordinate(this Bing.Maps.Location location)
{
    return new Coordinate(location.Latitude, location.Longitude);
}

public static List<Bing.Maps.Location> ToLocation(this List<Coordinate> location)
{
    return location.Select(x => x.ToLocation()).ToList();
}

public static Bing.Maps.Location ToLocation(this Coordinate location)
{
    return new Bing.Maps.Location(location.X, location.Y);
}

Now need to change a little the way we had the circles to the map, first need to union those two to one new polygon, and add that one to the BingMap controls

var location1 = new Bing.Maps.Location(52.181427, 5.399780);
var location2 = new Bing.Maps.Location(52.181827, 5.399780);

var polygons = new List<MapPolygon>();
polygons.Add(location1.GetCirclePoints(30));
polygons.Add(location2.GetCirclePoints(30));

var layer = new MapShapeLayer();
layer.Shapes.Add(polygons.Union());

Map.ShapeLayers.Add(layer);

Map.Center = location1;
Map.ZoomLevel = 18;

and the result will then look like

I fully ported GeoAPI.NET and NTS to the WIndows Store apps platform so if you already familiar with those libraries, all your other opertions like intersection should word too.

The full source code: Download 

  •   RT @windowsblog: Windows Template Studio 1.1 released! https://t.co/qCLpESAvnB
  •   @JenMsft and does sqrt(4) - 2 gives now the right awnser?
  •   @Alex_A_Simons any updates on that what more is happening ? (2/2)
  •   @Alex_A_Simons long time ago you said the mess between msa and aad's would be fixed; first step was block to create msa on aad account. (1/2
  •   First pullrequest for https://t.co/5lEHH630Io :)
  •   @qmatteoq whosdown is great alternative for whatapps and comes from the store
  •   @jvintzel only for windows 10 s users or can other surface users get it too?
  •   RT @JenMsft: O hi there @Spotify 😊 #Windows10 https://t.co/nlJUgM7vVG https://t.co/boah802WgZ
  •   RT @tvgrimbergen: Awesome! Just extended our @MicrosoftTeams bot. Provide natural language input to initiate a leave request powered by @Ni…
  •   @lancewmccarthy kind of sad :/