JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<div id="map"></div>
CSS
#map {
height: 500px;
}
JavaScript
var map = L.map("map").setView([48.86, 2.35], 12);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var myFeatureGroup = L.featureGroup().addTo(map).on("click", groupClick);
var marker, test;
for (var i = 0; i < 20; i += 1) {
test = "test " + i;
marker = L.marker(getRandomLatLng()).addTo(myFeatureGroup).bindPopup("Marker " + test);
marker.test = test;
}
function groupClick(event) {
console.log("Clicked on marker " + event.layer.test);
}
function getRandomLatLng() {
return [
48.86 + 0.1 * Math.random() - 0.05,
2.35 + 0.1 * Math.random() - 0.05
];
}