How to add MultiPolygons along with Bubble Layer or (any point data) in azure-maps?

Question

I'm trying to display MultiPolygon Layer(data in geojson format) along with Bubble Layer(data in geojson format) in the map. However the map is not rendering the polygons. I'm developing my application in Angular. Am I missing something in the below code ? Please help.

export class AppComponent implements OnInit {
title = 'azure-maps-final';
map: any;
pointData = [];
datasource: any;
policyDataSource: any;
policyData = [];
bubbleLayer: any;
polygonLayer: any;
constructor(public mapService: MapService) {}

getMap() {
this.map = new atlas.Map('map', {
  center: [-97, 39],
  zoom: 3,
  style: 'satellite',
  view: 'Auto',

  authOptions: {
    authType: 'subscriptionKey',
    subscriptionKey: 'my-subscription-key',
  },
  });

this.map.events.add('ready', () => {
  this.datasource = new atlas.source.DataSource();

  this.map.sources.add(this.datasource);
  this.policyDataSource = new atlas.source.DataSource();
  this.map.sources.add(this.policyDataSource);

  //console.log(this.policyDataSource);
  this.polygonLayer = new atlas.layer.PolygonLayer(
    this.policyDataSource,
    'myPolygonLayer',
    {
      fillColor: 'rgba(255,165,0,0.2)',
    }
  );
  this.bubbleLayer = new atlas.layer.BubbleLayer(
    this.datasource,
    'myBubbleLayer',
    {
      color: 'orange',
      radius: 5,
      outlineColor: 'white',
      outlineWidth: 2,
    }
  );

  console.log(this.bubbleLayer);
  console.log(this.polygonLayer);
  this.datasource.add(this.pointData);
  this.policyDataSource.add(this.policyData);
  this.map.layers.add([this.bubbleLayer, this.polygonLayer]);
});
 }

 ngOnInit() {
 this.mapService.pointData$.subscribe((data) => {
  this.pointData = data;
 });
 this.mapService.policyData$.subscribe((data) => {
  this.policyData = data
  this.getMap();
 });
 }

Point Data is my Bubble Layer containing all the points, and policy data is my Polygon datasource. Console logging the layers shows the array with the coordinate points . Attaching the image - console log of polygon layer showing coordinates

How to enable the rendering of polygon layer ? Thanks in advance.

Answer 1

Unless this.policyData is an 3-dimensional array of positions, it shouldn't be passed into the MultiPolygon class. If this.policyData is a array or feature collection of shapes, you can add that directly to the data source like this.policyDataSource.add(this.policyData);

If this.policyData is a feature collection of polygons, and you want to convert it into a multipolygon for some reason (not sure why you want to do this), you will have to create and array and loop through each polygon and add its coordinates values to the array. For example:

var polygonFeatureCollection = this.policyData;

var multiPolygonCoords = [];

polygonFeatureCollection.features.forEach(polygon => {
    multiPolygonCoords.push(polygon.geometry.coordinates);
});

this.policyDataSource.add(new atlas.data.MultiPolygon(multiPolygonCoords));