Skip to content

Instantly share code, notes, and snippets.

@ustroetz

ustroetz/hump_day_hurra.html

Last active November 17, 2015 20:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ustroetz/e38b95423b31910a894a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ustroetz/e38b95423b31910a894a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hump_day_hurra.html
<!DOCTYPE html><html><head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<style type='text/css'>
body {
font-family:'Helvetica';
background-size:100%;
margin:0;
padding:0;
font-weight:bold;
}
.slide {
cursor:pointer;
cursor:hand;
position:absolute;
top:0px;
left:0px;
padding:75px;
line-height:20px;
}
:focus {
outline: 0;
}
.leaflet-popup-content img {
max-width:100%;
}
#map { position:absolute; top:0; bottom:0; width:100%; }
</style><script type='text/javascript'>
window.onload = function() {
L.mapbox.accessToken = 'pk.eyJ1IjoiYWxscnlkZXIiLCJhIjoidWs5cUFfRSJ9.t8kxvO3nIhCaAl07-4lkNw';
var s = document.getElementsByTagName('div'), ti, i;
for (i = 0; i < s.length; i++) s[i].setAttribute('tabindex', 0);
if (!s) return;
var big = { current: 0, forward: fwd, reverse: rev, go: go, length: s.length };
window.big = big;
function go(n) {
big.current = n;
var e = s[n], t = parseInt(e.getAttribute('data-timeToNext') || 0, 10),
notes = e.getElementsByTagName('notes');
document.body.className = e.getAttribute('data-bodyclass') || '';
for (i = 0; i < s.length; i++) s[i].style.display = 'none';
e.style.display = 'inline';
e.focus();
for (i = 0; typeof console === 'object' && i < notes.length; i++) console.log('%c%s: %s', 'padding:5px;font-family:serif;font-size:18px;line-height:150%;', n, notes[i].innerHTML.trim());
if (e.firstChild && e.firstChild.nodeName === 'IMG') {
document.body.style.backgroundImage = 'url("' + e.firstChild.src + '")';
e.firstChild.style.display = 'none';
if ('classList' in e) e.classList.add('imageText');
} else {
document.body.style.backgroundImage = '';
document.body.style.backgroundColor = e.style.backgroundColor;
}
if (ti !== undefined) window.clearInterval(ti);
if (t > 0) ti = window.setTimeout(fwd, t * 1000);
if (window.location.hash !== n) window.location.hash = n;
document.title = e.textContent || e.innerText;
}
function fwd() { go(Math.min(s.length - 1, ++big.current)); }
function rev() { go(Math.max(0, --big.current)); }
document.onkeydown = function(e) {
if (e.which === 39 || e.which === 34 || e.which === 40) fwd();
if (e.which === 37 || e.which === 33 || e.which === 38) rev();
};
function parse_hash() {
return Math.max(Math.min(s.length - 1,
parseInt(window.location.hash.substring(1), 10)), 0);
}
if (window.location.hash) big.current = parse_hash() || big.current;
window.onhashchange = function() {
i = parse_hash();
if (i == 4) {
var map = L.mapbox.map('map', 'mapbox.streets', {
zoomControl: false})
.setView([52.502844,13.411050], 18);
var myLayer = L.mapbox.featureLayer().addTo(map);
var geoJson = [{
type: 'Feature',
"geometry": { "type": "Point", "coordinates": [13.410921692848206,
52.50281173955742]},
"properties": {
"image": "https://somethingcurious.files.wordpress.com/2011/06/kran_kl.jpg",
"marker-color": "#ff8888",
"city": "Prinzesinnengarten",
"url": "http://prinzessinnengarten.net"
}
}, {
type: 'Feature',
"geometry": { "type": "Point", "coordinates": [13.405224680900574,
52.49772715245374]},
"properties": {
"image": "https://olekrueger.files.wordpress.com/2012/04/prinzenbad_sportbecken_15grad.jpg",
"marker-color": "#ff8888",
"city": "Prinzenbad",
"url": "http://www.berlinerbaeder.de/baeder/sommerbad-kreuzberg/"
}
}];
myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
var popupContent = '<a target="_blank" class="popup" href="' + feature.properties.url + '">' +
'<img src="' + feature.properties.image + '" />' +
feature.properties.city +
'</a>';
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 320
});
});
myLayer.setGeoJSON(geoJson);
}
if (i !== big.current) go(i);
};
go(big.current);
};
</script></head><body>
<div class='slide'>blue</div>
<div class='slide'>old</div>
<div class='slide'>you</div>
<div class='slide'>berlin</div>
<div id='map'></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment