JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<script type="text/javascript" >
            L_PREFER_CANVAS = true; 
    </script>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
 <!--[if lte IE 8]>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
 <![endif]-->
 <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
    
        <link rel="stylesheet" href="http://danzel.github.com/Leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="http://danzel.github.com/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
    <script src="http://danzel.github.com/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
</head>
<body>
    <div id="divmap" style="display: none">
        <div id="map">
        </div>
    </div>
<input type="button" id="showmap" value="show map">

CSS

html, body

        {

            height: 100%;

            margin: 0;

            width: 100%;

        }
        
        #map
        { height:500px; }

JavaScript

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
            cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
            cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
            latlng = new L.LatLng(50.5, 30.51);

        var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});

        var markers = new L.MarkerClusterGroup({ animateAddingMarkers : true });
        var markersList = [];

        function populate() {
            for (var i = 0; i < 100; i++) {
                var m = new L.Marker(getRandomLatLng(map));
                markersList.push(m);
                markers.addLayer(m);
                m.on('click', function(e)
            {
                alert(this);
            },i);
            }
            return false;
        }
        function getRandomLatLng(map) {
            var bounds = map.getBounds(),
                southWest = bounds.getSouthWest(),
                northEast = bounds.getNorthEast(),
                lngSpan = northEast.lng - southWest.lng,
                latSpan = northEast.lat - southWest.lat;

            return new L.LatLng(
                    southWest.lat + latSpan * Math.random(),
                    southWest.lng + lngSpan * Math.random());
        }

        populate();
        map.addLayer(markers);

        for (var i = 0; i < 100; i++) {
            markers.addLayer(markersList[i]);
        }

$(document).ready(function(){
    $('#showmap').click(function(){
            $('#divmap').show();               
    });
});