Leaflet Destinations Panal

by falkedesign

HTML

<!DOCTYPE html>
<html>

  <head>
    <script src='//cdn.jsdelivr.net/npm/tabletop@1.5.2/src/tabletop.min.js'></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="//unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  </head>

  <body>
    <div class="flex">
      <div id="map-div"></div>
      <div id="destinations">
      <h2>
      Destinations:
      </h2>
        <div id="destinations-body"> </div>
        
      </div>
    </div>
  </body>

</html>

CSS

html, body{  
   height: 100%;
   width: 100%;
}

.flex{
  display: flex;
   height: 100%;
   width: 100%;
}

 #map-div {
   height: 100%;
   width: 100%;
}

#destinations{
  width: 300px;
}

.destination-elm{
  cursor: pointer;
}

JavaScript

var map = L.map('map-div').setView([60.1682653, 24.9422078], 5);
var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Basemap (c) <a href="http://openstreetmap.org">OpenStreetMap</a>',
  //minZoom: 5,
  maxZoom: 100
});
basemap.addTo(map);


var destinationHTML = document.getElementById("destinations-body");

var fg = L.featureGroup().addTo(map);
var destinations = [];
function addPoints(data, tabletop) {
	var line = L.polyline([]).addTo(map);
	for (var row in data) {
    var marker = L.marker([
      data[row].Latitude,
      data[row].Longitude
    ]).addTo(fg);
    line.addLatLng(marker.getLatLng());
    marker.bindPopup('<strong>' + data[row].Info + '</strong>');
    destinations.push({
    	marker,
      data: data[row],
      id: row
    });
    
    
  destinationHTML.innerHTML += "<div class='destination-elm' onclick='destinationClick(\""+row+"\")'><span>"+data[row].Info+"</span></div>"
  }
  
  map.fitBounds(fg.getBounds());
}

function destinationClick(id){
	console.log(id)
  destinations.forEach(function(obj){
  	if(obj.id == id){
    	map.panTo(obj.marker.getLatLng());
    }
  })
}


function init() {
  Tabletop.init({
    key: 'https://docs.google.com/spreadsheets/d/1Rs6xPlJ8pU4UFfmokjATaf4dArMWxQxZcyS-xRIIFuY/edit?usp=sharing',
    callback: addPoints,
    simpleSheet: true
  });
}
init()