# Angular Azure Maps
Angular 6 Azure Maps is a wrapped MS Azure Map on Angular
#### [Samples]
## Getting Started
```node
npm i @acaisoft/angular-azure-maps --save
```
Add to module:
```ts
@NgModule({
imports: [AmModule],
providers: [LoadMapService]
```
[AzureMapDocumentation]
First add this two line to your index.html:
```html
````
Or use our lazy loading
#### Lazy loading
```ts
// in component:
key: string = ''
constructor(public mapService: LoadMapService) {}
ngOnInit() {
// that will lazy loaded azure map script and styles
this.mapService.load().toPromise().then(() => {
atlas.setSubscriptionKey(this.key); // that inject your azure key
})
}
```
To have control on map you must use
```
@ViewChild('maper') maper: AtlasMapComponent;
```
This `mapService` own `isLoaded` properties so you can simple use it to know when map was loaded in template
```html
```
[_id] - its id to DOMElements, !necessary!
[initialConfig] - initial config to map
[Map Init].
Your config should look like:
```ts
public config = {
'zoom': 1.5,
'center': [20,20]
'interactive': true,
};
```
Other config options: [Style Options] | [User Interaction Options] | [Service Options] | [Camera Options]
Outputs:
```html
```
(onMapClick) - its emitting position on click
(loaded) - emitting when AmComponent is loaded, after its you can for example add data:
```ts
mapLoaded() {
// Check if ViewChild is correctly init
if (this.maper && this.mapService.isLoaded) {
// use that function to load sprites to map
this.maper.map.events.add('load', (e) => {
Promise.all([
// Add sprite to map as icon
this.maper.map.imageSprite.add('my-pin', '../../../assets/eye-crossed.svg'),
this.maper.map.imageSprite.add('git', '../../../assets/github-small.svg')
]).then((e) => {
this.isFirst = false;
this.initPoint();
})
})
} else {
setTimeout(() => this.mapLoaded(), 400)
}
}
```
*Add points to map*
`this.maper.createPoints(features: AmFeatures)`
*Refresh points*
`this.maper.updatePoints(features: AmFeatures)`
*Remove Map*
`this.maper.removeMap() or this.maper.map.remove()
Your data element should by AmFeatures type:
```ts
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:
```ts
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:
```ts
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:
```ts
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:
```html