fix map self hosted

README.md

@@ -3,7 +3,21 @@ Diese Projektseite enthält den Quelltext der Webseite zu dem Projekt "Ausstellu
 
 [![](https://onny.project-insanity.org/files/nextcloud-app-radio-screenshot2.png)](https://onny.project-insanity.org/files/nextcloud-app-radio-screenshot2.png)
 
-## Konfiguration
+## Features
+
+- [x] Explore virtual exhibition in a real 3D map
+- [x] Click on a single exhibit for further details
+- [x] Browse the episode list
+- [x] Play videos in custom HTML video player
+- [x] Completely self-hosted map and video data
+
+## Prerequisites
+
+## Installation
+
+### Preparing the map data
+
+
 
  * **From the appstore:** The most recent and stable version of the app can be found in the [official appstore](https://apps.nextcloud.com/apps/radio).
  * **Using git:** In your `nextcloud/apps/` directory, run `git clone https://git.project-insanity.org/onny/nextcloud-app-radio.git radio`. Then go to the Apps manager tab in your Nextcloud web interface, and enable the Radio app.

js/map.js

@@ -10,10 +10,9 @@ var initialRadius = 8.7;
 var radius = initialRadius;
 var maxRadius = 27;
 
-mapboxgl.accessToken = 'pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g';
 var map = new mapboxgl.Map({
   container: 'map',
-  style: 'mapbox://styles/mapbox/light-v9', //'tileserver/style.json', // mapbox://styles/mapbox/streets-v9
+  style: 'tileserver/style-positron.json',
   center: [8.404, 49.0150],
   zoom: 14,
   pitch: 0,
@@ -29,29 +28,39 @@ map.addControl(new mapboxgl.NavigationControl());
 
 map.on('load', function() {
 
+  // Insert the layer beneath any symbol layer.
+  var layers = map.getStyle().layers;
+
+  var labelLayerId;
+  for (var i = 0; i < layers.length; i++) {
+      if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
+          labelLayerId = layers[i].id;
+          break;
+      }
+  }
+
   map.addLayer({
-    'id': '3d-buildings',
-    'source': 'composite',
-    'source-layer': 'building',
-    'filter': ['==', 'extrude', 'true'],
-    'type': 'fill-extrusion',
-    'minzoom': 13,
-    'paint': {
-        'fill-extrusion-color': '#aaa',
-        // use an 'interpolate' expression to add a smooth transition effect to the
-        // buildings as the user zooms in
-        'fill-extrusion-height': [
-            "interpolate", ["linear"], ["zoom"],
-            15, 0,
-            15.05, ["get", "height"]
-        ],
-        'fill-extrusion-base': [
-            "interpolate", ["linear"], ["zoom"],
-            15, 0,
-            15.05, ["get", "min_height"]
-        ],
-        'fill-extrusion-opacity': 0.6
-    }
+      'id': 'building-3d',
+      'source': 'openmaptiles',
+      'source-layer': 'building',
+      'type': 'fill-extrusion',
+      'paint': {
+          'fill-extrusion-color': '#aaa',
+
+          // use an 'interpolate' expression to add a smooth transition effect to the
+          // buildings as the user zooms in
+          'fill-extrusion-height': [
+              "interpolate", ["linear"], ["zoom"],
+              15, 0,
+              15.05, ["get", "render_height"]
+          ],
+          'fill-extrusion-base': [
+              "interpolate", ["linear"], ["zoom"],
+              15, 0,
+              15.05, ["get", "render_min_height"]
+          ],
+          'fill-extrusion-opacity': 0.6
+      }
   }, labelLayerId);
 
   map.addSource('museum', { type: 'geojson', data: '/geojson/museum.geojson' });
@@ -150,17 +159,6 @@ map.on('load', function() {
     map.setMaxBounds(bounds);
   });
 
-  // Insert the layer beneath any symbol layer.
-  var layers = map.getStyle().layers;
-
-  var labelLayerId;
-  for (var i = 0; i < layers.length; i++) {
-    if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
-        labelLayerId = layers[i].id;
-        break;
-    }
-  }
-
   var popup = new mapboxgl.Popup({
       closeButton: false,
       closeOnClick: false