api-demo

Karten-Viewer API Demo Using the API Build

This demo project demonstrates the use of the LGB Karten-Viewer API and provides two different implementations:

• API Integration:
  Available in the file index.html

• Standalone Version:
  Available in the file index_standalone.html

Usage

If you want to use the Standalone Version, follow these steps:

1. Rename or Remove the API Version:

   • Rename index.html to index_api.html or delete this file.

2. Rename the Standalone Version:

   • Rename index_standalone.html to index.html.

This will make the Standalone Version available as the main file (index.html).

Quickstart

You only have to download this repo and deploy the files on a webserver (e.g. apache, nginx). A small script based webserver will work as well:

# startet eine lokalen Webserver (Port 8000) im aktuellen Ordner
python -m SimpleHTTPServer 8000

API Setup | Step by Step

Requirements

• Build of the map viewer: Download a prepared one or generate it by yourself (see more: https://git.geobasis-bb.de/open-data/kartenviewer-api/masterportal-fork)
• Viewer Config: Create one or use an example (see more: https://git.geobasis-bb.de/open-data/kartenviewer-api/masterportal-fork/-/tree/demo/portal)

Steps

• In case you created your own build: Copy the build from masterportal-fork/dist/mastercode to the folder with your web site (e.g. <website>/mastercode/<build>)

• In case you downloaded the build: Unzip the build and copy it to the folder with your web site (e.g. <website>/mastercode/<build>)

• Copy the config files from masterportal-fork/portal/<version> or masterportal/dist/<version> to the folder with your web site (e.g. <website>/default)

• Set references from your web page to the viewer build and conf: Stylesheets, e.g.:

    <link rel="stylesheet" href="./mastercode/3_4_0_kartenviewer/css/demo-theme-less.css">
    <link rel="stylesheet" href="./mastercode/3_4_0_kartenviewer/css/masterportal.css">

  JS, e.g.:

    <script type="text/javascript" data-masterportal-config="./default/config.js"></script>
    <script type="text/javascript" src="./mastercode/3_4_0_kartenviewer/js/masterportal.js"></script>

  Set MpConfigPath and MpMastercodePath, e.g.:

    <script type="text/javascript">
      window.MpConfigPath = './';
      window.MpMastercodePath = './';
    </script>

config.js

• Set the id of the HTML DOM element in which the map viewer should be rendered, e.g.:

  renderTarget: "api-target-div",

• Set the paths to the viewer conf, e.g.:

  portalConf: "./default/config.json",

... and other Resource, e.g.:

 quickHelp: {
     imgPath: "./default/ressources/img/"
 },
 layerConf: "./default/ressources/services-internet.json",
 restConf: "./default/ressources/rest-services-internet.json",
 styleConf: "./default/ressources/style_v2.json",

config.json / other configs

• Configurate the viewer for your needs