JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet-src.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css">

<title>New Planning Scheme - Glenorchy City Council</title>        

<body>
	<div id="map"></div>    
</body>

CSS

body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 90%;
}

JavaScript

var center = new L.LatLng(-42.8232,147.2555);
    var map = new L.Map('map', { center: center, zoom: 14, attributionControl:true, zoomControl:false});    
    
    var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/060c21440a6547efa320caa86db66c50/997/256/{z}/{x}/{y}.png', {
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'});


    map.addLayer(cloudmade);
    var pits = new L.TileLayer.WMS("http://maps.gcc.tas.gov.au:8080/geoserver/ows", {
        layers: 'GCC_cc:Stormwaterpits',
        format: 'image/png',
        transparent: true,
        maxZoom: 20
    });
    
    var pipes = new L.TileLayer.WMS("http://maps.gcc.tas.gov.au:8080/geoserver/ows", {
        layers: 'GCC_cc:Stormwaterpipes',
        format: 'image/png',
        transparent: true,
        maxZoom: 20
    });
    
    map.addLayer(pipes);
    map.addLayer(pits);

    $(document).ready(function() {
        var currentX = $("#viewport").width() / 2;
        var resetPosition = function(x){
            var pos = $(".leaflet-map-pane").position(),
            coordLeft = ( - pos.top ) + "px, " + ( x - pos.left + 3 ) + "px, " + ( $("#viewport").height() - pos.top ) + "px, " + -pos.left + "px",
            coordRight = ( - pos.top ) + "px, " + ( $("#viewport").width() - pos.left ) + "px, " + ( $("#viewport").height() - pos.top ) + "px, " + ( x - pos.left + 3 ) + "px";
            $(".leaflet-layer:nth-child(3)").css("clip", "rect(" + coordLeft + ")");
            $(".leaflet-layer:nth-child(2)").css("clip", "rect(" + coordRight + ")");
        };
        resetPosition(currentX);
        map.on("move", function(){
            resetPosition(currentX);
        });
        map.on("zoomend", function(){
            resetPosition(currentX);
        });
        $("#vbar-divider").draggable({
            drag:...