-
Notifications
You must be signed in to change notification settings - Fork 6
/
map_london.html
80 lines (70 loc) · 3.2 KB
/
map_london.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>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.ie.css' rel='stylesheet' >
<![endif]-->
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<!--
<script type="text/javascript" src="geojson/london_quadrat_1000m_4326.geojson"></script>
<script type="text/javascript" src="geojson/london_blankspots_1000m_4326.geojson"></script>
<script type="text/javascript" src="geojson/london_quadrat_500m_4326.geojson"></script>
<script type="text/javascript" src="geojson/london_blankspots_500m_4326.geojson"></script>
<script type="text/javascript" src="geojson/london_quadrat_250m_4326.geojson"></script>
<script type="text/javascript" src="geojson/london_blankspots_250m_4326.geojson"></script>
-->
<script type='text/javascript'>
// Based on the Leaflet example from http://leafletjs.com/examples/choropleth.html
var map = L.mapbox.map('map', 'mappingmashups.mapgardening,mappingmashups.mapgardening_london_quadrat_1000m,mappingmashups.mapgardening_london_blankspots').setView([51.5, -0.11], 11);
// var map = L.mapbox.map('map', 'mappingmashups.mapgardening').setView([51.5, -0.1071], 10);
//var blankspotsTileLayer = L.mapbox.tileLayer('mappingmashups.mapgardening_london_blankspots');
//var blankspotsGridLayer = L.mapbox.gridLayer('mappingmashups.mapgardening_london_blankspots');
//map.addLayer(blankspotsTileLayer);
//map.addLayer(blankspotsGridLayer);
var gridStyle = {
weight: 1,
opacity: 0.5,
color: 'yellow',
fillOpacity: 0,
clickable: false
}
var markerOptions = {
radius: 3,
fillColor: 'yellow',
color: 'black',
weight: 0.5,
opacity: 0.8,
fillOpacity: 0.8
};
function pointToLayer(feature, latlng) {
return L.circleMarker(latlng, markerOptions);
}
// london_quadrat_1000m comes from the geojson script included above
//var quadratLayer1000m = L.geoJson(london_quadrat_1000m, { style: gridStyle });
//var quadratLayer500m = L.geoJson(london_quadrat_500m, { style: gridStyle });
//var quadratLayer250m = L.geoJson(london_quadrat_250m, { style: gridStyle });
// london_blankspots_1000m comes from the geojson script included above
//var blankspotsLayer1000m = L.geoJson(london_blankspots_1000m, { pointToLayer: pointToLayer });
//var blankspotsLayer500m = L.geoJson(london_blankspots_500m, { pointToLayer: pointToLayer });
//var blankspotsLayer250m = L.geoJson(london_blankspots_250m, { pointToLayer: pointToLayer });
//var overlayMaps = {
//"1000m blankspots": blankspotsTileLayer
//"1000m grid": quadratLayer1000m,
//"1000m blankspots": blankspotsLayer1000m,
//"500m grid": quadratLayer500m,
//"500m blankspots": blankspotsLayer500m,
//"250m grid": quadratLayer250m,
//"250m blankspots": blankspotsLayer250m
//}
//L.control.layers(null, overlayMaps).addTo(map);
</script>
</body>
</html>