Estoy desarrollando un mapa sobre un parque de diversiones usando Mapbox GL JS y solo me gustaría representar todo dentro de los límites geográficos del parque. ¿Cómo hago esto?
EDITAR: Para aclarar, esto es lo que quiero hacer, excepto que no es un país sino un área geográfica.
en la clase mapbox, puede declarar los límites máximos. establezca maxBounds en el lugar donde se encuentra el parque de diversiones. ¡Hágame saber si necesita más información!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Restrict map panning to an area</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // Set bounds to San Francisco, California. const bounds = [ [-122.66336, 37.492987], // Southwest coordinates [-122.250481, 37.871651] // Northeast coordinates ]; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v11', // style URL center: [-122.433247, 37.742646], // starting position zoom: 12, // starting zoom maxBounds: bounds // Set the map's geographical boundaries. }); </script> </body> </html>