JSFiddle - React, Tailwind, and code Playground

by FranceImage

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.css">
<div>
<a href="#" class="showOnMap" data-lat="51.51" data-lng="-0.09">marker1</a>
<a href="#" class="showOnMap" data-lat="51.495" data-lng="-0.083">marker2</a>
<a href="#" class="showOnMap" data-lat="51.49" data-lng="-0.1">marker3</a>
</div>
   <div class="map-holder" style="height:540px;" id="majmap"></div>

JavaScript

var mymap = L.map('majmap').setView([51.505, -0.09], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
            maxZoom: 18,
            attribution: '',
            id: 'mapbox.streets'
        }).addTo(mymap);
        
        
        /* Marker */
        
        var workstationicon0 = new L.icon({iconUrl: 'https://cdn2.iconfinder.com/data/icons/snipicons/500/map-marker-128.png'});
        
        var filtermarkers;
        var markers = L.markerClusterGroup();
        /* Default selected filter */
        markers.addLayer(L.marker([51.51, -0.09], {icon: workstationicon0}).bindPopup("<div class='popcontent'><div class='popup-bottom'><div class='workshop-location'> Location name</div></div></div>"));
        markers.addLayer(L.marker([51.495, -0.083], {icon: workstationicon0}).bindPopup("<div class='popcontent'><div class='popup-bottom'><div class='workshop-location'> Location name</div></div></div>"));
        markers.addLayer(L.marker([51.49, -0.1], {icon: workstationicon0}).bindPopup("<div class='popcontent'><div class='popup-bottom'><div class='workshop-location'> Location name</div></div></div>"));
        
        var popup = L.popup();
        
        mymap.addLayer(markers);
        
        
          $('.showOnMap').click(function(e){
              e.preventDefault();
              var obj = $(this);
              var lat = obj.data('lat');
              var lng = obj.data('lng');
              console.log('lat:'+lat);
              mymap.panTo([lat, lng]);
              popup.openPopup();
          });