Erste Schritte mit der BKG WebMap

In wenigen Schritten lässt sich mit der BKG WebMap eine interaktive Kartenanwendung in eine beliebige Webseite integrieren. Sehen Sie selbst:

1. BKG WebMap Bibliothek und Styles einbinden

Im Header der HTML-Seite (zwischen <head></head>) muss die Verlinkung zur CSS-Datei und Javascript-Bibliothek eingefügt werden: 

<link rel="stylesheet" href="https://sg.geodatenzentrum.de/web_bkg_webmap/theme/default/style-0.12.5.min.css" type="text/css">
<script type="text/javascript" src="https://sg.geodatenzentrum.de/web_bkg_webmap/lib/bkgwebmap-0.12.5.js" charset="utf-8"></script>

Die Bibliothek gibt es in 4 Ausprägungen:

2. Container für Karte bereitstellen

Im Body der HTML-Seite (zwischen <body></body>) muss ein HTML-Element, vorzugsweise ein <div> für die Karte platziert werden. Dies muss mit einer eindeutigen ID versehen werden. Standardmäßig wird "map" verwendet.
Über das style- oder class-Attribut kann die Größe und Aussehen definiert werden: 

<div id="map" style="width:500px;height:500px;border:1px solid #cccccc;"></div>

3. Karte konfigurieren

Im Head-Bereich der HTML-Seite kann nun ein <script></script>-Bereich angelegt werden, der eine Javascript-Funktion zur Initialisierung der Karte definiert. Für die Initialsierung kann der BKGWebMap.MapBuilder verwendet werden: 

var map;

function init() {
  map = new BKGWebMap.MapBuilder().
                      setDiv('map'). // Kartenobjekt im div "map" erzeugen
                      setLayers([{type: 'WMS.VG2500'}]).  // Basislayer VG2500 setzen
                      create(); // Kartenobjekt generieren

  // Karte auf maximale Ausdehnung zoomen
  map.zoomToMaxExtent();
}
Nun kann die Funktion beim Laden der Seite aufgerufen werden. Dazu muss sie im onload-Event im >body<-Tag eingetragen werden: 
<body onload="init()">

4. Karte verwenden

Einbindung geschützter Dienste

Wollen Sie die BKG WebMap für unsere geschützten Dienste verwenden, so müssen Sie zunächst einen Applikationsschlüssel beantragen. Wenden Sie sich dazu an das Dienstleistungszentrum. Weitere Details entnehmen Sie dieser Anleitung.

Anwendungsbeispiele

Einen ausführlicheren Überblick zur BKG WebMap finden Sie in diesen Workshop Unterlagen. Die Zip-Datei enthält eine Präsentation, Übungen und Lösungen zu den Komponenten einer Kartenanwendung.

Weitere Möglichkeiten zur Konfiguration können Sie unseren Anwendungsbeispielen oder unserer API-Dokumentation entnehmen.