Skip to content
Angular binding of mapbox-gl-js
TypeScript JavaScript HTML CSS Shell
Branch: master
Clone or download
Pull request Compare This branch is 15 commits ahead, 5 commits behind Wykks:master.
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.
.vscode
assets
projects
.editorconfig
.gitignore
.travis.yml
DEVELOPER.md
LICENCE
README.md
angular.json
package.json
tsconfig.json make mapir useragent static Dec 3, 2019
tslint.json
update_version.sh
yarn.lock

README.md

MapirAngularComponent

npm version

Map.ir 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

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 (Wykks/ngx-mapbox-gl/issues/136#issuecomment-496224634):

(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> = [35.712706, 51.367918];
+  apiKey:string = "<YOUR API KEY>";
}

Generate Component

in app.component.html file:

<mgl-map
  [zoom]="[2]"
  [center]="center"
  [centerWithPanTo]="true"
  [interactive]="true"
  [apiKey]="apiKey"
></mgl-map>

Edit stackblitz

Edit mapir-angular-component-test

📖 English Documentation

You can’t perform that action at this time.