Azure Maps - area subtraction

Question

Hi,

I'm interested in displaying only a polygonal area of a map using a choosen set of vertices coordinates, and make the rest of the map invisible. Is this possible by using the Azure Maps API, or the AzureMaps npm control which I use in a ReactJS application?

Thank you.

Answer 1

A couple of ways to do this depending on what you want to achieve.

If you want a map of an area cut out in the shape of some polygon and the map doesn't need to pan/zoom, then this can be done by retrieving a static image from the REST services and then clipping it with the HTML5 canvas. 

If you want the map to pan and zoom and the polygon area to stay over the same area (create a cut out), then this can be done by creating a large polygon with a hole in the shape of your polygon area. This is known as creating a "mask". The easiest way to do this is to create a polygon where the first ring covers the full globe, and then have a second ring with the coordinate area you want to cut out and display. For extra credit, you can also modify the color of the polygon mask so that it is similar to the map style so it blends in a bit better. I've put together a code sample showing this here: https://azuremapscodesamples.azurewebsites.net/?search=mask&sample=Polygon%20masks

Answer 2

Thank you so much, this is exactly what I needed. Also thank you for building the example.

---

Bogdan