Error: Map container not found. with leaflet map using Angular

Question

Full error:

core.js:6479 ERROR Error: Map container not found.
    at NewClass._initContainer (leaflet-src.js:4066)
    at NewClass.initialize (leaflet-src.js:3099)
    at new NewClass (leaflet-src.js:296)
    at Object.createMap [as map] (leaflet-src.js:4691)
    at MapViewComponent.ngAfterViewInit (map-view.component.ts:13)
    at callHook (core.js:2526)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9536)
    at refreshEmbeddedViews (core.js:10590)

I get this whenever I try to load the component that contains the map. Here is the .ts file (I hid the access token)

import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map-view',
  templateUrl: './map-view.component.html',
  styleUrls: ['./map-view.component.scss'],
})
export class MapViewComponent implements AfterViewInit {
  constructor() {}

  ngAfterViewInit(): void {
    const mymap = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution:
        'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'my.token',
    }).addTo(mymap);
  }
}

.html file

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>

<div id="map"></div>

and .css file

#map {
  height: 500px;
}

It's really a simple map I'm just following the quickstart guide on their site but it's not working. I've already tried with ngOnInit and it's the same thing. Also added leaflet to angular.json. I tried changing the order of the lines in the .html file, placing the map div in all 3 possible places and it's the same error.

Answer 1

I had the same error when I tried putting a leaflet map in an Angular Material Tab component. The problem was that leaflet was trying to initialize the map but the dom wasn't loaded yet. What fixed it was implementing lazy loading by declaring the body of the tab in a ng-template with the matTabContent attribute. It looks like this:

<mat-tab-group preserveContent>
  <mat-tab label="Home">
     <app-home></app-home>
  </mat-tab>
  <mat-tab label="Applications">
    <app-applications></app-applications>
  </mat-tab>
  <mat-tab label="Map">
    <ng-template matTabContent>
      <app-map></app-map>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Answer 2

Here is a good example

Take a look at my implementation