When developing the website, we utilized Angular 8, Typescript, and SCSS.
We are using mgl-map to display a map, and I wanted to create a custom control for it with unique styles.
I added the custom control to the map using:
const centerOnCoordinatesControl = new CenterOnCoordinatesControl();
this.mapBoxMap.addControl(centerOnCoordinatesControl, 'bottom-left');
While this implementation works fine, my custom styles do not get applied to the control.
https://i.sstatic.net/a1Yj4.png
To verify if the CSS styles are being loaded correctly, I placed the same element outside the map control:
https://i.sstatic.net/XJZdL.png
location.component.html:
<mgl-map class="mapbox-map"
[style]="defaultStyle"
[zoom]="zoom"
[center]="grazCoord"
(click)="onMapClick($event)"
(load)="mapLoaded($event)">
<mgl-control mglScale unit="metric" position="bottom-right"></mgl-control>
<mgl-control *ngIf="this.mapBoxMap" mglFullscreen position="top-right"></mgl-control>
<mgl-control *ngIf="this.mapBoxMap" mglGeolocate position="top-right"></mgl-control>
</mgl-map>
location.component.ts:
CustomControl:
class CenterOnCoordinatesControl {
private map: any;
private container: HTMLDivElement;
onAdd(map) {
this.map = map;
this.container = document.createElement('div');
const control = document.createElement('i');
control.className = 'custom-center-control mapboxgl-ctrl fas fa-map-marker-alt pointer';
this.container.appendChild(control);
return this.container;
}
}
location.component.scss:
.custom-center-control {
font-size: x-large;
color: green;
&:hover {
color: $cities-orange-light;
}
}
I'm struggling to understand why the style is applied to the element outside the map but not to the CustomControl inside the map.
Is there a way to make it work?
Please let me know if you require more details.