nimitagr / ngx-maplibre-gl

Angular binding of maplibre-gl

ngx-maplibre-gl

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

Demo site

Can be found here (based on the generated gh-pages in this repo): https://maplibre.org/ngx-maplibre-gl/

Attribution

This is a fork of ngx-mapbox-gl and I would like to thank the maintainers there for thier amazing work to build this up. It's truely a great piece of sotware!

Components

• mgl-map
• mgl-layer
• mgl-geojson-source
• mgl-canvas-source
• mgl-image-source
• mgl-raster-dem-source
• mgl-raster-source
• mgl-vector-source
• mgl-video-source
• mgl-image
• mgl-control with builtin control:
  • mglScale
  • mglFullscreen
  • mglAttribution
  • mglGeolocate
  • mglNavigation
• mgl-marker
• mgl-popup
• mgl-marker-cluster

How to start

npm install @maplibre/ngx-maplibre-gl maplibre-gl
yarn add @maplibre/ngx-maplibre-gl maplibre-gl

There might be a need to add the following configuration to tsconfig.json file

"compilerOptions": {
    ...
    "strictNullChecks": false,
    "skipLibCheck": true,
}

Load the CSS of maplibre-gl

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

"styles": [
        ...
        "./node_modules/maplibre-gl/dist/maplibre-gl.css"
      ],

Or in the global CSS file (called styles.css for example in angular-cli):

@import '~maplibre-gl/dist/maplibre-gl.css';

Add this in your polyfill.ts file (Wykks/ngx-mapbox-gl#136 (comment)):

(window as any).global = window;

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

...
import { NgxMapLibreGLModule } from '@maplibre/ngx-maplibre-gl';

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

Display a map:

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

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