Intro transition
This commit is contained in:
Tom Russell
parent
fcd54b4d82
commit
17e77d118c
@ -56,7 +56,7 @@
|
||||
</header>
|
||||
<main class="beta">
|
||||
<div id="map"></div>
|
||||
<div id="legend">
|
||||
<div id="legend" class="info-container">
|
||||
<h2 class="h2">Edit building data</h2>
|
||||
<form action="building-view.html" method="GET">
|
||||
<fieldset class="data-section">
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
</header>
|
||||
<main class="beta">
|
||||
<div id="map"></div>
|
||||
<div id="legend">
|
||||
<div id="legend" class="info-container">
|
||||
<h2 class="h2">Building data</h2>
|
||||
<section class="data-section">
|
||||
<h3 class="h3 bullet-prefix location">Location</h3>
|
||||
|
||||
@ -61,10 +61,23 @@
|
||||
<p class="lead">Colour in, view and download data on London's buildings</p>
|
||||
<a href="maps.html" class="btn btn-outline-dark btn-lg btn-block">Get Started</a>
|
||||
</div>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src="main.js"></script>
|
||||
<div id="legend" class="info-container offscreen">
|
||||
<h2 class="h2">Maps</h2>
|
||||
<ul class="maps-list">
|
||||
<li class="bullet-prefix age" data-map="date_year">Year Built</li>
|
||||
<li class="bullet-prefix size" data-map="size_storeys">Number of storeys</li>
|
||||
</ul>
|
||||
<h3 class="h3">Building</h3>
|
||||
<pre id="building-detail">
|
||||
Click a building to see data.
|
||||
</pre>
|
||||
</div>
|
||||
</main>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -54,7 +54,7 @@ main.beta {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
#legend {
|
||||
.info-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@ -65,6 +65,11 @@ main.beta {
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
width: 100%;
|
||||
@ -76,7 +81,7 @@ main.beta {
|
||||
left: 0;
|
||||
}
|
||||
@media (min-width: 380px){
|
||||
#legend {
|
||||
.info-container {
|
||||
bottom: 2rem;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
@ -84,12 +89,15 @@ main.beta {
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
#legend {
|
||||
.info-container {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20rem;
|
||||
bottom: 0;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-20rem);
|
||||
}
|
||||
.leaflet-right{
|
||||
left: 20rem;
|
||||
}
|
||||
@ -105,6 +113,14 @@ main.beta {
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
.welcome-float.offscreen {
|
||||
opacity: 0;
|
||||
}
|
||||
.welcome-float.remove {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
.welcome-float {
|
||||
|
||||
@ -44,38 +44,33 @@ function map(){
|
||||
|
||||
// Rendered layer
|
||||
var data_layers = {}
|
||||
data_layers.size_storeys = L.tileLayer('/tiles/size_storeys/{z}/{x}/{y}.png', {
|
||||
maxZoom: 20,
|
||||
minZoom: 14
|
||||
})
|
||||
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 data_layer_names = ["size_storeys", "date_year"]
|
||||
var active_data_layer = "date_year"
|
||||
var name;
|
||||
for (var index = 0; index < data_layer_names.length; index++) {
|
||||
name = data_layer_names[index];
|
||||
|
||||
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"
|
||||
}
|
||||
})
|
||||
data_layers[name] = L.tileLayer('/tiles/'+name+'/{z}/{x}/{y}.png', {
|
||||
maxZoom: 20,
|
||||
minZoom: 14
|
||||
})
|
||||
data_layers[name].setZIndex(10);
|
||||
|
||||
var el = document.querySelector('li[data-map="'+name+'"]')
|
||||
if (!el){
|
||||
continue;
|
||||
}
|
||||
el.addEventListener("click", function(e){
|
||||
e.preventDefault();
|
||||
var layer = e.target.dataset.map
|
||||
if (active_data_layer !== layer){
|
||||
map.removeLayer(data_layers[active_data_layer])
|
||||
data_layers[layer].addTo(map)
|
||||
active_data_layer = layer
|
||||
}
|
||||
})
|
||||
}
|
||||
data_layers[active_data_layer].addTo(map);
|
||||
|
||||
var highlight_layer = L.tileLayer('/tiles/highlight/{z}/{x}/{y}.png', {
|
||||
maxZoom: 20,
|
||||
@ -118,7 +113,7 @@ function map(){
|
||||
* Based on example code by Christian Heilmann
|
||||
* http://christianheilmann.com/2015/04/08/keeping-it-simple-coding-a-carousel/
|
||||
*/
|
||||
carousel = function(){
|
||||
function carousel(){
|
||||
var box = document.querySelector('.carousel');
|
||||
if (!box) {
|
||||
return
|
||||
@ -157,6 +152,37 @@ carousel = function(){
|
||||
navigate(0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Intro interactions
|
||||
*/
|
||||
function intro(){
|
||||
var welcome = document.querySelector('.welcome-float')
|
||||
var info = document.querySelector('.info-container')
|
||||
var links = document.querySelectorAll('a[href="maps.html"]')
|
||||
if(!welcome || !info || !links){
|
||||
return;
|
||||
}
|
||||
function from_intro_to_maps(e){
|
||||
e.preventDefault()
|
||||
welcome.classList.add('offscreen')
|
||||
window.setTimeout(function(){
|
||||
welcome.classList.add('remove')
|
||||
info.classList.remove('offscreen')
|
||||
window.history.pushState({}, 'Maps', 'maps.html')
|
||||
|
||||
for (let index = 0; index < links.length; index++) {
|
||||
const link = links[index];
|
||||
link.classList.add('active')
|
||||
}
|
||||
}, 400)
|
||||
}
|
||||
for (let index = 0; index < links.length; index++) {
|
||||
const link = links[index];
|
||||
link.addEventListener("click", from_intro_to_maps)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* "Cut the mustard" and setup page
|
||||
*/
|
||||
@ -164,4 +190,5 @@ if('querySelector' in document
|
||||
&& 'addEventListener' in window) {
|
||||
carousel();
|
||||
map();
|
||||
intro();
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
</header>
|
||||
<main class="beta">
|
||||
<div id="map"></div>
|
||||
<div id="legend">
|
||||
<div id="legend" class="info-container">
|
||||
<h2 class="h2">Maps</h2>
|
||||
<ul class="maps-list">
|
||||
<li class="bullet-prefix age" data-map="date_year">Year Built</li>
|
||||
@ -67,10 +67,11 @@
|
||||
Click a building to see data.
|
||||
</pre>
|
||||
</div>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
</main>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src="main.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user