JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css">
<b>A Map using Leaflet.js</b>
<div id="mymap" style="width:450px;height:430px;"></div>

CSS

html, body{ width:100%; height: 100%, margin:0; padding:0; }
#mymap{ width:100%; height:100%; }

JavaScript

// create a map
map = new L.Map('mymap');

// create the OpenStreetMap layer
osmTile = "http://tile.openstreetmap.org/{z}/{x}/{y}.png";
osmCopyright = "Map data &copy; 2012 OpenStreetMap contributors";
osmLayer = new L.TileLayer(osmTile, { maxZoom: 18, attribution: osmCopyright } );
map.addLayer(osmLayer);

// set the map's starting view
map.setView( new L.LatLng(22,79), 5 );

// create a special icon
baseIcon = L.icon( {
    iconUrl: "http://i.imgur.com/OlCXE.jpg",
    iconSize: new L.Point(30, 36),
    shadowSize: new L.Point(42, 30),
    iconAnchor: new L.Point(15, 18),
    popupAnchor: new L.Point(0, -12)
} );

// create and add a marker with a special icon
lat = 27.173768;
lng = 78.042068;
latlng = new L.LatLng( lat, lng );
marker = new L.Marker( latlng, { icon: baseIcon } );
map.addLayer(marker);

// make the marker clickable
marker.bindPopup( "Taj Mahal" );
marker.on('mouseover', function(e){
    marker.openPopup();
});

map.on( "zoomend", function( e ) {
    zoom = map.getZoom( );
    if ( zoom <= 3 ) {
        map.removeLayer( marker );
    }
});