JSFiddle - React, Tailwind, and code Playground

by mika Audel

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
<div id="map" style="width:500px;height:400px;"></div>

JavaScript

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
	 	// Creating a tile layer usually involves setting the URL template for the tile images

		var cities = new L.featureGroup();

		L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
		L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
		L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
		L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

/***  little hack starts here ***/
L.Map = L.Map.extend({
    openPopup: function(popup) {
        //        this.closePopup();  // just comment this
        this._popup = popup;

        return this.addLayer(popup).fire('popupopen', {
            popup: this._popup
        });
    }
}); /***  end of hack ***/


var map = new L.Map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

L.marker([51.49, -0.09]).bindPopup("<b>Hello world!</b><br />I am popup 1.").addTo(cities),

L.marker([51.51, -0.091]).bindPopup("<b>Olá mundo!</b><br />Sou o popup 2.").addTo(cities),

L.marker([51.51, -0.12]).bindPopup("<b>Bonjour monde!</b><br />Je suis popup 3.").addTo(cities),
 
 cities.addTo(map);
	  
 cities.on("click",function (e) {
    //e.layer.openPopup();
  		cities.eachLayer(function(l){l.openPopup();})
    });