Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 375
FranP Avatar asked Aug 26 '18 02:08

FranP


3 Answers

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'
        });
    }   

}
like image 191
Jordan Chitty Avatar answered Nov 01 '22 06:11

Jordan Chitty


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);
}
like image 32
Abru007 Avatar answered Nov 01 '22 06:11

Abru007


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

like image 41
Wagner Gauer Avatar answered Nov 01 '22 05:11

Wagner Gauer