# Ausstellung-Virtuell - Folge & Varianz
This repository contains the source code of the university project "Ausstellung-Virtuell - Folge & Varianz". It was developed in the winter and summer semseter 2017-2018 and is still available at [ausstellung-virtuell.de](https://ausstellung-virtuell.de).

[![](https://git.project-insanity.org/onny/web-ausstellung-virtuell.de/raw/master/presse/img/screenshot_werkuebersicht.png)](https://git.project-insanity.org/onny/web-ausstellung-virtuell.de/raw/master/presse/img/screenshot_werkuebersicht.png)

## 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
- [x] Responsive interface, mobile friendly

## Prerequisites

In order to run this web application, you'll need a web server with php support
enabled. Further you'll have to enable `sqlite3` modules in your php instance.
This instruction will not cover the initial setup procedure of your web
webserver (like Apache or Nginx) or the php interpreter and will only deal with
specific configurations regarding this web app.

## Installation

### Preparing the map data

Since the 3D map of our online exhibition will be self-hosted, we need to fetch
and prepare the backend geo-data for the city of Karlsruhe.
We'll use an [OpenMapTiles](https://openmaptiles.org/) script to generate vector
tiles of public available map data provided by the
[OpenStreetMap](https://www.openstreetmap.org/) project.
```
git clone https://github.com/openmaptiles/openmaptiles.git
cd openmaptiles
./quickstart.sh karlsruhe-regbez
cp ./data/docker-compose-config.yml karlsruhe-config.yml
```
We further customize our custom configuration file `karlsruhe-config.yml`, set
the max zoom level to 14 and tighter BBOX boundaries (taken from
[here](https://openmaptiles.com/downloads/europe/germany/karlsruhe/)) to cover
only the core part of the city. This will result in an acceptable loss of map
details but will save some computation time.
```
version: "2"
services:
  generate-vectortiles:
    environment:
      BBOX: "7.893, 48.73, 8.816, 49.246"
      OSM_MAX_TIMESTAMP : "2018-10-27T19:37:25Z"
      OSM_AREA_NAME: "karlsruhe"
      MIN_ZOOM: "0"
      MAX_ZOOM: "14"
```
Further specify the zoom levels in `.env` file:
```
QUICKSTART_MIN_ZOOM=0
QUICKSTART_MAX_ZOOM=14
```
Now start we can start generating the vector tiles:
```
docker-compose up -d postgres
docker-compose -f docker-compose.yml -f ./karlsruhe-config.yml run --rm generate-vectortiles
docker-compose run --rm openmaptiles-tools generate-metadata ./data/tiles.mbtiles
docker-compose run --rm openmaptiles-tools chmod 666 ./data/tiles.mbtiles
cp ./data/tiles.mbtiles ./data/karlsruhe.mbtiles
```
We can test the export by launching the development tile server:
```
make start-tileserver
```

### Configuring the tile server
After checking out or downloading the project source code, you can move the
gernated mbtiles file into the `tileserver` directory. Further adapt the urls
inside the `tileserver/style-positron.json` file reflecting your own domain
name. The json value of the key "tiles" contains a reference to the mbtiles
file, in this case "karlsruhe":
```
[...]
"sources": {
  "openmaptiles": {
    "type": "vector",
    "tiles": ["https://www.ausstellung-virtuell.de/tileserver/tileserver.php?/index.json?/karlsruhe/{z}/{x}/{y}.pbf"],
    "minzoom": 0,
    "maxzoom": 14,
    "attribution": "<a href=\"http://www.openmaptiles.org/\" target=\"_blank\">&copy; OpenMapTiles</a> <a href=\"http://www.openstreetmap.org/about/\" target=\"_blank\">&copy; OpenStreetMap contributors</a>"
  }
},
"sprite": "https://www.ausstellung-virtuell.de/tileserver/sprite",
"glyphs": "https://www.ausstellung-virtuell.de/fonts/{fontstack}/{range}.pbf",
[...]
```
Please note that the min- and maxzoom properties here define the zoom
levels provided by the vector tiles data. It will be still possible to
"overzoom" level 14 in the graphical map interface.

### Configuring php and the web server

The application [tileserver-php](https://github.com/klokantech/tileserver-php)
requires you to enable `sqlite3` php modules. In case of an ArchLinux system,
create the configuration file `/etc/php/conf.d/tileserver-php.ini`:
```
extension=pdo_sqlite
extension=sqlite3
```
The webserver configuration file
`/etc/caddy/caddy.conf.d/ausstellung-virtuell.de.conf` for Caddy could look like
this:
```
http://ausstellung-virtuell.de {
    redir https://www.ausstellung-virtuell.de
}

http://www.ausstellung-virtuell.de {
    gzip

    tls info@example.com {
            max_certs 10
    }

    root /var/www/ausstellung-virtuell.de

    rewrite {
        r ^/(.+)$
        to /{1} /index.php?page={1}
    }

    fastcgi / /var/run/php-fpm/ausstellung-virtuell.de_php-fpm.sock php {
        index index.php
    }
}
```
Here, especially the `rewrite` part is important. It should look quite similar
for `nginx` or `apache` configurations.

## Maintainers
 * [Jonas Heinrich](https://git.project-insanity.org/onny)

## Reporting bugs
Since this project is considered feature-complete and finished, we or I will not
continue to work on this app. Nevertheless feel free to report bugs or feature
requests to our
[bug tracker](git.project-insanity.org/onny/web-ausstellung-virtuell.de).

## Credits
* [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js) is the framework we use
to render or map data
* [OpenStreetMap](https://openstreetmap.org) provides the free and open map data
* [Videre](https://github.com/Hipady/Videre)