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 class="canvas-container-holder">
  <div class="canvas-container">
    <div id="canvas"></div>
  </div>
</div>

CSS

.canvas-container-holder {
    width: 600px;
}

.canvas-container {
  position: relative;
  padding-top: 100%;
  outline: 5px dotted red;
}

#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.8, 3.45], [50.72, 7.3]];
var coords = [[53.699799, 3.29245], [50.555119999, 7.2232999]];

if (!false) {
  yoff = -0.05;
  xoff = 0;
  grow = 1.001;

  coords[0][0] *= grow;
  coords[1][0] *= grow;

  coords[0][1] *= grow;
  coords[1][1] *= grow;

  coords[0][0] = coords[0][0] + yoff;
  coords[1][0] = coords[1][0] + yoff;

  coords[0][1] = coords[0][1] + xoff;
  coords[1][1] = coords[1][1] + xoff;
}



console.log(coords);


// 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], 7)
;

// map.setMaxBounds(coords);

// var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/4/4a/Blank_map_of_the_Netherlands.svg';
var imageUrl = 'http://site.coa.vdmi/sites/www.coa.nl/themes/coa_bs/images/map-netherlands.svg';

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

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

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