Offset the vanishing point using padding

Offset the apparent center or vanishing point of the map to reduce distortion when floating elements are displayed over the map. See the example: https://docs.mapbox.com//mapbox-gl-js/example/offset-vanishing-point-with-padding/

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css">



<div id="map">
    <div id="left" class="sidebar flex-center left collapsed">
        <div class="sidebar-content rounded-rect flex-center">
            Left Sidebar
            <div
                class="sidbear-toggle rounded-rect left"
                onclick="toggleSidebar('left')"
            >
                &rarr;
            </div>
        </div>
    </div>
    <div id="right" class="sidebar flex-center right collapsed">
        <div class="sidebar-content rounded-rect flex-center">
            Right Sidebar
            <div
                class="sidbear-toggle rounded-rect right"
                onclick="toggleSidebar('right')"
            >
                &larr;
            </div>
        </div>
    </div>
</div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    .rounded-rect {
        background: white;
        border-radius: 10px;
        box-shadow: 0 0 50px -25px black;
    }

    .flex-center {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flex-center.left {
        left: 0px;
    }

    .flex-center.right {
        right: 0px;
    }

    .sidebar-content {
        position: absolute;
        width: 95%;
        height: 95%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 32px;
        color: gray;
    }

    .sidbear-toggle {
        position: absolute;
        width: 1.3em;
        height: 1.3em;
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sidbear-toggle.left {
        right: -1.5em;
    }

    .sidbear-toggle.right {
        left: -1.5em;
    }

    .sidbear-toggle:hover {
        color: #0aa1cf;
        cursor: pointer;
    }

    .sidebar {
        transition: transform 1s;
        z-index: 1;
        width: 300px;
        height: 100%;
    }

    /*
  The sidebar styling has them "expanded" by default, we use CSS transforms to push them offscreen
  The toggleSidebar() function removes this class from the element in order to expand it.
*/
    .left.collapsed {
        transform: translateX(-295px);
    }

    .right.collapsed {
        transform: translateX(295px);
    }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwZHdlbGwiLCJhIjoiY2pmZnRpZHYzMnhzMTRhcWg1NWJ1NHI5NyJ9.ndwyu6MXyHwXBDtnkJKqmA';
    var kenya = [
      [32.958984, -5.353521],
      [43.50585, 5.615985]
    ];
    var center = [
      (kenya[0][0] + kenya[1][0])/2,
      (kenya[0][1] + kenya[1][1])/2
    ];
    var paddingTop = 100;
    var map = new mapboxgl.Map({
        container: 'map',
        zoom: 12.5,
        center: center,
        style: 'mapbox://styles/mapbox/streets-v11'
    });

    map.fitBounds(kenya, { padding: { top: paddingTop } } );
    
    new mapboxgl.Marker().setLngLat(center).addTo(map);

    function toggleSidebar(id) {
        var elem = document.getElementById(id);
        var classes = elem.className.split(' ');
        var collapsed = classes.indexOf('collapsed') !== -1;

        var padding = { top: paddingTop };

        if (collapsed) {
            // Remove the 'collapsed' class from the class list of the element, this sets it back to the expanded state.
            classes.splice(classes.indexOf('collapsed'), 1);

            padding[id] = 300; // In px, matches the width of the sidebars set in .sidebar CSS class
            map.easeTo({
                padding: padding,
                duration: 1000 // In ms, CSS transition duration property for the sidebar matches this value
            });
        } else {
            padding[id] = 0;
            // Add the 'collapsed' class to the class list of the element
            classes.push('collapsed');

            map.easeTo({
                padding: padding,
                duration: 1000
            });
        }

        // Update the class list on the element
        elem.className = classes.join(' ');
    }

    map.on('load', function() {
      setTimeout(function() {
        toggleSidebar('left');
      }, 1000)
    });