JSFiddle - React, Tailwind, and code Playground

by shitao1988

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet - several popups open at the same time</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--    <link rel="stylesheet" href="dist/leaflet.css" /> -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" /><![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
    </head>

    <body>
    <div id="map" style="width: 600px; height: 400px"></div>
    </body>

</html>

JavaScript

/***  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]).addTo(map).bindPopup("<b>Hello world!</b><br />I am popup 1.");

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

L.marker([51.51, -0.12]).addTo(map).bindPopup("<b>Bonjour monde!</b><br />Je suis popup 3.");