Reputation: 4987
I'm using mapbox-gl
to add a Mapbox map to my Angular app, that works so far. The approach is very similar to this one here but I'm unable to find Polygon
in the Angular port of that library.
Here's my component code:
private mapElement: ElementRef;
@ViewChild('map', { static: false }) set content(content: ElementRef) {
if (content) { // initially setter gets called with undefined
Object.getOwnPropertyDescriptor(mapboxgl, "accessToken").set(this.mapBoxKey);
this.map = new mapboxgl.Map({
container: content.nativeElement,
style: this.globals.MapboxStyle,
zoom: 12,
center: [this.centerLng, this.centerLat]
});
// Add map controls
this.map.addControl(new mapboxgl.NavigationControl());
//at this point I'd like to add a polygon....
}
}
map.addLayer
seems to accept a first argument of type Layer
but I'm not sure where to find this type and I'm not able to create an instance of it.
Am I missing a package here ?
Upvotes: 0
Views: 2113
Reputation: 4987
So here's how I ended up doing it. Apparently, there are no types included in the Angular port of Mapbox-GL library, so you have to use generic objects.
private mapElement: ElementRef;
@ViewChild('map', { static: false }) set content(content: ElementRef) {
if (content) { // initially setter gets called with undefined
Object.getOwnPropertyDescriptor(mapboxgl, "accessToken").set(this.mapBoxKey);
this.map = new mapboxgl.Map({
container: content.nativeElement,
style: this.globals.MapboxStyle,
zoom: 12,
center: [this.centerLng, this.centerLat]
});
// Add map controls
this.map.addControl(new mapboxgl.NavigationControl());
let me = this;
me.space = this.space
this.map.on('load', function (e) {
this.addSource('space', { type: "geojson", data: me.space.geometry });
this.addLayer({
'id': 'space',
'type': 'fill',
'source': 'space',
'layout': {},
'paint': {
'fill-color': '#088',
'fill-opacity': 0.8
}
});
});
}
}
Upvotes: 1
Reputation: 126887
It looks like you're just using the standard Mapbox-GL-JS API. The documentation is here: https://docs.mapbox.com/mapbox-gl-js/api
The example you linked is using mapbox.js, not Mapbox-GL-JS. That's a completely separate library.
Upvotes: 1