Skip to content
Snippets Groups Projects
README.md 5.5 KiB
Newer Older
onny's avatar
onny committed
# Ausstellung-Virtuell - Folge & Varianz
onny's avatar
onny committed
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).
onny's avatar
onny committed

[![](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)
onny's avatar
onny committed

onny's avatar
onny committed
## 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
onny's avatar
onny committed

## Prerequisites

onny's avatar
onny committed
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.

onny's avatar
onny committed
## Installation

### Preparing the map data

onny's avatar
onny committed
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
onny's avatar
onny committed
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
onny's avatar
onny committed

onny's avatar
onny committed
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`:
onny's avatar
onny committed
```
onny's avatar
onny committed
extension=pdo_sqlite
extension=sqlite3
onny's avatar
onny committed
```
onny's avatar
onny committed
The webserver configuration file
`/etc/caddy/caddy.conf.d/ausstellung-virtuell.de.conf` for Caddy could look like
this:
onny's avatar
onny committed
```
onny's avatar
onny committed
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
    }
}
onny's avatar
onny committed
```
onny's avatar
onny committed
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)
onny's avatar
onny committed

## Reporting bugs
onny's avatar
onny committed
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).
onny's avatar
onny committed

## Credits
onny's avatar
onny committed
* [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)