OEREB-Viewer

Source code to setup a viewer for the Cadastre of Public-law Restrictions on landownership (DE: ÖREB-Kataster) displaying the JSON-Extract of the PLR-cadastre.

Setup

Configuration

Before building the OEREB-Viewer, copy .env.example into .env and edit the configuration.

Replace local with your directory name under ./config. For example, use bern instead.

# apply configurations from this directory in ./config
NUXT_ENV_CONFIG_CONTEXT=local

# credentials for esri token authentication
NUXT_ENV_TOKEN_USERNAME=user
NUXT_ENV_TOKEN_PASSWORD=password

See Custom Configuration for configuration instructions.

Platform

If you don't use Docker, the Node runtime version 20.19 or newer (22 recommended, see .nvmrc) is required for the build step. Check out Node for more information.

Use with Docker

For simple deployment with Docker, a Dockerfile is provided. During the build, a static build of the app is generated and bundled with an HTTP server.

Build Docker image

Change the directory to where the OEREB-Viewer code is placed and run the build command. This command tags the image with oereb-viewer

docker build -t oereb-viewer .

Run Docker image

The oereb-viewer image exposes the port 3000.

Make sure your final port is linked to the exposed port of the image

# link local port 3000 to exposed port 3000
docker run -it -p 3000:3000 oereb-viewer

Use without Docker

For detailed explanation on how things work, check out the Nuxt docs.

Based on static files

Static files are generated in the ./dist directory. A web server is required to serve the static files.

# install dependencies
npm install

# build to be served statically from ./dist
npm run generate

# serve ./dist locally
npm run start

Build for development and testing purpose

# install dependencies
npm install

# build for development via localhost:3000
npm run dev

# run unit tests / coverage report
npm run test
npm run test:coverage

# lint
npm run lint

Custom Configuration

Configuration are stored under ./config and can be selected by setting NUXT_ENV_CONFIG_CONTEXT in the .env file.

# change the title shown in the browser tab
NUXT_ENV_TITLE="ÖREB-Viewer | Visualiseur RDPPF"

# define wich configuration should be applied
NUXT_ENV_CONFIG_CONTEXT=bern

# if your viewer reqires
NUXT_ENV_TOKEN_USERNAME=user
NUXT_ENV_TOKEN_PASSWORD=password

Custom configurations are merged with the default configurations by merging and overwriting same configurations.

When starting a new custom configuration, consider copying an existing configuration into a new directory, updating .env and updating each configuration carefully.

Place local configurations in ./config/local or ./config/<any-name>-local like ./config/bern-local. They won't be tracked by git, as they are in .gitignore.

setup.js

This is where you place your settings.

setup.css

Create a setup.css file in your config directory, if you want to overwrite theme colors or any css.

/** overwrite theme css variables with your own RGB colors */
:root {
    --color-background-primary: 45, 54, 62;
    --color-text-primary: 255, 255, 255;

    --color-background-secondary: 203, 211, 219;
    --color-text-secondary: 45, 54, 62;

    --color-background-accent: 255, 255, 255;
    --color-text-accent: 203, 0, 14;

    --color-text-decent: 94, 114, 135;

    --color-background-base: 254, 254, 254;
    --color-text-base: 45, 54, 62;

    --color-background-active: 94, 114, 135;
    --color-text-active: 255, 255, 255;

    --color-border-primary: 94, 114, 135;
    --color-border-secondary: 187, 187, 187;

    --color-background-thirdly: 228, 233, 237;
}

/** place your custom css here */

boundary.json

Optional canton boundary limiting coordinate lookups in the search. Coordinates outside the boundary are shown as a disabled search result. Without this file there is no restriction.

Generate it from the official swissBOUNDARIES3D dataset, where the feature id is the official canton number:

node scripts/generate-boundary.mjs <cantonNumber> config/{customdir}/boundary.json

 1 Zürich       8 Glarus            15 Appenzell Ausserrhoden  22 Vaud
 2 Bern         9 Zug               16 Appenzell Innerrhoden   23 Valais
 3 Luzern      10 Fribourg          17 St. Gallen              24 Neuchâtel
 4 Uri         11 Solothurn         18 Graubünden              25 Genève
 5 Schwyz      12 Basel-Stadt       19 Aargau                  26 Jura
 6 Obwalden    13 Basel-Landschaft  20 Thurgau
 7 Nidwalden   14 Schaffhausen      21 Ticino

Reference it in your setup.js:

import boundary from './boundary.json'

export const coordinateBoundary = boundary

The geometry is simplified to 250m (to save bandwidth) and the viewer accepts points up to 1km outside of it, so the boundary is intentionally not an exact border - the ÖREB service remains the authority near the border.

Both distances can be tuned: the acceptance margin is BOUNDARY_GRACE_DISTANCE in helpers/coordinates.ts, the simplification tolerance is TOLERANCE in scripts/generate-boundary.mjs (regenerate the boundary files after changing it). Keep the margin at least as large as the tolerance, otherwise simplification may reject valid border parcels.

locales

Add custom translations as JSON-files, for example ./config/{customdir}/locales/de.json.

Overwrite languages by adding locales to your setup.js

export const locales = [
  { code: 'de', language: 'de-CH', file: 'de.js', title: 'Deutsch' },
  { code: 'fr', language: 'fr-CH', file: 'fr.js', title: 'Français' },
  { code: 'rm', language: 'rm-CH', file: 'rm.js', title: 'Rumantsch' },
  { code: 'en', language: 'en-CH', file: 'en.js', title: 'English' },
]

A JavaScript language file is required, to add merge capabilities with default locales

Built With

• Vue
• Nuxt
• Tailwind
• Open Layers

Maintainer of This Repo

Owner is the Canton of Berne. Admins of the repo are:

• Bernard Kessler (AGI) bernard.kessler@be.ch
• Mario Siegenthaler (BEDAG, linkyard) m@riosiegenthaler.ch
• Bernhard Sturm (Sturm und Bräm) bs@sturmundbraem.ch