Mapbox with Angular 6. "map container not found" error

Asked 26/8, 2018 at 2:55 Answered 11/2, 2022 at 21:14

I am developing my first angular web app and I want to introduce something similar to Google maps. I dón´t want to use this last one because of new billing politics, so I have tried MapBox.

Following the tutorial, I managed to create the map I need; the problem is, I don´t know how to display it on an angular component.

I generated this file for the map, and works perfectly with the browser and when I paste it directly on the index.html of my angular project. But when I try to use it on a component, I don´t know how to do it.

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Points on a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
      <div id='map'></div>
      <script>
        mapboxgl.accessToken = 'myToken'; // replace this with your access token
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'my style URL', // replace this with your style URL
        center: [-2.8662684, 43.2806562],
        zoom: 15
});
// code from the next step will go here

        map.on('click', function(e) {
          var features = map.queryRenderedFeatures(e.point, {
          layers: ['rhynux'] // replace this with the name of the layer
      });

        if (!features.length) {
          return;
         }

      var feature = features[0];

      var popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML('<h3>' + feature.properties.title +      '</h3><p>' + feature.properties.description +     '</p>')
.setLngLat(feature.geometry.coordinates)
        .addTo(map);
    });


    </script>
  </body>
</html>

I moved <div id="map"></div> to the component; but error is thrown "map container not found".

I also tried to install some nom packages like this one but it has not enough information on how to use it for newbies like me.

This another one has no documentation either...

And I looked on several SO posts but found no understanding on how to do it.

Thanks. Your help is very appreciated

Fourlegged answered 26/8, 2018 at 2:55 Comment(0)

I had the same issue and resolved it by using @ViewChild to locate the map element. Here's a bare-bones Angular component that will show a Mapbox map.

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-map',
  template: '<div #mapElement style="height:200px"></div>'
})
export class MapComponent implements OnInit {

    map: mapboxgl.Map;
    @ViewChild('mapElement') mapElement: ElementRef;
    constructor() { }

    ngOnInit() {
        mapboxgl.accessToken = 'ACCESS_TOKEN_HERE';
    }

    ngAfterViewInit(){
        this.map = new mapboxgl.Map({
            container: this.mapElement.nativeElement,
            style: 'mapbox://styles/mapbox/streets-v9'
        });
    }   

}

Zoa answered 4/10, 2018 at 12:32 Comment(0)

I had this issue, so I just added a setTimeOut to the method:

Oninit(){
  setTimeout(() => {
    
  let mymap = L.map('mapid').setView([51.505, -0.09], 13);
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<key>', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
  }).addTo(mymap);
  }, 100);
}

Vomit answered 25/10, 2020 at 12:24 Comment(0)

I had the same problem, it turned out that I had put an empty space in the id attribute like this: id="map "

Benzene answered 11/2, 2022 at 21:14 Comment(0)

Recommended topics

Hot tags