Quiero colocar un rectángulo en un mapa de mapbox posicionado absolutamente en comparación con el contenedor del mapa en sí.
Quiero un rectángulo como este: https://docs.mapbox.com/playground/static/
Lo que probé es:
<html> <head> <meta charset="utf-8"> <title>Display a map on a webpage</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { top: 0; bottom: 0; width: 500px; height: 400px; } #container { position: absolute; z-index: 100; top: 50%; /* position the top edge of the element at the middle of the parent */ left: 50%; /* position the left edge of the element at the middle of the parent */ transform: translate(-50%, -50%); } </style> </head> <body> <div id="map"> <div id="container"> <div style="width:300px;height:200px;border:1px solid #000;">test</div> </div> </div> <script> mapboxgl.accessToken = 'XXX'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v11', // style URL center: [-74.5, 40], // starting position [lng, lat] zoom: 9 // starting zoom, }) </script> </div> </body> </html>
El problema es que el rectángulo no es interactivo. No puedo acercar o alejar el zoom cuando paso la aspiradora en el área del rectángulo. También traté de hacer una capa en mapbox pero no pude hacer que funcionara.
Encontré la solución. Eventos de puntero: ninguno; debe agregarse para interactuar con la capa subyacente y no con el rectángulo.
<div id="container" style=" pointer-events: none;"> <div style="width:300px;height:200px;border:1px solid #000; pointer-events: none;">test</div> </div>
Encontré la solución aquí:
La propiedad CSS pointer-events establece en qué circunstancias (si las hay) un elemento gráfico en particular puede convertirse en el objetivo de los eventos de puntero.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events