Skip to content

GitLab

W
web-ausstellung-virtuell.de
Commit b905063a authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files
Options

load external exhibits geojson file

parent 53006643
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 33 deletions
exhibits.json 0 → 100644
View file @ b905063a
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"description": "<strong>Take a long break I, II</strong><p>von Marijke van Warmerdam (2006), ZKM</p>",
"icon": "theatre",
"link": "video/video1.html"
},
"geometry": {
"type": "Point",
"coordinates": [8.40444, 49.01445]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>Großes Stillleben mit Kerzen und Spiegel</strong><p>von Max Beckmann (1930), Orangerie</p>",
"icon": "music",
"link": "video/video2.html"
},
"geometry": {
"type": "Point",
"coordinates": [8.40454, 49.01455]
}
}]
}
js/map.js
View file @ b905063a
......@@ -46,36 +46,12 @@ map.on('load', function() {
}
}
// Add a layer showing the places.
map.addLayer({
"id": "places",
"id": "exhibits",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"description": "<strong>Take a long break I, II</strong><p>von Marijke van Warmerdam (2006), ZKM</p>",
"icon": "theatre"
},
"geometry": {
"type": "Point",
"coordinates": [8.40444, 49.01445]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>Großes Stillleben mit Kerzen und Spiegel</strong><p>von Max Beckmann (1930), Orangerie</p>",
"icon": "music"
},
"geometry": {
"type": "Point",
"coordinates": [8.40454, 49.01455]
}
}]
}
"data": "exhibits.json"
},
"layout": {
"icon-image": "{icon}-15",
......@@ -83,28 +59,29 @@ map.on('load', function() {
}
});
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mouseenter', 'places', function(e) {
// Change the cursor style as a UI indicator.
map.on('mouseenter', 'exhibits', function(e) {
map.getCanvas().style.cursor = 'pointer';
// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(e.features[0].geometry.coordinates)
.setHTML(e.features[0].properties.description)
.addTo(map);
});
map.on('mouseleave', 'places', function() {
map.on('mouseleave', 'exhibits', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});
map.on('click', 'exhibits', function (e) {
var link = e.features[0].properties.link;
$( "content" ).empty();
$( "content" ).load( link );
});
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
......
video/video1.html 0 → 100644
View file @ b905063a
<html>
<body>
<div id="video-container">
<div class="overlay"></div>
<video id="video" width="100%" height="100%" poster="images/video1_poster.png">
<source src="https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4" type="video/mp4">
<p>Error: your browser doesn't support HTML5 video.</p>
</video>
<div id="video-controls">
<div class="controls">
<button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button>
<p id="timeDisplay" class="time"><span id="timeCurrent" class="current">00:00:00</span> / <span id="timeDuration" class="duration">00:00:00</span></p>
<div class="seek-bar-wrapper" id="seek-bar-wrapper">
<input id="seek-bar" type="range" value="0" step="0.001">
</div>
<button type="button" id="mute" class="text mute">100</button>
<input type="range" id="volume-bar" value="100">
<button type="button" class="icon full-screen" id="fullscreen">
<img class="icon-screen" src=images/icon_fullscreen.png>
<!-- <span class="icon-screen" aria-hidden="true"></span> -->
</button>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<p class="prose-big">Bla bla</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
</div>
</content>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment