Leaflet Sidebar

by falkedesign

HTML

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<div id="container">

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

</div>

CSS

#mapid {
  height: 500px;
  width: 400px;
}

#sidebar{
  width: 200px;
  height: 500px;
  background: #eee;
}

#container{
  width: 100%;
  height: 100%;
  display: flex;
}

.sidebar-elm{
  margin: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

JavaScript

var map = L.map('mapid').setView([22.29227, 114.20847], 15);


var sidebar = document.getElementById("sidebar");
function createSidebarElement(layer){
	var elm = "<div class='sidebar-elm' data-marker='"+layer._leaflet_id+"'>Marker: "+layer.getLatLng().toString()+"</div>";
  
  // create a temp div to create element from string
  var temp = document.createElement('div');
  temp.innerHTML = elm.trim();
  var htmlElm = temp.firstChild
  
  L.DomEvent.on(htmlElm,'click',zoomToMarker);
  sidebar.append(htmlElm);
}

function zoomToMarker(e){
  var clickedElm = e.target;
  var markerId = clickedElm.getAttribute('data-marker');
  
  var marker = fg.getLayer(markerId);
  map.panTo(marker.getLatLng());
}

var latlngs = [
	[40.708491, -74.021028],
  [ 40.715908, -74.018324],
  [ 40.717013, -74.000468],
  [ 40.706018, -74.000081]
]

var fg = L.featureGroup().addTo(map);

latlngs.forEach((latlng)=>{
	var marker = L.marker(latlng).addTo(fg);
  createSidebarElement(marker) 
});
map.fitBounds(fg.getBounds())