Estoy creando un mapa mundial de folletos y necesito mostrar un modal al usuario, de acuerdo con el país en el que hace clic el usuario. Estoy creando el modal como un componente y usándolo en index.vue. los códigos en index.vue son:

 <template> <div id="map-wrap" style="height: 100vh"> <client-only> <l-map :zoom=13 :center="[55.9464418,8.1277591]" :options="options" ref="map"> <l-tile-layer url="..."></l-tile-layer> <l-geo-json :geojson="geojson" :options="geoJSON_options"></l-geo-json> <Detail_modal /> </l-map> </client-only> </div> </template> <script> import axios from "axios"; import Detail_modal from '~/components/detail_modal.vue'; export default { name: 'IndexPage', components:{ Detail_modal }, data: function(){ return { options: { noWrap: true, maxBounds: [ [-90, -180], [90, 180] ], minZoom: 3, maxZoom: 5, }, geojson: null } }, methods:{ get_data(){ ... }, }, computed:{ geoJSON_options(){ return { style(feature){ ... }, onEachFeature(feature, layer){ ... } } } }, mounted(){ this.get_data(); setTimeout(() => { let map = this.$refs.map.mapObject; map.createPane("detail-modal"); map.getPane("detail-modal").style.zIndex = 1000; }) } } </script> <style lang="scss" scoped> </style>

y los códigos de los componentes son:

 <template> <div id="detail-modal"> </div> </template> <script> export default { } </script> <style lang="scss" scoped> div#detail-modal{ position: absolute; width: 300px; height: 400px; background-color: white; z-index: 99; left: 500px; top: 20px; } </style>

Como vemos, podemos esperar que se muestre un rectángulo blanco sobre el mapa.

El problema es que el componente (rectángulo blanco) siempre está debajo del mapa, incluso cuando usamos el índice z.

He buscado mucho al respecto, algunas personas dicen que deberíamos usar paneles de mapa y map.createPane() en estas situaciones, lo que convierte el elemento en una capa de folleto y controla el orden entre las diferentes partes del mapa, pero el problema empeora cuando no hay una guía sobre cómo se supone que debemos convertir los elementos personalizados, como el elemento html con una identificación , en estas capas.

Bueno, como siempre, ¡cualquier ayuda es apreciada! :)