none
Azure Maps - area subtraction RRS feed

  • 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.

    Friday, August 16, 2019 3:17 PM

Answers

  • 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

    • Proposed as answer by Ricky_Brundritt Tuesday, August 20, 2019 6:51 PM
    • Marked as answer by ByteCodeX509 Tuesday, August 20, 2019 10:09 PM
    Tuesday, August 20, 2019 6:51 PM

All replies

  • 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

    • Proposed as answer by Ricky_Brundritt Tuesday, August 20, 2019 6:51 PM
    • Marked as answer by ByteCodeX509 Tuesday, August 20, 2019 10:09 PM
    Tuesday, August 20, 2019 6:51 PM
  • Thank you so much, this is exactly what I needed. Also thank you for building the example.

    Bogdan

    Tuesday, August 20, 2019 10:09 PM