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 

  •   @JenMsft @LocalJoost @vinothrajendran not sure if related but when i click update &amp; restart my machine restarts, bu… https://t.co/4muU3d7aGG
  •   RT @natfriedman: Today(!) we’re thrilled to announce unlimited free private repos for all GitHub users, and a new simplified Enterprise off…
  •   @rendyfaqot hi, Sorry to hear. There been some breaking change in the VSTS api... didn't had time yet on fixing tho… https://t.co/lZBMHu4CPf
  •   RT @ameijers: The Global MR Bootcamp was a blast! The biggest #mixedreality event in the world! And all made possible by you the community.…
  •   RT @LocalJoost: Attendants 'working at my Immersive Headset Development workshop at #GlobalMRBootcamp https://t.co/NaNtyO5Ocj
  •   Why do i always decide to change the whole approach of a session the evening before?
  •   @JenMsft @bing it's not working so well for high speed or the distance is a problem https://t.co/KE1kE0wQuF
  •   @danhellem @mmanela Nice!
  •   RT @danhellem: Check out the new changes for the Azure Boards work item tracking experiences in Visual Studio 2019 https://t.co/c4l0rQky1o…
  •   @LocalJoost you put a AAAA battery in your surface pro itself? or the pen?