'display div on top of ngx-mapboxgl map
I'm trying to use ngx-mapbox-gl in an angular 7 app for the first time and am experiencing something strange with the map. I want to display some text and a button on top of the map. I've followed an example to the letter I found on the web, but the div is not displaying. If I comment out the map, the div is there along with the button. With map:
and when map is commented out:
Here is the component html:
<mat-card style="height:100vh;border 1px solid;margin 5px;padding: 5px">
<mat-card-content style="height:100%;border 1px solid;margin 5px;padding: 5px">
<mgl-map
[style]="mapStyle"
[zoom]="_zoom"
[center]="_center"
(load)="loadMap($event)"
(zoomEnd)="onZoom($event)"
>
<mgl-control
mglScale
unit="imperial"
position="top-right">
</mgl-control>
<p>some text</p>
</mgl-map>
<div style="border: 1px solid;background-color: white;height: 100px;width:100px">
<p>this is some text to display</p>
<button mat-button class="layers-button">Button</button>
</div>
</mat-card-content>
</mat-card>
and ts:
import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { AppSettings } from '../../shared/app-settings'
import { AppSettingsService } from '../../services/app-settings.service';
import { LngLat, Map } from 'mapbox-gl';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnChanges {
private className: string;
appSettings: AppSettings;
appSettingsSub: Subscription;
map: Map;
mapStyle: string;
_zoom: number;
_center: LngLat;
//refs
_mapRef: Map;
@Output()
centerChange: EventEmitter<LngLat> = new EventEmitter;
@Input()
set zoom(z: number) {
console.log('in zoom event');
this._zoom = z;
if(this.index === 0) {
this.zoomChange.emit(this._zoom);
}
}
@Output()
zoomChange : EventEmitter<number> = new EventEmitter;
@Input()
index: number;
constructor(public appSettingsService: AppSettingsService) { }
ngOnInit() {
this.className = this.constructor.toString().match(/\w+/g)[1];
this._zoom = 6;
this.appSettingsSub = this.appSettingsService.behaviorSubject.asObservable().subscribe(value => {
this.appSettings = value;
if ( this.appSettings.norCalMapCenter == true ) {
this._center = new LngLat( -121.31209, 37.449904 );
}
else {
this._center = new LngLat( -116.363804, 33.749757 );
}
if (this.appSettings.theme === 'tracs-dark-theme') {
this.mapStyle = 'mapbox://styles/mapbox/dark-v9';
}
else {
this.mapStyle = 'mapbox://styles/mapbox/outdoors-v9';
}
});
}
ngOnChanges(changes) {
if (!changes) {
return;
}
}
loadMap( map: Map) {
this._mapRef = map;
this._center = map.getCenter();
}
onZoom(e) {
this._zoom = Math.round(this._mapRef.getZoom());
console.log('zoom event zoom:', this._zoom);
};
}
and css:
mgl-map {
height : calc(100% - 64px);
width: 100%;
margin: 0;
padding: 0;
}
.mapboxgl-canvas {
margin: 0;
padding: 0;
}
.mat-card {
margin: 0;
padding: 0;
}
Is there something that needs to be done with layers or z-levels to display something on top of the map?
Solution 1:[1]
I think that the element stays behind the map, so all you have to do is to use position: absolute
and add a higher z-index
to the overlay element.
Here's the css code:
.mgl-map-overlay {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
I've also created a simple demo on Stackblitz:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | andreivictor |