How do I limit map to geographical area in Mapbox?

810 Views Asked by karl At 02 November 2021 at 17:24

I'm developing a map over an amusement park using Mapbox GL JS and would like to only render everything inside the geographical boundaries of the park. How do I do this?

EDIT: To clarify, this is kind of what I want to do, except not a country but a geographical area.

Original Q&A

There are 1 best solutions below

AFreeChameleon On 02 November 2021 at 17:41

in the mapbox class, you can declare the maxbounds. set the maxBounds to where the amusement park is. Let me know if you need more info!

<!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>

How do I limit map to geographical area in Mapbox?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in MAPBOX

Related Questions in MAPBOX-GL-JS

Related Questions in MAPBOX-STUDIO

Trending Questions

Popular # Hahtags

Popular Questions