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

Question

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.

Answer 1

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");
   2. 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.