Open JariHanah opened 4 months ago
This is due to the default z-index of leaflet maps: https://leafletjs.com/reference.html#map-pane
I have the following css which i inject into the shadow dom of the leaflet map to combat this:
/* customization of default map pane layers to not interfere with vaadin layering */
/* https://leafletjs.com/reference.html#map-pane */
.leaflet-map-pane {
z-index: 0;
}
.leaflet-tile-pane {
z-index: 1;
}
.leaflet-overlay-pane {
z-index: 2;
}
.leaflet-shadow-pane {
z-index: 3;
}
.leaflet-marker-pane {
z-index: 4;
}
.leaflet-tooltip-pane {
z-index: 5;
}
.leaflet-popup-pane {
z-index: 6;
}
the injection i perform using a js function i call on the Map
class:
override fun onAttach(attachEvent: AttachEvent?) {
super.onAttach(attachEvent)
// the LeafletMap component does not expose any parts through which we can customize the css in the shadow dom
// hence, after our view is constructed, we inject the css we want manually into the shadow dom of the LeafletMap
this.element.executeJs("window.injectStylesIntoShadowDom($0, $1)", map, css)
}
where css
is the css above as a string which i load from the resource
directory
the javascript i import on the view in question with:
@JsModule("./injectStylesIntoShadowDom.js")
And the javascript i use resides in fontend/injectStylesIntoShadowDom.js
:
/**
* Injects CSS styles into the Shadow DOM of a given component.
*
* This is needed if a component does not expose any parts through which we can modify the css directly.
*
* An example is the LeafletMap component.
*
* @param element The Vaadin element for which we want to inject the css into the shadow dom
* @param css The css we want to inject into the element
*/
window.injectStylesIntoShadowDom = (element, css) => {
const shadowRoot = element.shadowRoot;
if (shadowRoot) {
const styleElement = document.createElement('style');
styleElement.textContent = css;
shadowRoot.appendChild(styleElement);
}
};
Another way would be to simply increase the z-index of the dialog you want above the map to a value > 700
Describe the bug Dialog and MenuBar shows behind the LeafLet map.
To Reproduce Steps to reproduce the behavior: just fire a Dialog after clicking on a Marker.onClick(new Dialog). Or add a MenuBar above or below the leafLet Map, if it opens, it will render behind the map.
Expected behavior Dialog should appear above the Map.
Screenshots Sure
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context Check code: