JSFiddle - React, Tailwind, and code Playground

by Ryan J

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<div id="image-map" ></div>

CSS

html, body{
			margin: 0px;
			padding: 0px;
		}
		#image-map {
			height: 598px;
			margin: 0px;
			padding: 0px;
			border: 1px solid #000;
		}

JavaScript

var mapl = L.map('image-map', {
    crs: L.CRS.Simple,
    attributionControl: false,
    maxBounds: new L.LatLngBounds([0, 0], [541, 691])
});

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';

L.imageOverlay(imageUrl, new L.LatLngBounds([0, 0], [541, 691]), { noWrap: true, maxZoom: 3, minZoom: 0}).addTo(mapl);

mapl.setView(new L.LatLng(541/2, 691/2), 0);

var markerl = L.marker([541/2, 691/2]).addTo(mapl);