JSFiddle - React, Tailwind, and code Playground

by lmeurs

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<div id="canvas-container">
  <div id="canvas"></div>
</div>

CSS

#canvas-container {
  position: relative;
  padding-top: 70%;
  outline: 5px dotted red;
  width: 50%;
}

#canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

JavaScript

/*

Get lang / lat: http://www.latlong.net/

Max bound issues:
- https://groups.google.com/forum/#!topic/leaflet-js/tkSjMB4dD90
- https://github.com/Leaflet/Leaflet/issues/2011

*/

var coords = [[53.668850, 3.663940], [50.637051, 7.289429]];
// var southWest = new L.LatLng(coords[0][0], coords[0][1]);
// var northEast = new L.LatLng(coords[1][0], coords[1][1]);

// var getBounds = function(){
// 	return new L.LatLngBounds(southWest, northEast);
// };

var map = L
  .map('canvas',{
    zoomControl: !false,
//    bounds: getBounds(),
    maxZoom: 10,
    minZoom: 6
  })
  .setView([(coords[0][0]+coords[1][0])/2, (coords[0][1]+coords[1][1])/2], 6)
;

map.setMaxBounds(coords);

var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/4/4a/Blank_map_of_the_Netherlands.svg';

L.imageOverlay(imageUrl, coords).addTo(map);

// var osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { noWrap: true}).addTo(map);

// map.fitBounds(getBounds(), {reset: true});