a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sketch switching data layers

Browse Source
This commit is contained in:
Tom Russell 2018-08-03 11:04:53 +01:00
parent 473ab1fb0e
commit 2d06bfe779
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/main.js
View File

@ -43,12 +43,39 @@ function map(){
}).addTo(map);
// Rendered layer
var outline_layer = L.tileLayer('/tiles/date_year/{z}/{x}/{y}.png', {
var data_layers = {}
data_layers.size_storeys = L.tileLayer('/tiles/size_storeys/{z}/{x}/{y}.png', {
maxZoom: 20,
minZoom: 14
})
outline_layer.setZIndex(10);
outline_layer.addTo(map);
data_layers.size_storeys.setZIndex(10);
data_layers.date_year = L.tileLayer('/tiles/date_year/{z}/{x}/{y}.png', {
maxZoom: 20,
minZoom: 14
})
data_layers.date_year.setZIndex(10);
data_layers.date_year.addTo(map);
var active_data_layer = "date_year"
var year_el = document.querySelector('li[data-map="date_year"]')
year_el.addEventListener("click", function(e){
if (active_data_layer !== "date_year"){
map.removeLayer(data_layers.size_storeys)
data_layers.date_year.addTo(map)
active_data_layer = "date_year"
}
})
var storey_el = document.querySelector('li[data-map="size_storeys"]')
storey_el.addEventListener("click", function(e){
if (active_data_layer !== "size_storeys"){
map.removeLayer(data_layers.date_year)
data_layers.size_storeys.addTo(map)
active_data_layer = "size_storeys"
}
})
var highlight_layer = L.tileLayer('/tiles/highlight/{z}/{x}/{y}.png', {
maxZoom: 20,
@ -79,7 +106,7 @@ function map(){
if (data.error){
preview_el.textContent = 'Click a building to see data';
} else {
preview_el.textContent = JSON.stringify(data, ["id", "date_year", "date_source", "uprns"], 2);
preview_el.textContent = JSON.stringify(data, ["id", "date_year", "date_source", "size_storeys", "uprns"], 2);
}
})
})

3
frontend/maps.html
View File

@ -59,7 +59,8 @@
<div id="legend">
<h2>View Maps</h2>
<ul class="maps-list">
<li>Year Built</li>
<li data-map="date_year">Year Built</li>
<li data-map="size_storeys">Number of storeys</li>
</ul>
<h3>Building</h3>
<pre id="building-detail">