Created
July 1, 2014 14:01
-
-
Save tristen/6ad0cfe8c0913c85a008 to your computer and use it in GitHub Desktop.
Toggle geojson layers with checkboxes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Filter by feature layer</title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> | |
<body> | |
<style> | |
.filter-ui { | |
background:#fff; | |
position:absolute; | |
top:10px; | |
right:10px; | |
z-index:100; | |
padding:10px; | |
border-radius:3px; | |
} | |
</style> | |
<nav id='filters' class='filter-ui'> | |
</nav> | |
<div id='map'></div> | |
<script> | |
var map = L.mapbox.map('map', 'examples.h186knp8') | |
.setView([32.5, 41.1], 2); | |
var filters = document.getElementById('filters'); | |
var layerOne = L.mapbox.featureLayer() | |
.loadURL('brazil.geojson') | |
.on('ready', layer); | |
var layerTwo = L.mapbox.featureLayer() | |
.loadURL('russia.geojson') | |
.on('ready', layer); | |
function layer() { | |
var layer = this; | |
var name = layer.getGeoJSON().name; | |
var item = filters.appendChild(document.createElement('div')); | |
var checkbox = item.appendChild(document.createElement('input')); | |
var label = item.appendChild(document.createElement('label')); | |
checkbox.type = 'checkbox'; | |
checkbox.id = name; | |
label.innerHTML = name; | |
label.setAttribute('for', name); | |
checkbox.addEventListener('change', update); | |
function update() { | |
(checkbox.checked) ? layer.addTo(map) : map.removeLayer(layer); | |
} | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"type": "FeatureCollection", | |
"name": "Russia", | |
"features": [ | |
{ | |
"geometry": { | |
"coordinates": [ | |
[ | |
[ | |
31.640625, | |
70.020587301741 | |
], | |
[ | |
28.4765625, | |
69.037141712752 | |
], | |
[ | |
30.9375, | |
62.754725927232 | |
], | |
[ | |
26.015625, | |
59.175928249271 | |
], | |
[ | |
27.7734375, | |
56.559482483762 | |
], | |
[ | |
33.046875, | |
52.052490476001 | |
], | |
[ | |
39.7265625, | |
49.610709938074 | |
], | |
[ | |
37.96875, | |
46.073230625408 | |
], | |
[ | |
42.1875, | |
43.834526782237 | |
], | |
[ | |
48.515625, | |
41.508577297439 | |
], | |
[ | |
47.4609375, | |
45.828799251921 | |
], | |
[ | |
48.69140625, | |
46.19504210866 | |
], | |
[ | |
45.87890625, | |
48.574789910929 | |
], | |
[ | |
47.109375, | |
50.736455137011 | |
], | |
[ | |
48.8671875, | |
50.064191736659 | |
], | |
[ | |
50.9765625, | |
51.835777520452 | |
], | |
[ | |
54.4921875, | |
51.069016659604 | |
], | |
[ | |
59.0625, | |
50.95842672336 | |
], | |
[ | |
60.732421875, | |
50.680797145322 | |
], | |
[ | |
61.34765625, | |
51.289405902717 | |
], | |
[ | |
60.9521484375, | |
53.878440403329 | |
], | |
[ | |
69.6533203125, | |
55.553495458454 | |
], | |
[ | |
73.564453125, | |
53.461890432859 | |
], | |
[ | |
76.4208984375, | |
54.367758524068 | |
], | |
[ | |
79.98046875, | |
50.903032831113 | |
], | |
[ | |
87.5390625, | |
49.15296965617 | |
], | |
[ | |
92.109375, | |
50.847572953654 | |
], | |
[ | |
94.21875, | |
51.069016659604 | |
], | |
[ | |
94.74609375, | |
49.610709938074 | |
], | |
[ | |
97.734375, | |
50.289339253292 | |
], | |
[ | |
98.96484375, | |
52.052490476001 | |
], | |
[ | |
102.12890625, | |
51.289405902717 | |
], | |
[ | |
102.65625, | |
50.51342652634 | |
], | |
[ | |
105.64453125, | |
50.625073063414 | |
], | |
[ | |
109.16015625, | |
49.49667452747 | |
], | |
[ | |
114.609375, | |
50.176898122001 | |
], | |
[ | |
117.421875, | |
49.837982453085 | |
], | |
[ | |
120.41015625, | |
51.835777520452 | |
], | |
[ | |
120.41015625, | |
52.80276141542 | |
], | |
[ | |
123.92578125, | |
53.435719206694 | |
], | |
[ | |
127.96875, | |
49.837982453085 | |
], | |
[ | |
131.484375, | |
47.75409797968 | |
], | |
[ | |
134.296875, | |
48.574789910929 | |
], | |
[ | |
132.5390625, | |
45.089035564831 | |
], | |
[ | |
131.1328125, | |
44.809121700077 | |
], | |
[ | |
131.220703125, | |
43.484812128916 | |
], | |
[ | |
130.3857421875, | |
42.682435398386 | |
], | |
[ | |
130.5615234375, | |
42.455887641972 | |
], | |
[ | |
132.1875, | |
43.357138222111 | |
], | |
[ | |
132.9345703125, | |
42.779275360242 | |
], | |
[ | |
135.52734375, | |
43.834526782237 | |
], | |
[ | |
140.09765625, | |
48.719961222646 | |
], | |
[ | |
140.625, | |
51.289405902717 | |
], | |
[ | |
141.3720703125, | |
52.160454557747 | |
], | |
[ | |
142.2509765625, | |
51.041393898126 | |
], | |
[ | |
141.8115234375, | |
48.66194284607 | |
], | |
[ | |
142.20703125, | |
47.93106634751 | |
], | |
[ | |
141.8994140625, | |
46.739860599693 | |
], | |
[ | |
142.119140625, | |
45.981695185122 | |
], | |
[ | |
142.6025390625, | |
46.709735944072 | |
], | |
[ | |
143.2177734375, | |
46.498392258598 | |
], | |
[ | |
143.61328125, | |
45.890008158662 | |
], | |
[ | |
143.525390625, | |
46.800059446787 | |
], | |
[ | |
142.55859375, | |
47.813154517528 | |
], | |
[ | |
143.3056640625, | |
49.32512199104 | |
], | |
[ | |
144.6240234375, | |
48.632908585895 | |
], | |
[ | |
143.0859375, | |
52.160454557747 | |
], | |
[ | |
143.41552734375, | |
52.935396658623 | |
], | |
[ | |
143.02001953125, | |
54.110942942724 | |
], | |
[ | |
142.6025390625, | |
54.521081495444 | |
], | |
[ | |
142.03125, | |
53.461890432859 | |
], | |
[ | |
140.9765625, | |
53.435719206694 | |
], | |
[ | |
139.7900390625, | |
54.342148864483 | |
], | |
[ | |
138.69140625, | |
54.444491763358 | |
], | |
[ | |
137.373046875, | |
54.213861000645 | |
], | |
[ | |
135.2197265625, | |
54.977613670696 | |
], | |
[ | |
143.1298828125, | |
59.400365140793 | |
], | |
[ | |
148.7109375, | |
59.265880628258 | |
], | |
[ | |
149.3701171875, | |
59.77852198503 | |
], | |
[ | |
154.951171875, | |
59.265880628258 | |
], | |
[ | |
158.5546875, | |
62.021528191008 | |
], | |
[ | |
160.48828125, | |
60.716197793577 | |
], | |
[ | |
164.35546875, | |
62.79493487887 | |
], | |
[ | |
155.56640625, | |
56.170022982932 | |
], | |
[ | |
156.357421875, | |
50.625073063414 | |
], | |
[ | |
160.400390625, | |
53.435719206694 | |
], | |
[ | |
163.564453125, | |
56.656226493502 | |
], | |
[ | |
162.24609375, | |
58.447732803891 | |
], | |
[ | |
164.00390625, | |
59.888936896766 | |
], | |
[ | |
170.15625, | |
59.756395049356 | |
], | |
[ | |
177.5390625, | |
62.714462101498 | |
], | |
[ | |
179.82421875, | |
62.186013857194 | |
], | |
[ | |
178.76953125, | |
64.244594767982 | |
], | |
[ | |
176.923828125, | |
64.736641395577 | |
], | |
[ | |
179.033203125, | |
64.5861848034 | |
], | |
[ | |
180.791015625, | |
65.440001659655 | |
], | |
[ | |
181.40625, | |
66.583217257282 | |
], | |
[ | |
181.845703125, | |
65.440001659655 | |
], | |
[ | |
183.69140625, | |
65.512962553295 | |
], | |
[ | |
184.04296875, | |
64.848937263579 | |
], | |
[ | |
186.767578125, | |
64.129783676426 | |
], | |
[ | |
190.283203125, | |
66.302205475998 | |
], | |
[ | |
180.87890625, | |
71.938157658117 | |
], | |
[ | |
175.078125, | |
70.020587301741 | |
], | |
[ | |
170.15625, | |
70.140364272072 | |
], | |
[ | |
150.29296875, | |
72.1009436001 | |
], | |
[ | |
150.8203125, | |
75.297735468757 | |
], | |
[ | |
138.515625, | |
76.372619482207 | |
], | |
[ | |
134.82421875, | |
75.823659506243 | |
], | |
[ | |
128.671875, | |
73.428423641068 | |
], | |
[ | |
112.939453125, | |
74.890815606912 | |
], | |
[ | |
113.466796875, | |
76.639225609659 | |
], | |
[ | |
94.921875, | |
81.569968203233 | |
], | |
[ | |
90.3515625, | |
80.118563878838 | |
], | |
[ | |
101.25, | |
77.389504005397 | |
], | |
[ | |
74.53125, | |
72.919635465815 | |
], | |
[ | |
68.90625, | |
74.019543311502 | |
], | |
[ | |
63.984375, | |
70.612614238019 | |
], | |
[ | |
57.65625, | |
70.844672634253 | |
], | |
[ | |
55.5908203125, | |
72.275693499196 | |
], | |
[ | |
58.0078125, | |
74.019543311502 | |
], | |
[ | |
61.787109375, | |
75.342281944273 | |
], | |
[ | |
68.466796875, | |
76.310357543017 | |
], | |
[ | |
69.169921875, | |
76.86081041606 | |
], | |
[ | |
67.763671875, | |
77.029558675031 | |
], | |
[ | |
58.0078125, | |
75.84516854027 | |
], | |
[ | |
54.4921875, | |
74.116046839489 | |
], | |
[ | |
51.328125, | |
72.395705706533 | |
], | |
[ | |
51.064453125, | |
71.608282522103 | |
], | |
[ | |
52.734375, | |
70.495573540931 | |
], | |
[ | |
56.953125, | |
69.037141712752 | |
], | |
[ | |
48.8671875, | |
69.411242356973 | |
], | |
[ | |
40.78125, | |
68.00757101804 | |
], | |
[ | |
31.640625, | |
70.020587301741 | |
] | |
] | |
], | |
"type": "Polygon" | |
}, | |
"properties": { | |
"fill": "#ef3a42", | |
"fill-opacity": 0.5, | |
"stroke": "#ef3a42", | |
"stroke-opacity": 1, | |
"stroke-width": 3, | |
"title": "2018 FIFA World Cup Russia" | |
}, | |
"type": "Feature" | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment