Offset the vanishing point using padding
Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Offset the vanishing point using padding</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><style>.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;} .sidebar-toggle {position: absolute;width: 1.3em;height: 1.3em;overflow: visible;display: flex;justify-content: center;align-items: center;} .sidebar-toggle.left {right: -1.5em;} .sidebar-toggle.right {left: -1.5em;} .sidebar-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 offscreenThe toggleSidebar() function removes this class from the element in order to expand it.*/.left.collapsed {transform: translateX(-295px);} .right.collapsed {transform: translateX(295px);}</style> <div id="map"><div id="left" class="sidebar flex-center left collapsed"><div class="sidebar-content rounded-rect flex-center">Left Sidebar<divclass="sidebar-toggle rounded-rect left"onclick="toggleSidebar('left')">→</div></div></div><div id="right" class="sidebar flex-center right collapsed"><div class="sidebar-content rounded-rect flex-center">Right Sidebar<divclass="sidebar-toggle rounded-rect right"onclick="toggleSidebar('right')">←</div></div></div></div> <script>var center = [-77.01866, 38.888];goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',zoom: 12.5,center: center,pitch: 60,style: 'https://tiles.goong.io/assets/goong_map_web.json'}); new goongjs.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 = {}; 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 classmap.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 elementclasses.push('collapsed'); map.easeTo({padding: padding,duration: 1000});} // Update the class list on the elementelem.className = classes.join(' ');} map.on('load', function () {toggleSidebar('left');});</script> </body></html>