controlling markers outside the map

by tomik23

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>

 <div id="map"></div>
 <div classs="container">
   <a id="A" class="marker-click" href="#">Marker A</a>
   <a id="B" class="marker-click" href="#">Marker B</a>
   <a id="C" class="marker-click" href="#">Marker C</a>
 </div>

CSS

body {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#map {
  height: 90%;
}

.container {
  display: flex;
  padding: 5px;
}

.container>a+a {
  padding-left: 20px;
}

JavaScript

let zoom = 18;
let lat = 52.2297700;
let lon = 21.0117800;

let featureGroups = [
  L.marker([52.22966244690615, 21.011084318161014], {
    title: 'A'
  }).bindPopup('A'),
  L.marker([52.22998444382795, 21.012511253356937], {
    title: 'B'
  }).bindPopup('B'),
  L.marker([52.22870029595543, 21.00647628307342], {
    title: 'C'
  }).bindPopup('C')
];

let map = L.map('map', {
  minZoom: 0,
  maxZoom: 18
}).setView([lat, lon], zoom);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

for (let i = 0; i < featureGroups.length; i++) {
  featureGroups[i].addTo(map);
}

function markerOpen(id) {
  for (let i in featureGroups) {
    const markerId = featureGroups[i].options.title;
    if (markerId === id) {
      featureGroups[i].openPopup();
      centerMarker(featureGroups[i].getLatLng());
    }
  }
}

function centerMarker(latlng) {
  console.log(latlng);
  const marker = L.marker([latlng.lat, latlng.lng]);
  let group = new L.featureGroup([marker]);
  map.fitBounds(group.getBounds());
}


const markersDiv = document.querySelectorAll('.marker-click');

markersDiv.forEach(marker => {
  marker.addEventListener('click', () => {
    markerOpen(marker.id);
  });
});