forked from glenrobertson/leaflet-tilelayer-geojson
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
146 lines (127 loc) · 4.45 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<title>Leaflet vector tile layer example</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="bower_components/leaflet/leaflet.css" />
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css" />
<script src="bower_components/leaflet/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
<script src="lib/communist.min.js"></script>
<script src="TileCache.js"></script>
<script src="TileQueue.js"></script>
<script src="AbstractWorker.js"></script>
<script src="CommunistWorker.js"></script>
<script src="Request.js"></script>
<script src="TileRequest.js"></script>
<script src="TileLayer.GeoJSON.js"></script>
<script src="TileLayer.Vector.Unclipped.js"></script>
<script src="TileLayer.Div.js"></script>
<script src="TileLayer.Progress.js"></script>
<script src="TileLayer.Debug.js"></script>
<script src="TileLayer.Overzoom.js"></script>
<script src="Leaflet.label-patch.js"></script>
<style type="text/css">
html, body, #map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
+ 'Imagery © <a href="http://cloudmade.com">CloudMade</a>';
var background = L.tileLayer(cloudmadeUrl, { attribution: cloudmadeAttribution });
// default style of feature
var style = {
"color": "#1B1",
"fillColor": "#1B1",
"weight": 0.7,
"opacity": 0.3,
"fillOpacity": 0.1
};
// style of feature when hovered
var highlightStyle = {
"color": "#000",
"weight": 1.5,
"fillOpacity": 0.4
};
function highlightFeature(e) {
var layer = e.target;
layer.setStyle(highlightStyle);
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
function resetHighlight(e) {
var layer = e.target;
layer.setStyle(style);
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight
});
if (feature.properties) {
// TODO disabled due to error with Leaflet master (0.8-dev)
//layer.bindLabel(feature.properties.name);
layer.bindPopup(feature.id + '<br>' + feature.properties.name);
}
}
// filters out invalid (empty) geometries in Polymaps county dataset
// to avoid exceptions in L.GeoJSON
function filterInvalidGeometry(feature) {
var geometry = feature.type === 'Feature' ? feature.geometry : feature;
return geometry.type !== undefined;
};
var vectorOptions = {
style: style,
onEachFeature: onEachFeature,
filter: filterInvalidGeometry
};
var url = 'http://polymaps.appspot.com/county/{z}/{x}/{y}.json';
var options = {
// remove tiles outside viewport
unloadInvisibleTiles: true,
// no tile loading while panning (slow with large vector tiles)
updateWhenIdle: true,
serverZooms: [3,4,5,6,7],
//serverZooms: [3,5,7],
//maxNativeZoom: 7,
minZoom: 2
};
var vector = new L.TileLayer.Vector(url, options, vectorOptions);
// unloadInvisibleTiles and updateWhenIdle with default values
// (false for non-mobile) for comparison
var unclippedOptions = {
unique: function(feature) {
return feature.id;
}
};
var unclipped = new L.TileLayer.Vector.Unclipped(url, unclippedOptions, vectorOptions);
var progress = new L.TileLayer.Progress(vector);
var debug = new L.TileLayer.Debug(vector);
var map = L.map('map', {
center: new L.LatLng(38.617, -100.261),
zoom: 5,
layers: [background, vector, progress]
});
var overlayMaps = {
'Vector': vector,
'Vector.Unclipped': unclipped
};
// add as base to switch with radio instead of checkbox
L.control.layers(overlayMaps, {
'Progress (Vector)': progress,
'Debug (Vector)': debug
}, {
collapsed: false
}).addTo(map);
</script>
</body>
</html>