Du möchtest deine Web-Anwendung mit Maps / Karten aufwerten? Dann könnte OpenLayers oder Leaflet eine gute Wahl sein. Es handelt sich hierbei um OpenSource Frameworks zur Einbindung von Geodaten im Web-Browser.

Einbindung von Karten-Material

Die Basis ist natürlich immer das verwendete Kartenmaterial. Es werden eine fülle von Kartenformaten und Methoden zur Implementierung geboten. Die für den Einstieg einfachste Möglichkeit ist sicherlich die Verwendung einen öffentlichen Tile-Servers wie zum Beispiel von Google oder OpenStreetMap. Tile-Server kommunizieren mit dem Client über HTTP/HTTPS und stellen immer kleine Kartenausschnitte aus Basis der Parameter bereit. Es gibt hierbei drei wesentliche Parameter. Zum einen muss die Zoom-Stufe abgebildet werden, dies geschieht in der Regel durch den z-Parameter und zum anderen den Ausschnitt der durch x/y Koordinaten bestimmt wird.

Code-Beispiele

In diesem Beispiel stelle ich die grobe Vorgehensweise von OpenLayers vor, wie Kartenmaterial sowie Objekte oder Zeichnungen der Karte hinzugefügt werden können.

Zunächst muss eine Map initial angelegt werden und die Ausgangs-Zoomstufe und die Zentrierung festgelegt werden. Als Target ist es notwendig die ID eines HTML-Elements anzugeben, in welches die Map eingefügt werden soll.

this.map = new Map({
      layers: [],
      target: 'map',
      view: new View({
            center: fromLonLat([51.452027, 6.721433]),
            12,
      }),
});

Anschließend bietet sich an, das Kartenmaterial als Layer dem erstellten Map-Objekt hinzuzufügen.

const osmOnline = new Tile({
      source: new XYZ({
            url: 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
      })
});
this.map.addLayer(osmOnline);

Es ist natürlich auch möglich beliebige Controls in die Map einzufügen. Dies kann zum Beispiel für individuelle Zoom-Schaltflächen sinnvoll sein. In dem folgenden Beispiel wird das HTML-Element mit der ID: test-control gesucht und in diese Map verschoben.

const testControl = new Control({
      element: document.getElementById('test-control')
});

this.map.addControl(testControl);