JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css">
<div id="map" style="width:500px;height:500px"></div>

CSS

path:hover {
    fill:green;
    stroke:red;
}

JavaScript

var map = L.map('map').setView([50.5, 5.5], 6);

var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/2c67d2f26ba44398ac786bdfd8ddeaa0/{styleId}/256/{z}/{x}/{y}.png', {
    styleId: 22677
}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");
addZone(map, svg, g);

function addZone(map, svg, g) {
    var collection = {
        "type": "FeatureCollection",

            "features": [{
            "type": "Feature",
                "geometry": {
                "type": "Polygon",
                    "coordinates": [
                    [
                        [5, 50],
                        [5, 51],
                        [6, 51],
                        [6, 50],
                        [5, 50]
                    ]
                ]
            }
        }]
    };
    var bounds = d3.geo.bounds(collection),
        path = d3.geo.path().projection(project);

    var feature = g.selectAll("path")
        .data(collection.features)
    .enter().append("path").attr('style','z-index:9999');

    function project(x) {
        var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
        return [point.x, point.y];
    }

    function reset() {
        var bottomLeft = project(bounds[0]),
            topRight = project(bounds[1]);

        svg.attr("width", topRight[0] - bottomLeft[0])
            .attr("height", bottomLeft[1] - topRight[1])
            .style("margin-left", bottomLeft[0] + "px")
            .style("margin-top", topRight[1] + "px");

        g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

        feature.attr("d", path);
    }

    map.on("viewreset", reset);
    reset();
}