debug/bounds.html

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL JS debug page</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>

<body>
<div id='map'></div>

<script src='/dist/mapbox-gl-dev.js'></script>
<script src='/debug/access_token_generated.js'></script>
<script>

    var map = window.map = new mapboxgl.Map({
        container: 'map',
        zoom: 12.5,
        center: [-77.01866, 38.888],
        style: 'mapbox://styles/mapbox/streets-v10',
        hash: true
    });

    function geojson() {
        const bounds = map.getBounds();
        return {
            type: 'Polygon',
            coordinates: [[
                bounds.getNorthEast().toArray(),
                bounds.getNorthWest().toArray(),
                bounds.getSouthWest().toArray(),
                bounds.getSouthEast().toArray(),
                bounds.getNorthEast().toArray()
            ]]
        };
    }

    map.on('load', () => {
        map.addSource('bounds', {
            type: 'geojson',
            data: geojson()
        });

        map.addLayer({
            id: 'bounds',
            type: 'fill',
            source: 'bounds',
            paint: {
                'fill-color': "rgba(255,0,0,0.2)"
            }
        });

        map.on('rotateend', () => {
            map.getSource('bounds').setData(geojson());
        });
    });
</script>
</body>
</html>