Bevor mir die Android-Anwendung „Nette Toilette Navigator“ für den Apps4Bremen-Wettbewerb in den Sinn kam, habe ich mit einer Webanwendung auf Kartenbasis spekuliert. Dazu passend hat Bremen auch Kartenmaterial in Form eines WMS-Dienstes zur Verfügung gestellt. Die interaktive Karte hätte per OpenLayers verschiedene Daten auf den Layern des WMS-Dienstes oder einer  OpenStreetMap-Karte angezeigt. Dabei sollte die Bremer Landesgrenze grafisch hervorgehoben werden. Leider konnte ich die Daten der Landesgrenze nicht so einfach finden, wobei sie natürlich bei OpenStreetMap auf irgendeine Art verfügbar sind.

Für meine bisherigen Karten mit OpenLayers und OpenStreetMap war es nie notwendig, Daten (wie die Landesgrenze) zuvor per GIS (Geographisches Informationssystem) aufzubereiten. Beim RHOK-Berlin hat mir allerdings ein Team-Kollege das Programm QGIS kurz gezeigt, sodass ich wusste, mit dem Programm müsste ich das eigentlich schaffen. In diesem Blog-Artikel beschreibe ich, wie man OpenStreetMap-Daten mit QGIS aufbereitet und das Ergebnis in die Karte der eigenen Webseite integriert:

Einige Schritte benötigen wir, um die Bremer Landesgrenze auf einer Karte anzeigen zu können:

1. QGIS installieren
2. QGIS-Plugins installieren und sich einfach mal reinfuchsen
3. alle Grenzdaten von Bremen herunterladen
4. alle Grenzdaten in QGIS importieren
5. Bremer Landesgrenze in QGIS auswählen und exportieren
6. interaktive Webseite mit Karte erstellen
7. Bremer Landesgrenze in Karte einbinden

Wir haben also viel vor und ich werde nicht auf alle Punkte besonders detailliert eingehen. Insbesondere Installation und Einarbeitung in QGIS beanspruchen ein bisschen mehr Zeit. Die angegebenen Links und das sehr gute QGIS-Benutzerhandbuch, das am Anfang eine gute Einführung in die wunderbare GIS-Welt bietet, sollten stets weiterhelfen.

1. QGIS installieren

Auf der QGIS-Webseite kann man nachlesen, was für die QGIS-Installation (bei mir Version 1.7.3) benötigt wird. Mit meinem alten Leopard-MAC hatte ich bei der Installation noch Probleme, die notwendigen Librarys GDAL und GSL zu installieren. Unter MAC Lion klappte alles mit dieser Anleitung problemlos, auf die auch von der QGIS-Webseite verwiesen wird.

2. QGIS-Plugins installieren und sich einfach mal reinfuchsen

Mit dem Dokument Creating Maps in QGIS: A Quick Quide habe ich angefangen, die QGIS-Welt zu erobern. Das dort erwähnte OpenLayers-Plugin ist auf jeden Fall ganz nett, mit dem Google-, OpenStreetMap-, Bing- und Yahoo-Karten angezeigt werden können. Dazu Plugins -> Fetch Python Plugins -> Repositories -> Add 3rd parties repositories auswählen und dann unter Repositories das OpenLayers Plugin (evtl. zuvor filtern mit OpenLayers) installieren.

Wenn das Plugin installiert ist, kann man bei einem leeren Projekt mal einen OpenStreetMap-Layer hinzufügen: Plugins ->OpenLayers plugin -> Add OpenStreetMap Layer. Dann sollte man die OpenStreetMap-Weltkarte sehen.

Einen WMS-Layer des Apps4Bremen-Wettbewerbs kann man folgendermaßen einbinden:

• Layer -> Add WMS Layer ->New
• Name: Apps4Bremen, URL: http://gdi1.geo.bremen.de/mapproxy/Apps4Bremen/service => Ok
• Connect -> in der Liste beispielsweise ‚Orthophoto 2009‘ auswählen, CRS: Mercator einstellen -> Add -> Close
• in der Layers-Ansicht wird der neue Layer angezeigt
• neu angelegten Layer anklicken und View -> Zoom to Layer auswählen

3. alle Grenzdaten von Bremen herunterladen

Das OpenStreetMap-Projekt bietet eine Fülle von Daten und wenn man mit einem GIS arbeitet, muss man sich mit dem Shapefile-Dateiformat auseinandersetzen. Verschiedene Unternehmen haben sich auf die OSM-Daten spezialisiert, wandeln die Daten beispielsweise in Shapefiles um und bieten sie zum Herunterladen an. OSM zeigt hier einen Überblick zu Shapefiles. Die Daten für das Bundesland Bremen sind beispielsweise hier verfügbar: http://downloads.cloudmade.com/europe/western_europe/germany/bremen

4. alle Grenzdaten in QGIS importieren

• bremen.shapefiles.zip herunterladen und entpacken
• Vektor-Layer in QGIS anlegen mit Datei bremen_administrative.shp: Layer -> Add Vector Layer -> bremen_administrative.shp auswählen -> Open
• an Bremen heranzoomen: neu angelegten Layer ‚bremen_administrative‘ anklicken und View -> Zoom to Layer auswählen

Jetzt sollten die Bremer Grenzlinien angezeigt werden. Falls das nicht der Fall ist, muss wahrscheinlich noch das automatische Umrechnen der verschiedenen Layer-Koordinatensysteme aktiviert werden:  Settings -> Project Settings -> Coordinate Reference System -> Enable „on the fly“ CRS transformation

Wenn das noch nicht geholfen hat, bitte die folgenden Punkte mal überprüfen:

• die Koordinatensysteme sollten automatisch korrekt vergeben worden sein (Projekt: Mercator, weil wir OSM nutzen; Layer ‚bremen_administrative‘: EPSG:4326)
  – Projekt: Settings -> Project Settings -> Coordinate Reference System -> Google Mercator
  – Layer ‚bremen_administrative‘ anklicken -> Kontextmenü Properties -> General -> Specify CRS ->EPSG:4326 – WGS 84
• bei der Layers-Anzeige muss Layer ‚bremen_administrative‘ oberhalb des anderen Layers liegen (sonst die Layers einfach verschieben)
• die Grenzlinien sollten stark genug gezeichnet sein: Layer ‚bremen_administrative‘ anklicken -> Kontextmenü Properties -> Style
  

  Luftbild mit Bremer-Grenzen in QGIS

5. benötigte Grenzdaten in QGIS auswählen und exportieren

Layer ‚bremen_administrative‘ anklicken und Layer -> Open Attribute Table auswählen. In dem Dialog können wir eine Abfrage definieren, mit der die benötigten OSM-Ländergrenzen ausgewählt werden. In diesem Dialog benötigen wir ‚Look for 4 ADMIN_LEVE‘ oder im Dialog Advanced Search ‚ADMIN_LEVE = 4‘ als SQL-Query. Wenn wir damit suchen, sollten die Grenzen des Landes Bremens ausgewählt werden. Unter View -> Select stehen uns übrigens weitere Möglichkeiten für die Auswahl von Elementen zur Verfügung. Mit Layer -> Save Selection as Vector File können wir die ausgewählten Elemente beispielsweise als GeoJSON exportieren (KML und GML funktioniert für unser Beispiel ebenfalls). Dabei sollte man bei CRS ‚EPSG:4326 – WGS 84‚ eintragen, denn andernfalls kommt QGIS eventuell mit den Koordinaten durcheinander (für den Export nach GeoJSO war bei mir der Eintrag nötig, für KML und GML nicht).

Die erstellte GeoJSON-Datei können wir als neuen Vector-Layer auch wieder importieren. Wenn wir der Grenze den Style mit den roten Punkten zuweisen, sieht die Karte etwa so aus:

Jetzt haben wir alles in QGIS erledigt. Abschließend möchte ich noch darauf hinweisen, dass man mit QGIS die aktuelle Karte auch als Bild exportieren kann (Beispiel): Files -> Save as Image

6. interaktive Webseite mit Karte erstellen

Für Webseiten mit interaktiven Karten nutze ich wie in meinen anderen Beispielen das Duo OpenLayers mit OpenStreetMap. Der HTML- und JavaScript-Code sieht dann folgendermaßen aus:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bundesland-Umrandungen mit OpenStreetMap-Daten und QGIS erzeugen</title>

<script type="text/javascript"
  src="http://dev.openlayers.org/releases/OpenLayers-2.11/OpenLayers.js"></script>

<script type="text/javascript">
  PROJECTION_4326 = new OpenLayers.Projection("EPSG:4326");
  PROJECTION_MERC = new OpenLayers.Projection("EPSG:900913");

  function init() {
     var map = new OpenLayers.Map("map", {
      controls : [ new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.MousePosition(),
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.OverviewMap() ],
      maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
      numZoomLevels : 18,
      maxResolution : 156543,
      units : 'm',
      projection : PROJECTION_MERC,
      displayProjection : PROJECTION_4326
    });

    // OSM Layer
    var osmLayer = new OpenLayers.Layer.OSM("OpenStreetMap");
    map.addLayer(osmLayer);
    
    var center = new OpenLayers.LonLat(8.807357, 53.075813);
    var centerAsMerc = center.transform(PROJECTION_4326, PROJECTION_MERC);
    map.setCenter(centerAsMerc, 11);
  }
</script>

<style type="text/css">
html,body,#map {
  width: 100%;
  height: 100%;
  margin: 0;
}
</style>

</head>
<body onload="init()">
  <div id="map"></div>
</body>
</html>

7. Grenzdaten in Karte einbinden

Um unsere erstellte GeoJSON-Datei mit der Bremer Landesgrenze einzubinden, brauchen wir nur wenige Zeilen JavaScript-Code. In diesem Beispiel nutzen wir eine GeoJSON-Datei, sodass wir die Klasse OpenLayers.Format.GeoJSON für unsere Daten benötigen. Für GML-, KML- und GPX-Daten können wir auf gleiche Weise die Klassen OpenLayers.Format.GML, OpenLayers.Format.KML und OpenLayers.Format.GPX verwenden.

    map.addLayer(new OpenLayers.Layer.Vector("Bremen GeoJSON", {
        projection: new OpenLayers.Projection("EPSG:4326"),
        protocol: new OpenLayers.Protocol.HTTP({
                url: "bremen-grenze.geojson",
                format: new OpenLayers.Format.GeoJSON()
        }),
        strategies: [new OpenLayers.Strategy.Fixed()],
        style: {strokeColor: "#0000FF", strokeWidth: 2}
    }));

Mit OpenLayers können wir natürlich auch die WMS-Kartendienste des Apps4Bremen-Wettbewerbs nutzen. Der Dienst unterstützt verschiedene Projektionen. Zum Glück auch die von OpenStreetMap verwendete Mercator-Projektion, sodass wir uns diesbezüglich keine Gedanken machen müssen. Wir haben die Wahl zwischen den Layern Digitale Straßenkarten 1:10000 (Layername: ‚Apps4Bremen_DSK10‘), Orthophoto 2009 (Layername: ‚Apps4Bremen_Orthophotos_2009‘) und Stadtplan (Layername: ‚Apps4Bremen_Stadtplan‘).

    var orthophotosLayer = new OpenLayers.Layer.WMS(
    	"Apps4Bremen Orthophotos 2009", "http://gdi1.geo.bremen.de/mapproxy/Apps4Bremen/service",
    	{ layers: 'Apps4Bremen_Orthophotos_2009'},
    	{ format: 'image/png', isBaseLayer: true });
    map.addLayer(orthophotosLayer);

Damit haben wir unser Ziel erreicht: die Landesgrenzen werden auf einer Karte angezeigt. Beim Schreiben des Artikels ist mir erst aufgefallen, dass es in OpenLayers auch die Klasse OpenLayers.Format.OSM gibt. Aha – wenn man die richtige OpenStreetMap-Relation kennt, kann man sich die passende OSM-Datei herunterladen und mit OpenLayers anzeigen lassen. Die Relation der Bremer Landesgrenze hat die Id ‚62718‘. Nähere Informationen zu der Relation sind hier und die Geodaten im OSM-Format sind hier verfügbar. Mit Openlayers können wir die Datei dann so nutzen:

    map.addLayer(new OpenLayers.Layer.Vector("Bremen OSM", {
        projection: new OpenLayers.Projection("EPSG:4326"),
        protocol: new OpenLayers.Protocol.HTTP({
                url: "bremen-grenze-osm-relation-62718.xml",
                format: new OpenLayers.Format.OSM()
        }),
        strategies: [new OpenLayers.Strategy.Fixed()],
        style: {strokeColor: "#FF0000", strokeWidth: 2}
    }));

Die fertige Webseite mit der Karte ist hier verfügbar und den Code findet man bei GitHub. Das war mein erster Ausflug in die spannende QGIS-Welt…