angular-azure-maps v0.1.0
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>