Schnelleinstieg

Im folgenden Schnelleinstieg werden die minimalen Schritte erklärt, um eine Karte mit Hilfe von geo.okapi in eine bestehende Webseite zu integrieren.

Vorbereitung der Webseite

Zunächst gilt es die benötigten geo.okapi Bibliotheken auf der Webseite zu integrieren. Dazu muss im head-Bereich folgende JS- und CSS-Bibliothek eingebunden werden:

<script src="https:/sgx.geodatenzentrum.de/geo.okapi/v1.0/dist/geo.okapi.min.js"></script>
<link rel="stylesheet" href="https:/sgx.geodatenzentrum.de/geo.okapi/v1.0/dist/geo.okapi.min.css">
  

Zur Darstellung der Karte wird ein div-Element benötigt. Dies kann im Inhaltsbereich der Webseite an gewünschter Stelle eingefügt werden:

<div id="map" style="width:500px;height:500px"></div>
  

Alternativ zum gezeigten Inline-Styling (style="...") sollte die Größe und das Layout des Kartenelementes durch eine zentrale CSS-Definition erfolgen.

Karte konfigurieren

Die Konfiguration der Karte erfolgt über die JavaScript-Klasse okapi.MapBuilder. Wird nichts weiter vorgegeben, dann wird die Karte in einer Standardkonfiguration erstellt. Darüber hinaus können Anpassungen an den Kartenebenen (setLayers(...)), den Interaktionselementen (setControls(...)), der Kartenansicht (setView(...)), den Vektorsymbolisierungen (setStyles(...)) oder den Einstellungen zur Authentifizierung (setSecurity(...)) vorgenommen werden. Die zur Verfügung stehenden Optionen können der jeweiligen Methode in der API-Dokumentation des MapBuilder entnommen werden.

Alternativ kann der MapBuilder die Karte komplett anhand einer JSON-Konfiguration erstellen (loadConfig(...)). Dadurch reduziert sich die Anzahl benötigter JavaScript Befehle. Weterhin erlaubt dies die Auslagerung der Konfiguration einer Kartenanwendung. Die Spezifikation der Konfiguration kann dem aktuellen Schema entnommen werden.

Das folgende Beispiel nutzt die Konfiguration per JavaScript und erstellt eine Karte mit TopPlusOpen als Hintergrundkarte und den BKG Dienststellen als Overlay:

  new okapi.MapBuilder()
    .setTarget('map')             // HTML-id des Zielelementes für Karte
    .setView({
        projection: 'EPSG:25832'  // Kartenprojektion auf UTM32 festlegen
    })
    // Kartenebenen definieren
    .setLayers({
        baseLayers: [
            {
                type: 'BKG',
                name: 'TopPlusOpen',
                ref: 'topplus_open',
                visibility: true
            }
        ],
        overlays: [
            {
                type: 'MARKER',
                name: 'BKG Dienststellen',
                visibility: true,
                srsName: 'EPSG:25832',
                markers: [
                    {
                        coordinates: { lon: 464216.0, lat: 5554721.0 },
                        content: 'Zentrale Dienststelle in Frankfurt am Main'
                    },
                    {
                        coordinates: { lon: 721979.0, lat: 5693986.0 },
                        content: 'Außenstelle Leipzig'
                    },
                    {
                        coordinates: { lon: 782883.35506, lat: 5450718.67392 },
                        content: 'Geodätisches Observatorium Wettzell'
                    }
                ]
            }
        ]
    })
    // Interaktionselemente definieren
    .setControls({
        tools: {
            copyright: {active: true},
            copyCoordinates: { active: true },
            showAttributes: {active: true},
            showCoordinates: {active: true},
            zoom: {active: true}
        }
    })
    .create();
  

Vollständiges Beispiel

Weiterführenden Informationen

Weitere Möglichkeiten zur Konfiguration finden sich in den Anwendungsbeispielen. In der Dokumentationsübersicht finden sich weitere Hinweise zur Verwendung von geo.okapi.

Einbindung geschützter Dienste des BKG

Zur Einbindung geschützter Dienste des BKG wird ein Applikationsschlüssel benötigt. Wenden Sie sich dazu bitte an das Dienstleistungszentrum. Weitere Details entnehmen Sie dieser Anleitung.