I am currently working on an Angular 9 project with the latest version of mapbox integrated. My goal is to toggle between displaying contours and museums on the map.
To achieve this, I have installed the package: "@types/mapbox-gl": "^1.12.5",
and added it to app.module.ts as follows:
NgxMapboxGLModule.withConfig({
accessToken:
'pk.ljljlkjnA5ZzAyYnVtaGkifQ.LfTgQzPszKiyVQjKiUFsyg', // accessToken can also be set per map (accessToken input of mgl-map)
}),
In addition, I have created a component with the following structure:
@Component({
template: `
<mgl-map
style="mapbox://styles/mapbox/streets-v9"
[zoom]="[15]"
[center]="[-71.97722138410576, -13.517379300798098]"
>
<mgl-vector-source id="museums" url="mapbox://mapbox.2opop9hr"> </mgl-vector-source>
<mgl-vector-source id="contours" url="mapbox://mapbox.mapbox-terrain-v2"> </mgl-vector-source>
<mgl-layer
id="museums"
type="circle"
source="museums"
[layout]="layouts.museums"
[paint]="{
'circle-radius': 8,
'circle-color': 'rgba(55,148,179,1)'
}"
sourceLayer="museum-cusco"
>
</mgl-layer>
<mgl-layer
id="contours"
type="line"
source="contours"
[layout]="layouts.contours"
[paint]="{
'line-color': '#877b59',
'line-width': 1
}"
sourceLayer="contour"
>
</mgl-layer>
</mgl-map>
<div class="menu">
<!-- <mat-button-toggle [checked]="true" value="contours" (change)="toggleLayer($event)"
>contours</mat-button-toggle
>
<mat-button-toggle [checked]="true" value="museums" (change)="toggleLayer($event)"
>museums</mat-button-toggle -->
>
</div>
`,
styleUrls: ['./toggle-layer.component.scss'],
})
export class ToggleLayersComponent implements OnInit {
layouts = {
contours: {
visibility: 'visible',
'line-join': 'round',
'line-cap': 'round',
},
museums: {
visibility: 'visible',
},
};
ngOnInit() {}
toggleLayer(evt: {value: 'contours' | 'museums'}) {
const key = evt.value as 'contours';
this.layouts[key] = {
...this.layouts[key],
visibility: this.layouts[key].visibility === 'visible' ? 'none' : 'visible',
};
}
}
However, I encountered errors related to the 'mgl-layer' element. It seems that Angular is having trouble recognizing it within the module setup. How should I proceed?
Despite some issues, I noticed that the code editor provides suggestions for elements like [layout], indicating that the syntax is correct. But when attempting to build the Angular app, errors persist.
After making some adjustments to the component's template, I continued to face errors related to 'mgl-layer' not being recognized. In my child module declaration, everything appears to be in order. What could be causing this issue?
I made further modifications to include the 'ToggleLayersComponent' in the declarations of my main app module. Although no errors are displayed, the expected content is still not visible on the map. What else should I consider?