Basemap.at (WMTS) in Leaflet.js

Mein Problem war es, dass ich in eine Leaflet-Map die “basemap.at”-Grundkarte einbinden wollte.

Hierbei bin ich auf einigen Widerstand gestoßen, denn es gab so gut wie keine Beschreibungen wie man die “basemap.at” als Gurndkarte einzubinden hat.

Doch dank Google-Codesuche hatte ich ein Beispiel gefunden wo genau diese Kombination vorhanden war.

  1. Als erstes benötigen wir eine Javascript-Erweiterung:

    <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script>
  2. Nun wird eine Variable erstellt welche die Verbindung beinhaltet:
    var ign = new L.tileLayer("http://{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png", {
        subdomains : ['maps', 'maps1', 'maps2', 'maps3', 'maps4'],
        attribution: '&copy; <a href="http://basemap.at">Basemap.at</a>, <a href="http://www.isticktoit.net">isticktoit.net</a>'
    });
  3. jetzt noch zur Leaflet-Map hinzufügen und fertig:

    map.addLayer(ign);

Man kann auch die Punkte 2 und 3 in einem Schritt durchführen.

Will man die derzeit verfügbaren anderen “Kartenlayer” von basemap.at einbinden (zB die Orthophotos, Basemap grau,…), so muss man einfach die Tiles-URL in L.tileLayer anpassen – entsprechend den Angaben, die sich im getCapabilities.xml des WMTS-Dienstes finden.

Link-Grundkarte: Basemap.at

UPDATE:

Hier ein volles Beispiel mit Basemap & OSM & Blank: Leaflet & Basemap example