CODEWITHSUNDEEP
angularmapboxmapbox-gl-jsangular9
Francis Ducharme
Francis Ducharme

Reputation: 4987

Adding a polygon on Mapbox map in Angular 9

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

Answers (2)

Francis Ducharme
Francis Ducharme

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

Steve Bennett
Steve Bennett

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

Related Questions