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 

  •   having a fun afternoon with #fluent and #rome ; let see if can make something publishable
  •   RT @pag3rd: If you'll be at #MSIgnite and want to learn about what's new with #XAML #FluentDesign and the brand new #WinUI library come to…
  •   RT @kevintgallo: What’s your favorite color? https://t.co/GvhJIb4ItX
  •   @shanselman @tomasrestrepo @h0x0d @joncaves does it mean @satyanadella holds the mic for you next time at build?
  •   @BNR De eindstand (aangekomen op bestemming) https://t.co/DXxHPP57iy
  •   Toch even aan die conditie werken.. Je weet maar nooit @bnr #fiemibo https://t.co/H61vOPrtVi
  •   RT @donasarkar: Hello #WindowsInsiders we have released 19H1 Build 18242 to Skip Ahead! https://t.co/kuo5Y9jt0i
  •   @BNR Zines de 2 jaar dat ik bij bnr heb gewerkt 😊 #ikhoorbijbnr
  •   @JenMsft is there a way to get notfication mirring from android to win desktop without the cortana app (its not available in netherlands)
  •   @tomverhoeff @bartlannoeye i agree with bart in this.. been seeing enough 'good speakers' just delivering 101 sessions all the time