向mapbox地图添加可折叠的侧边栏

<div id="map"></div>

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [longitude, latitude],
  zoom: 12
});

<div id="sidebar"></div>

#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background-color: #fff;
  transition: transform 0.3s ease;
  transform: translateX(-100%);
}

#sidebar.open {
  transform: translateX(0);
}

map.on('load', function() {
  var sidebar = document.getElementById('sidebar');
  var button = document.createElement('button');
  button.innerHTML = 'Toggle Sidebar';
  button.addEventListener('click', function() {
    sidebar.classList.toggle('open');
  });
  map.getContainer().appendChild(button);
});