Menu
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
375
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'
});
}
}
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 © <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);
}
I had the same problem, it turned out that I had put an empty space in the id attribute like this: id="map "
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
