Skip to content

GitLab

Commit 214c67f0 authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files

Add exhibition objects as POIs

parent 3556298d
Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 5 deletions
css/main.css
View file @ 214c67f0
......@@ -192,3 +192,9 @@ h1, h2, h3, h4, h5, h6 {
padding-bottom: 2em;
}
}
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
color: black;
}
js/map.js
View file @ 214c67f0
......@@ -46,6 +46,65 @@ map.on('load', function() {
}
}
// Add a layer showing the places.
map.addLayer({
"id": "places",
"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]
}
}]
}
},
"layout": {
"icon-image": "{icon}-15",
"icon-allow-overlap": true
}
});
// 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.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.getCanvas().style.cursor = '';
popup.remove();
});
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
......
overview.html
View file @ 214c67f0
......@@ -14,18 +14,66 @@
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Form und Farbe 1</p>
<p class="video_description small">Form follows function 1</p>
<p class="video_title">Take a long break I, II</p>
<p class="video_description small">von Marijke van Warmerdam (2006), ZKM</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Form und Farbe 1</p>
<p class="video_description small">Form follows function 1</p>
<p class="video_title">Großes Stillleben mit Kerzen und Spiegel</p>
<p class="video_description small">von Max Beckmann (1930), Orangerie</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Ehrung des Quadrats: Gelbes Zentrum</p>
<p class="video_description small">von Josef Albers (1954), Orangerie</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Überfall auf einen Geleitzug</p>
<p class="video_description small">von Sebastian Vrancx (1618), Kunsthalle</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Abendessen in der Scheune & In der Schenke</p>
<p class="video_description small">von David Teniers d. J. (1634, 1648), Kunsthalle</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Die heilige Elisabeth von Thüringen<, Heilige Märtyrerin</p>
<p class="video_description small">von Matthias Grünewald (1511/12), Kunsthalle</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Bubbles</p>
<p class="video_description small">von W. Münch, K. Furukawa (2000), ZKM</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Dynamische Struktur</p>
<p class="video_description small">von Heinz Mack (1959), Orangerie</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Van Gogh als verkannter Hochstapler / im schwarzen Schein</p>
<p class="video_description small">von Arnulf Rainer (1977-79), ZKM</p>
<p class="video_duration small">00:31:00</p>
</div>
</div>
<script src="js/main.js"></script>
</body>
......
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