I am developing a location-based strategy game for Android. In it, the user will be able to build radar stations that grant visibility on an otherwise dark map. Other structures and the player will ideally have a line-of-sight that grants them visibility. I have achieved some success by rendering a polygon over the entire world and poking holes in it centered on the map. Here is an example:
The problem is, if the lit areas overlap or if they touch the edge of the map, google maps will remove the fill from the entire polygon, making the entire world lit. I am searching for various ways around this problem, but I first want to see if Mapbox has the solution I am looking for. (Google is quite up-front that they do not currently have support for overlapped holes in polygons or holes that overlap the edge.)
The code I used to draw these holes, in case anyone is interested:
List points = Arrays.asList(new LatLng(90, -180),
new LatLng(-90 + delta, -180 + delta),
new LatLng(-90 + delta, 0),
new LatLng(-90 + delta, 180 - delta),
new LatLng(0, 180 - delta),
new LatLng(90 - delta, 180 - delta),
new LatLng(90 - delta, 0),
new LatLng(90 - delta, -180 + delta),
new LatLng(0, -180 + delta));
PolygonOptions fogOfWar = new PolygonOptions();
fogOfWar.addAll(points);
fogOfWar.strokeWidth(0);
fogOfWar.fillColor(0x80000000); //50% opacity black, hopefully.
for(Structure structure : game.GetAllStructures())
{
if(structure instanceof RadarStation)
{
RadarStation radarStation = ((RadarStation)structure);
if(radarStation.GetOwnedBy(game.GetOurPlayerID()) &&
radarStation.GetOnline())
{
List<LatLng> hole = new ArrayList<LatLng>();
for (int i = 0; i < 360; ++i, d += p)
{
hole.add(SphericalUtil.computeOffset(Utilities.GetLatLng(radarStation.GetPosition()), radarStation.GetRadarRange() * 1000, d));
}
fogOfWar.addHole(hole);
}
}
}
map.addPolygon(fogOfWar);```