I'm attempting to integrate a custom mapbox style that I have uploaded to the studio, into my angular application. Interestingly, it functions flawlessly with a different factory mapbox style (e.g.
mapbox://styles/mapbox/streets-v11mapbox://styles/elpierrot/ckl0qlk1q0skq17s0x0hhjli3Upon attempting to load this style, these errors are shown in the console, which do not occur when loading any other style.
What confuses me is that when I test it on a jsfiddle, it displays correctly. Additionally, I can view the style in mapbox studio without encountering any issues.
Here is the code:
import { Map, LngLat, Marker } from 'mapbox-gl';
@Component({
selector: 'app-asset-edition',
templateUrl: './asset-edition.component.html',
styleUrls: ['./asset-edition.component.scss']
})
export class AssetEditionComponent implements OnInit {
// Map
map: Map;
mapStyle: string = 'mapbox://styles/elpierrot/ckl0qlk1q0skq17s0x0hhjli3';
mapCenter: LngLat | null;
mapBounds: Array<LngLat> | null;
coords: LngLat | null;
constructor() {}
ngOnInit() {
this.coords = new LngLat(-65.017, -16.457);
this.mapCenter = this.coords;
}
}
<div>
...
<mgl-map [style]="mapStyle" [zoom]="[7]" [center]="mapCenter" [fitBounds]="mapBounds"
(load)="map = $event">
</mgl-map>
...
</div>
Could this be an issue related to mapbox itself? Are there possible problems with the style layers? (I am able to provide my exact code if needed, but given that it functions with another style, it seems peculiar).