Skip to content

Instantly share code, notes, and snippets.

@christmasbeacon

christmasbeacon/index.html

Created December 22, 2017 09:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save christmasbeacon/f2256874461f0c1d264f6bf3a1afe296 to your computer and use it in GitHub Desktop.
Save christmasbeacon/f2256874461f0c1d264f6bf3a1afe296 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Street Artists in Europe</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/geojson.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id='map'></div>
<button id="reset">Reset</button>
<div id='displays'>
<section id='landing' class='active'>
<div id="landing-content">
<div id="title">Street Artists in Europe</div>
<div id="subtitle">
This is an interactive map featuring street artists that
I've encountered during my travels in Europe. You can mouseover their locations
to see a description or click to see their art. There are thirteen
artists pinned across the map -- see if you can find them all!
</div>
</div>
</section>
<section id='1'>
<video loop preload id="display-img" src="img/1-singing.mov" controls>
</section>
<section id='2'>
<img id = "display-img" src = "img/2-action-art.jpg">
</section>
<section id='3'>
<video loop preload id = "display-img" src = "img/3-Bel-Canto.MOV" controls>
</section>
<section id='4'>
<img id = "display-img" src = "img/4-oil-painting.JPG">
</section>
<section id='5'>
<video loop preload id = "display-img" src = "img/5-harp.MOV" controls>
</section>
<section id='6'>
<img id = "display-img" src = "img/6-watercolor.JPG">
</section>
<section id='7'>
<img id = "display-img" src = "img/7-singing-vienna.JPG">
<audio preload id = "display-audio" src = "img/7-audio-vienna.m4a" controls>
</section>
<section id='8'>
<img id = "display-img" src = "img/8-action-art-vienna.JPG">
</section>
<section id='9'>
<video loop preload id = "display-img" src = "img/9-instrument-prague.mov" controls>
</section>
<section id='10'>
<video loop preload id = "display-img" src = "img/10-bubbles-prague.mov" controls>
</section>
<section id='11'>
<video loop preload id = "display-img" src = "img/11-singer-copenhagen.mov" controls>
</section>
<section id='12'>
<img id = "display-img" src = "img/12-band-madrid.jpg">
</section>
<section id='13'>
<video loop preload id = "display-img" src = "img/13-guitar-portugal.mp4" controls>
</section>
</div>
<script>
var activeSection = 'landing';
function setActiveSection(sectionId) {
if (sectionId === activeSection) return;
document.getElementById(sectionId).setAttribute('class', 'active');
document.getElementById(activeSection).setAttribute('class', '');
var oldHasVideo = document.getElementById(activeSection).querySelector("video");
if (oldHasVideo) {
oldHasVideo.pause();
oldHasVideo.currentTime = 0;
oldHasVideo.load();
}
var oldHasAudio = document.getElementById(activeSection).querySelector("audio");
if (oldHasAudio) {
oldHasAudio.pause();
oldHasAudio.currentTime = 0;
oldHasAudio.load();
}
var newHasVideo = document.getElementById(sectionId).querySelector("video");
if (newHasVideo) {
newHasVideo.play();
}
var newHasAudio = document.getElementById(sectionId).querySelector("audio");
if (newHasAudio) {
newHasAudio.play();
}
activeSection = sectionId;
}
mapboxgl.accessToken = 'pk.eyJ1Ijoid2VucWlhbm5ubiIsImEiOiJjajlxMG8wZHMwMDhxMzNxcXVydDB2amxoIn0.hRRVnVeoAvEI0NxBSO8H5w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [2.331, 48.864], // starting position
zoom: 4 // starting zoom
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
document.getElementById('reset').addEventListener('click', function() {
map.flyTo({
center: [2.331, 48.864],
zoom: 4
})
});
map.on('load', function() {
map.loadImage('img/mapbox-icon.png', function (error, image) {
if (error) throw error;
map.addImage('marker', image);
map.addSource('someData', {
type: 'geojson',
data: geojson,
});
map.addLayer({
'id': 'markers',
'type': 'symbol',
'source': 'someData',
'layout': {
'icon-image': 'marker',
'icon-size': 0.25
}
});
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mouseenter', 'markers', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
popup.setLngLat(e.features[0].geometry.coordinates)
.setHTML(
'<h2> Location: ' + e.features[0].properties.where + '</h2>' +
'<h3> Id: ' + e.features[0].properties.id + '</h3>' +
'<h3> Performance Type: ' + e.features[0].properties.type + '</h3>'
)
.addTo(map);
});
map.on('mouseleave', 'markers', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});
map.on('click', 'markers', function (e) {
console.log(e)
setActiveSection(e.features[0].properties.id);
map.flyTo({
center: e.features[0].geometry.coordinates,
zoom:14,
});
});
});
});
</script>
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function() {
ga.q.push(arguments)
};
ga.q = [];
ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment