load external exhibits geojson file

b905063a · Jonas Heinrich · 53006643 · b905063a · b905063a · b905063a
Commit b905063a authored Jan 05, 2018 by Jonas Heinrich
Hide whitespace changes
Inline Side-by-side

Showing with 82 additions and 33 deletions

exhibits.json exhibits.json +26 -0

js/map.js js/map.js +10 -33

video/video1.html video/video1.html +46 -0

No files found.
--- a/exhibits.json
+++ b/exhibits.json
+{
+    "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]
+        }
+    }]
+}
--- a/js/map.js
+++ b/js/map.js
@@ -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',

--- a/video/video1.html
+++ b/video/video1.html
+<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>