darrenjaworski/index.html

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
  <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

  <style>

  body {
    margin: 0;
  }
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

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

<script>
var map = L.map('map', {
  minZoom: 2,
  maxZoom: 5,
  center: [0, 0],
  zoom: 3,
  crs: L.CRS.Simple
});

var w = 1000,
    h = 1000,
    background = 'http://darrenjaworski.com/images/background.jpg';

var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);

L.imageOverlay(background, bounds).addTo(map);

map.setMaxBounds(bounds);

var closures = 'http://darrenjaworski.com/images/closures.png';
var phase1 = 'http://darrenjaworski.com/images/phase1.png';
var phase2 = 'http://darrenjaworski.com/images/phase2.png';
var labels = 'http://darrenjaworski.com/images/labels.png';

var closuresLayer = L.imageOverlay(closures, bounds).addTo(map);
var phase1Layer = L.imageOverlay(phase1, bounds).addTo(map);
var phase2Layer = L.imageOverlay(phase2, bounds).addTo(map);
var labelLayer = L.imageOverlay(labels, bounds).addTo(map);

var layers = {
  "Closures": closuresLayer,
  "Phase 1": phase1Layer,
  "Phase 2": phase2Layer,
  "Labels": labelLayer
};

var baseMaps = {};

L.control.layers(baseMaps, layers).addTo(map);

</script>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

	<style>

	body {
	margin: 0;
	}
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

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

	<script>
	var map = L.map('map', {
	minZoom: 2,
	maxZoom: 5,
	center: [0, 0],
	zoom: 3,
	crs: L.CRS.Simple
	});

	var w = 1000,
	h = 1000,
	background = 'http://darrenjaworski.com/images/background.jpg';

	var southWest = map.unproject([0, h], map.getMaxZoom()-1);
	var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
	var bounds = new L.LatLngBounds(southWest, northEast);

	L.imageOverlay(background, bounds).addTo(map);

	map.setMaxBounds(bounds);

	var closures = 'http://darrenjaworski.com/images/closures.png';
	var phase1 = 'http://darrenjaworski.com/images/phase1.png';
	var phase2 = 'http://darrenjaworski.com/images/phase2.png';
	var labels = 'http://darrenjaworski.com/images/labels.png';

	var closuresLayer = L.imageOverlay(closures, bounds).addTo(map);
	var phase1Layer = L.imageOverlay(phase1, bounds).addTo(map);
	var phase2Layer = L.imageOverlay(phase2, bounds).addTo(map);
	var labelLayer = L.imageOverlay(labels, bounds).addTo(map);

	var layers = {
	"Closures": closuresLayer,
	"Phase 1": phase1Layer,
	"Phase 2": phase2Layer,
	"Labels": labelLayer
	};

	var baseMaps = {};

	L.control.layers(baseMaps, layers).addTo(map);

	</script>