Angular wrapper for maplibre-gl. It exposes a bunch of components meant to be simple to use with Angular.
Can be found here (based on the generated gh-pages in this repo): https://maplibre.org/ngx-maplibre-gl/
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!
- 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
npm install @maplibre/ngx-maplibre-gl maplibre-gl
yarn add @maplibre/ngx-maplibre-gl maplibre-gl
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 NgxMapboxGLModule
:
...
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 {}