ngx-maplibre-gl
Angular wrapper for [maplibre-gl](https://www.maplibre.org/). It exposes a bunch of components meant to be simple to use with Angular.
[](https://www.npmjs.com/package/@maplibre/ngx-maplibre-gl)
### 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](https://github.com/Wykks/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](https://maplibre.org/ngx-maplibre-gl/API/).
## 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`:
```json
"styles": [
...,
"./node_modules/maplibre-gl/dist/maplibre-gl.css"
],
```
Or in the global CSS file (called `styles.css` for example in _angular-cli_):
```css
@import '~maplibre-gl/dist/maplibre-gl.css';
```
Then, in your app's main module (or in any other module), import the `MapComponent`:
```ts
import { Component } from '@angular/core';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';
@Component({
template: `
`,
styles: [
`
mgl-map {
height: 100%;
width: 100%;
}
`,
],
imports: [MapComponent],
})
export class AppComponent {}
```
If you use several components, it will be convenient to import `NgxMapLibreGLModule` instead:
```ts
import { Component } from '@angular/core';
import { NgxMapLibreGLModule } from '@maplibre/ngx-maplibre-gl';
@Component({
template: `
`,
styles: [
`
mgl-map {
height: 100%;
width: 100%;
}
`,
],
imports: [NgxMapLibreGLModule]
})
export class AppComponent {}
```
