Implementing MapLibre GL in an Angular app

I am trying to follow this tutorial (https://maplibre.org/ngx-maplibre-gl/API/) to implement MapLibre GL in an Angular app, but can't make it.

I don't get how to implement this code from the tutorial:

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%;
      }
    `,
  ],
  imports: [MapComponent],
})
export class AppComponent {}

Adapting it to a component like

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

@Component({
  selector: 'app-tabs',
  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: false
})
export class MapPage {
  constructor() {}
}

does just show a black screen.

I absolutely don't get how the code from the tutorial should work, because if I just implement the tutorial code straight forward my compiler says Object literal may only specify known properties, and 'template' does not exist in type 'NgModule'.

Can you make the code from the tutorial work? How?

Thank you very much for your help🙂

The steps are pretty straight forward. Only thing that might cause issues like this is to have the import in the wrong place. Below are two working examples of standalone and modular for code reference.

First I installed.

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

Then added the below two properties to tsconfig.json.

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

Then added the stylesheet in angular.json:

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

One thing is when the component is created, it will have zero height and width this will cause the map to be hidden. So we need to add the below SCSS to app.component.scss or styles array.

mgl-map {
  height: 100%;
  width: 100%;
}

:host {
  display: block;
  height: 500px;
  width: 100vh;
}

Finally added the import into the app component.

Standalone approach:

We add the component and the import to the app component.

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-root',
  template: `
    <mgl-map
      [style]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >npm
    </mgl-map>
  `,
  styles: [
    `
    :host {
      display: block;
      height:500px;
      width:100vh;
    }
      mgl-map {
        height: 100%;
        width: 100%;
      }
    `,
  ],
  imports: [MapComponent],
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

Stackblitz Demo

---

Modular Method:

We add the import to the app.module imports array. Then use the component in the app component.

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [CommonModule, BrowserModule, MapComponent],
})
export class AppModule {}

app.component.html

<mgl-map
  [style]="'https://demotiles.maplibre.org/style.json'"
  [zoom]="[9]"
  [center]="[-74.5, 40]"
>
</mgl-map>

Stackblitz Demo