Leaflet Sidebar data

by falkedesign

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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, data){
	var elm = "<div class='sidebar-elm' data-marker='"+layer._leaflet_id+"'>Marker: "+data.name+"</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 businesses = [{
       'name': 'Business name 1',
       'location': 'address',
       'id': 'businessid',
       'website': 'http://website',
       'coords':[22.29227, 114.20847]
   },{
       'name': 'Business name 2',
       'location': 'address',
       'id': 'businessid',
       'website': 'http://website',
       'coords':[22.28227, 114.21847]
   }]

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

businesses.forEach((element)=>{
console.log([element.coords[0],element.coords[1]])
  var marker = L.marker([element.coords[0],element.coords[1]]).addTo(fg)
  createSidebarElement(marker, element); 
});
map.fitBounds(fg.getBounds())