-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
80 lines (67 loc) · 2.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.4/mapbox.js'></script>
<script src="http://www.mapbox.com/mapbox.js/assets/leaflet-hash.js"></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.4/mapbox.css' rel='stylesheet' />
<script src="TileLayer.Overzoom.js"></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'>
</div>
<script>
var map = L.mapbox.map('map')
.setView([38.9029, -77.0384], 12);
var hash = new L.Hash(map);
// pull tiles locally that were produced by Mapnik's Cairo rendering backend
//var url_base = './tiles-cairo/'; // served via server.js
// pull tiles locally that were produced by Mapnik's "svg_renderer"
//var url_base = './tiles-mapnik/'; // served via server.js
// pull tiles from s3
var url_base = 'http://springmeyer.s3.amazonaws.com/svg-tiles-cairo/';
//var url_base = 'http://springmeyer.s3.amazonaws.com/svg-tiles-mapnik/';
// normal Leaflet tileLayer
//var tiles = L.tileLayer(url_base+'{z}/{x}/{y}.svgz', {maxZoom: 21});
// Advanced layer from @nrenner to enable overzooming on parent zoom level as per #2
var tiles = L.tileLayer.overzoom(url_base+'{z}/{x}/{y}.svgz',{maxZoom: 21, serverZooms: [12]});
// enable the loadTile override below to experiment with
// the svgz pushed into <svg> instead of <img>
/*
tiles._loadTile = function(tile, tilePoint) {
tile._layer = this;
this._adjustTilePoint(tilePoint);
var r = new XMLHttpRequest();
r.open('GET', this.getTileUrl(tilePoint), true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
var t = tile.style.top,
l = tile.style.left,
e = r.responseXML.documentElement,
s = tile.nextSibling,
p = tile.parentNode;
e.setAttribute('width', this.options.tileSize);
e.setAttribute('height', this.options.tileSize);
e.setAttribute('class', 'leaflet-tile leaflet-tile-loaded');
e.style.top = tile.style.top;
e.style.left = tile.style.left;
p.removeChild(tile);
p.insertBefore(e, s);
}.bind(this);
r.send();
};
*/
tiles.addTo(map);
</script>
</body>
</html>