All Projects → Wykks → Ngx Mapbox Gl

Wykks / Ngx Mapbox Gl

Licence: mit
Angular binding of mapbox-gl-js

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Ngx Mapbox Gl

Martin
Blazing fast and lightweight PostGIS vector tiles server
Stars: ✭ 540 (+117.74%)
Mutual labels:  mapbox-gl
Maplibre Gl Native
An open-source fork of Mapbox GL SDK for iOS and Android and other platforms
Stars: ✭ 65 (-73.79%)
Mutual labels:  mapbox-gl
Terramach
Terra Mach is a mapping frontend system to build graphical interfaces for devices.
Stars: ✭ 142 (-42.74%)
Mutual labels:  mapbox-gl
React Map Gl
React friendly API wrapper around MapboxGL JS
Stars: ✭ 6,244 (+2417.74%)
Mutual labels:  mapbox-gl
Makina Maps
Full Stack to Build, Serve and Update your own Vector and Raster Tiles from OpenStreetMap Data.
Stars: ✭ 52 (-79.03%)
Mutual labels:  mapbox-gl
React Mapbox Gl
A React binding of mapbox-gl-js
Stars: ✭ 1,683 (+578.63%)
Mutual labels:  mapbox-gl
Vue Mapbox
Vuejs 2 components for interacting with mapbox-gl-js
Stars: ✭ 359 (+44.76%)
Mutual labels:  mapbox-gl
Wind Layer
🎏 🚀 wind-layer | a openlayers && amap && bmap && leaflet && mapbox-gl extension to windjs
Stars: ✭ 188 (-24.19%)
Mutual labels:  mapbox-gl
Editor
An open source visual editor for the 'Mapbox Style Specification'
Stars: ✭ 1,167 (+370.56%)
Mutual labels:  mapbox-gl
React Mapbox Gl Draw
Draw tools for Mapbox with React: 🗺️ react-mapbox-gl + 🖌️ mapbox-gl-draw
Stars: ✭ 136 (-45.16%)
Mutual labels:  mapbox-gl
Mapbox Gl Js
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Stars: ✭ 8,017 (+3132.66%)
Mutual labels:  mapbox-gl
Harmoware Vis
Spatial-Temporal Visualization Library using Deck.GL
Stars: ✭ 51 (-79.44%)
Mutual labels:  mapbox-gl
Mapbox Gl Native Android
Interactive, thoroughly customizable maps in native Android powered by vector tiles and OpenGL
Stars: ✭ 135 (-45.56%)
Mutual labels:  mapbox-gl
Mapbox Gl Draw
Draw tools for mapbox-gl-js
Stars: ✭ 569 (+129.44%)
Mutual labels:  mapbox-gl
Tilejson Spec
JSON format for describing map tilesets.
Stars: ✭ 175 (-29.44%)
Mutual labels:  mapbox-gl
Mapbox Gl Native
Interactive, thoroughly customizable maps in native Android, iOS, macOS, Node.js, and Qt applications, powered by vector tiles and OpenGL
Stars: ✭ 4,091 (+1549.6%)
Mutual labels:  mapbox-gl
Osmscout Server
Maps server providing tiles, geocoder, and router
Stars: ✭ 105 (-57.66%)
Mutual labels:  mapbox-gl
Osm Liberty
A free Mapbox GL basemap style for everyone
Stars: ✭ 231 (-6.85%)
Mutual labels:  mapbox-gl
React Native Mapbox Gl
A Mapbox GL react native module for creating custom maps
Stars: ✭ 2,120 (+754.84%)
Mutual labels:  mapbox-gl
Pure Maps
Maps and navigation
Stars: ✭ 136 (-45.16%)
Mutual labels:  mapbox-gl

ngx-mapbox-gl

Build Status npm version

Angular wrapper for mapbox-gl-js. It exposes a bunch of components meant to be simple to use with Angular.

v1.X : Angular 5 & 6 (rxjs 5)

v2.X : Angular 6 & 7 (rxjs 6)

v3.X : Angular 7.2

v4.X : Angular 8 - 10 (rxjs >= 6.5)

Include the following components:

How to start

npm install ngx-mapbox-gl mapbox-gl
yarn add ngx-mapbox-gl mapbox-gl

If using typescript add mapbox-gl types

npm install @types/mapbox-gl --save-dev
yarn add @types/mapbox-gl --dev

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

For example, with angular-cli 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 the global CSS file (called styles.css for example in angular-cli):

@import '~mapbox-gl/dist/mapbox-gl.css';
@import '[email protected]/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';

Add this in your polyfill.ts file (https://github.com/Wykks/ngx-mapbox-gl/issues/136#issuecomment-496224634):

(window as any).global = window;

Then, in your app's main module (or in any other module), import the NgxMapboxGLModule:

...
import { NgxMapboxGLModule } from 'ngx-mapbox-gl';

@NgModule({
  imports: [
    ...
    NgxMapboxGLModule.withConfig({
      accessToken: 'TOKEN', // Optional, can also be set per map (accessToken input of mgl-map)
      geocoderAccessToken: 'TOKEN' // Optional, specify if different from the map access token, can also be set per mgl-geocoder (accessToken input of mgl-geocoder)
    })
  ]
})
export class AppModule {}

How to get a Mapbox token: https://www.mapbox.com/help/how-access-tokens-work/

Note: mapbox-gl cannot work without a token anymore. If you want to keep using their services then make a free account, generate a new token for your application and use it inside your project.

You can use https://github.com/klokantech/tileserver-gl to serve vector tiles.

Display a map:

import { Component } from '@angular/core';

@Component({
  template: `
    <mgl-map
      [style]="'mapbox://styles/mapbox/streets-v9'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >
    </mgl-map>
  `,
  styles: [
    `
      mgl-map {
        height: 100%;
        width: 100%;
      }
    `,
  ],
})
export class DisplayMapComponent {}

Angular libraries AOT compilation

If you want to build a library using this module, you will most likely face this error when building for production:

ERROR: Error during template compile of 'YourLibraryModule'
  Function calls are not supported in decorators, but 'NgxMapboxGLModule' was called.

An unhandled exception occurred: Error during template compile of 'YourLibraryModule'
  Function calls are not supported in decorators, but 'NgxMapboxGLModule' was called.

This error is generated due to the AOT compilation that occurs in prod mode. The part that will generate the error will be this one:

@NgModule({
  imports: [
    ...
    NgxMapboxGLModule.withConfig({
      accessToken: 'TOKEN',
      geocoderAccessToken: 'TOKEN'
    })
  ]
})

So the error is pretty clear: Function calls are not supported in decorators but 'NgxMapboxGLModule' was called.

Solution

To solve this problem, we simply need to provide the accessToken via module configuration rather than how you would normally do:

import {
  MAPBOX_API_KEY, // ngx-mapbox-gl uses this injection token to provide the accessToken
  NgxMapboxGLModule,
} from 'ngx-mapbox-gl';

export interface IMyLibMapModuleConfig {
  mapboxToken: string;
}

@NgModule({
  declarations: [],
  exports: [],
  imports: [CommonModule, NgxMapboxGLModule],
})
export class MyLibMapModule {
  static forRoot(
    config: IMyLibMapModuleConfig
  ): ModuleWithProviders<MyLibMapModule> {
    return {
      ngModule: MyLibMapModule,
      providers: [
        {
          provide: MAPBOX_API_KEY,
          useValue: config.mapboxToken,
        },
      ],
    };
  }
}

We basically create a forRoot static function in the library module, that will accept a configuration object as a parameter. This configuration will provide the actual token to the ngx-mapbox-gl module via providers by providing the value from the configuration to the MAPBOX_API_KEY injection token.

Finally, in the application that will use your MyLibMapModule, you will import the module in this way:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { MyLibMapModule } from 'my-lib';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    AppRoutingModule,

    MyLibMapModule.forRoot({
      mapboxToken: environment.mapboxToken,
    }),
  ],
})
export class AppModule {}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].