Skip to content

Instantly share code, notes, and snippets.

@hotzeplotz

hotzeplotz/index.html

Last active August 29, 2015 14:09
Show Gist options
  • Save hotzeplotz/9b8584869ec062bb1e93 to your computer and use it in GitHub Desktop.
Save hotzeplotz/9b8584869ec062bb1e93 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Governance structures - London</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
<style>
#map {
position: absolute;
top:0;
bottom:0;
width:100%;
}
</style>
</head>
<body>
<!-- This example requires d3 for AJAX and the brush,
though you can bring your own library. -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js' charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map' class='dark'></div>
<script>
L.CRS.ImageZoom = L.extend({}, L.CRS.Simple, {
scale: function (zoom) {
return Math.pow(1.5, zoom);
}
});
var map = L.map('map', {
maxZoom: 24,
minZoom: 1,
crs: L.CRS.ImageZoom
}).setView([0, 0], 1);
map.setMaxBounds(new L.LatLngBounds([0,500], [500,0]));
var imageUrl = 'http://i.imgur.com/FrrBoCE.png'
var imageBounds = [[250,0], [0,250]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment