JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

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: '&copy; <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
  ];
}