MapirAngularComponent

Angular wrapper for mapbox-gl-js. Expose a bunch of component meant to be simple to use for Angular.

Get API Key

🔑 You should first get api key from Map.ir

Installation

npm i mapir-angular-component mapbox-gl@1.13

If using typescript, add mapbox-gl types:

npm install @types/mapbox-gl

Add mapbox-gl CSS

Load the css of mapbox-gl (and mapbox-gl-geocoder if mglGeocoder is used)

For example, with angular-cli projects add this in angular.json:

"styles": [
  "./node_modules/mapbox-gl/dist/mapbox-gl.css",
  "./node_modules/@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css"
  ]

Or in global css (called styles.css for example in angular-cli)

@import "~mapbox-gl/dist/mapbox-gl.css";
@import "~@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css";

Add Polyfill

Add this in your polyfill.ts file (discussion):

(window as any).global = window;

Quick start

Import module

in app.module.ts file:

import { NgxMapboxGLModule } from 'mapir-angular-component';

@NgModule({
  imports: [
    NgxMapboxGLModule
  ]
})
export class AppModule {}

Set API Key

in app.component.ts file:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'mapir-angular-test';
  center:Array<number> = [51.367918, 35.712706];
  apiKey:string = "<YOUR API KEY>";
}

Generate Component

in app.component.html file:

<div id="container">
  <mgl-map
    [zoom]="[5]"
    [center]="center"
    [centerWithPanTo]="true"
    [interactive]="true"
    [apiKey]="apiKey"
  ></mgl-map>
</div>

in app.component.css file:

.map-wrapper {
  height: 100%;
  position: relative;
  width: 100%;
}

.map-wrapper .mapboxgl-map {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#container, .mapir-wrapper {
  height: 100%;
  width: 100%;
}

📖 English Documentation (coming soon)

map-ir/mapir-angular-component