JSFiddle - React, Tailwind, and code Playground

by Michael Underwood

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.js"></script>
<div id="map"></div>
<div id="overlay">Overlay</div>

CSS

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

#overlay {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:33%;
    background:rgba(255,255,255,0.7)
}

JavaScript

var map = L.map('map',{
    zoom: 13,
    center: [51.505, -0.09],
    zoomControl:false
});

L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
			maxZoom: 18,
			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>'
		}).addTo(map);

// Add a marker to the center of the map
L.marker([51.505, -0.09]).addTo(map).bindPopup("<b>Map Center</b>.").openPopup();


var control = new L.Control.Zoom({ position: 'topright' }).addTo(map);

// Calculate the offset
var offset = map.getSize().x*0.14;
// Then move the map
map.panBy(new L.Point(-offset, 0), {animate: false});