JSFiddle - React, Tailwind, and code Playground

by humano

HTML

<link rel="stylesheet" href="https://dev7.tupale.co/librerias/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://dev7.tupale.co/librerias/leaflet/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="https://dev7.tupale.co/librerias/leaflet/css/leaflet-sidebar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sidebar/0.2.2/js/sidebar.min.js"></script>
<script src="https://dev7.tupale.co/librerias/leaflet/js/leaflet-sidebar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

	
    <!-- optionally define the sidebar content via HTML markup -->
    <div id="sidebar" class="leaflet-sidebar collapsed">

        <!-- nav tabs -->
        <div class="leaflet-sidebar-tabs">
            <!-- top aligned tabs -->
            <ul role="tablist">
                <li><a href="#home" role="tab"><i class="fa fa-bars active"></i></a></li>
         
              
            </ul>

            <!-- bottom aligned tabs -->

            <ul role="tablist">
                
            </ul>
        </div>

        <!-- panel content -->
  <div class="leaflet-sidebar-content">
<div class="leaflet-sidebar-pane" id="home">
  <h1 class="leaflet-sidebar-header">
    <span id='formulario_titulo_mapa'>Tupale.co</span>
    <span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
  </h1>
  <ul class='list-group '>
    <li class='list-group-item'>
      <a id='7850c035cc53ee5719aa8677fb805ea7' href='#' onclick="openMarkerPopup(); " > 
      <img style=' height:20px;' class='' src='https://tupale.co/milfs/images/secure/?file=300/82afc44d9c358234ebb411f848481ea4.png' >  Teatro </a> </li>
    <li...

CSS

body {
            padding: 0;
            margin: 0;
        }

        html, body, #map {
            height: 100%;

        }

JavaScript

// standard leaflet map setup
        var map = L.map('map');
      //  map.setView([51.2, 7], 9);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: "Map data &copy; OpenStreetMap contributors <a href='https://tupale.co'>Powered by Tupale.co</a>"
        }).addTo(map);
     
        
		var geojson = L.geoJson(geojsonSample, {

			pointToLayer: function(feature, latlng) {
                var smallIcon = new L.Icon({
				     iconSize: [50, 50],
				     iconAnchor: [13, 27],
				     popupAnchor:  [1, -24],
				     autoPanPadding: [30,30],
				     
				     iconUrl: feature.properties.icon.iconUrl
				     

					 });
                return L.marker(latlng, {icon: smallIcon });
            },

		onEachFeature: function(feature, layer) {
			layer._leaflet_id = feature.properties.control;
			
            var popupText = feature.properties.description 
				layer.bindPopup(popupText)
				layer.bindTooltip(feature.properties.title).openTooltip(); 
				}
				});
		
		
	//	markers.addLayer(geojsonAux);
		
		
		//var markers = L.markerClusterGroup();
		var markers = L.layerGroup();
				markers.addLayer(geojson).addTo(map);
				map.fitBounds(geojson.getBounds().pad(Math.sqrt(2) /4));
        
   
        // create the sidebar instance and add it to the map
        var sidebar = L.control.sidebar({ container: 'sidebar', autopan: true    })
            .addTo(map)
            .open('home');

        // add panels dynamically to the sidebar


           
        sidebar.on('content', function (ev) {
            switch (ev.id) {
                case 'autopan':
                sidebar.options.autopan = true;
                break;
                default:
                sidebar.options.autopan = true;
            }
        });

 function openMarkerPopup(){
			const markerID = this.id;
			const marker = markers.getLayer(markerID);
			
			marker.openPopup();
		}