Skip to content
No description, website, or topics provided.
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e initial commit Jul 10, 2018
src Refactor (#25) Oct 8, 2018
.editorconfig initial commit Jul 10, 2018
.gitignore Updated ignore file (#5) Jul 13, 2018
LICENSE
README.md
angular.json Changed prefix Jul 10, 2018
atlas.d.ts Refactor (#25) Oct 8, 2018
ng-package.json Integrated project with ng-pagkagr (#4) Jul 13, 2018
package-lock.json 1.0.0 Oct 8, 2018
package.json 1.0.0 Oct 8, 2018
public_api.ts Fix lazy load and updated README Sep 5, 2018
tsconfig.json
tslint.json initial commit Jul 10, 2018

README.md

Angular Azure Maps

Angular 6 Azure Maps is a wrapped MS Azure Map on Angular

Samples

Getting Started

npm i @acaisoft/angular-azure-maps --save

Add to module:

@NgModule({
  imports: [AmModule],
  providers: [LoadMapService]

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" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=1"></script>

Or use our lazy loading

Lazy loading

// in component:
  key: string = '<YOUR-KEY>'
  
  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

<div *ngIf="mapService.isLoaded">
  <am-map #maper
    [_id]="'id'"
    [initialConfig]="config"
  </am-map>
 </div>

[_id] - its id to DOMElements, !necessary!
[initialConfig] - initial config to map

Map Init.
Your config should look like:

public config = {
    'zoom': 1.5,
    'center': [20,20]
    'interactive': true,
  };

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

Outputs:

 <am-map #maper 
 (onMapClick)="getPos($event)" // Output emiting position
 (loaded)="loadedMap()"
 >

(onMapClick) - its emitting position on click
(loaded) - emitting when AmComponent is loaded, after its you can for example add data:

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:

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:

<div class="container"  *ngIf="mapService.isLoaded">
  <am-map #maper
          [initialConfig]="config"
          [_id]="'id'"
          (onMapClick)="getPos($event)"
  (loaded)="mapLoaded()">


    <ng-template amPopup
                 let-dataElement="dataElement">
      <div [ngSwitch]="dataElement.type">
        <div *ngSwitchCase="'DataCenter'" class="dc_container">
          <div class="name">{{ dataElement.name}}</div>
          <div class="status" [ngStyle]="{'color':dataElement.status === 'Online' ? 'blue' : 'red'}"> {{ dataElement.status }}</div>
        </div>
        <div *ngSwitchCase="'Office'" class="office_container">
          <div class="name">{{ dataElement.name}}</div>
        </div></div>
    </ng-template>

  </am-map>
</div>
You can’t perform that action at this time.