I want to place a rectangle on a mapbox map positioned absolutely compared to the map container itself.
I want a rectangle like this: https://docs.mapbox.com/playground/static/
What I tried is:
<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>
The problem is that the rectangle is not interactive. I can't zoom in or out when hoovering in the rectangle area. I also tried to make a layer in mapbox I couldn't get it to work.
I found the solution. Pointer-events: none; must be added to interact with the underlaying layer and not the rectangle.
<div id="container" style=" pointer-events: none;">
<div style="width:300px;height:200px;border:1px solid #000; pointer-events: none;">test</div>
</div>
I found the solution here:
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events