@maplibre/ngx-maplibre-gl
v18.1.4
Published
A Angular binding of maplibre-gl
Downloads
12,341
Readme
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 their amazing work to build this up. It's truly a great piece of software!
API Documentation
The API documentation can be found here.
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';
Then, in your app's main module (or in any other module), import the MapComponent
:
import { Component } from '@angular/core';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';
@NgModule({
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%;
}
`,
],
standalone: true,
imports: [MapComponent],
})
export class AppComponent {}