Azure Indoor Maps: How to get the Zone location co-ordiantes for redering in Azure Maps using Polygon layer?

Koushal Jain 41 Reputation points

Hi All,

I was trying to show zones in Azure Indoor Maps using Polygon layer. For that I need the zone co-ordinates. Please let me know what is the best way to get the zone co-ordinates in angular UI code?

Also, How are we utilizing zone details given in manifest in map? Please let me know.

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
629 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. James Jonghan Park 1 Reputation point

    Hi, you can fetch the feature that's rendered on the map, then overlay a new colored layer on top to show zones.

    1. Fetch the data embedded in the current view of the map.
      (ex) This will fetch a list of "Indoor zone" layer features.
      const features = map.layers.getRenderedShapes().filter(f => f.layer['source-layer'] === "Indoor zone");
      1. Add a polygon layer to the map.
        (ex) This will append the first Indoor zone feature to the data source.
      // Create a data source and add it to the map
      const dataSource = new atlas.source.DataSource();
      map.sources.add(dataSource); // Add the zone feature to the data source
      dataSource.add(features[0]); // assumes features array is not empty // Create and add a polygon layer to render the polygon to the map, below the label layer
      map.layers.add(new atlas.layer.PolygonLayer(dataSource, null,{
      fillColor: 'red',
      fillOpacity: 0.7
      }), 'labels');

    If rendering needs to be dynamic as map camera is moved around, you may use an event handler for the map.
    Also to note, there are community supported Angular JS and React JS modules; however, we do not directly maintain nor support them.