Angular Azure Maps

Angular Azure Maps is a wrapped MS Azure Map on Angular

How to use

AzureMapDocumentation First add this two line to your index.html:

  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/css/atlas.min.css?api-version=1.0" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=1.0"></script>

Or use our lazy loading

Lazy loading

// in component constructor:
constructor(private mapService: LoadMapService) {}
// and use load() method for expample in ngOnInit

this.mapService.load().subscribe((value) => {
  console.log('MAP WAS LOADED')
})

This mapService own isLoaded properties so you can simple use it to know when map was loaded in temaple

<div *ngIf="mapService.isLoaded">
  <am-map
    [initialConfig]="config"
  </am-map>
 </div>

To wrap this module you can add in your template:

<am-map
  [initialConfig]="config"
  [_id]='id'>  // For multiple maps
  </am-map>

First input is your config to create map. Look Map Init. Second is your data with map's items that you can add on map

Your config should look like:

public config = {
    'subscription-key': 'your-key',
    'interactive': true,
  };

Other config options: Style Options | User Interaction Options | Service Options | Camera Options

To add items you must use @ViewChild('maper') maper: AtlasMapComponent; and this.maper.updatePoints(features) Your data element should by AmFeatures type:

interface AmFeature {
  dataElement: any; // Data element
  atlasFeature: atlas.data.Feature; // Map's features object
  layer: string; // Layer for different object
  pinConfig: PinLayerOptions;
}

In your parent component you must create your data. First create your map feature - Feature Example for simple Point:

  dataPointsInit(data): atlas.data.Feature {
    const pos = new atlas.data.Position(data.localization.lnt, data.localization.lng);
    const point = new atlas.data.Point(pos);
    const feature = new atlas.data.Feature(point, {
      name: data.name,
      icon: 'none',
      type: data.type,
      title: data.name,
      cssClass: cssName //if you want custom pins !!Remeber to set icon: 'nope',
    });
    return feature;
  }

Example for PinLaterOptions:

  dataLayerOptions(item): PinLayerOptions {
    const pinOptions: PinLayerOptions = {
      name: item,
      cluster: false, // true if you want join points
      clusterIcon: 'pin-round-blue',
      textFont: 'SegoeUi-Bold',
      textOffset: [0, 17],
    };
    return pinOptions;
  }

And merge it do AmFeature type:

mergeDataPoint(data) {
    return {
      dataElement: data,
      atlasFeature: this.dataPointsInit(data),
      layer: data.type
      pinConfig: this.dataLayerOptions(data.type)
    }as AmFeature;
  }

Components

Our AtlasMapComponent will create your map canvas, and add your Map Elements to map through added pins on it. Also can added PopUps on pins through atlas-popup directive and ng-template in your parent component html file:

<am-map
  [initialConfig]="config"
  [features]="amFeatures">
  
<ng-template amPopup
             let-dataElement="dataElement">
  <!--Item you want to show in popup-->
  <!--<div>{{ dataElement.name}}</div>-->
  <!--<div> {{ dataElement.status }}</div>-->
</ng-template>

</am-map>