Читать книгу Leaflet - Astrid Günther - Страница 30

Stamen

Stamen legt den Schwerpunkt auf gutes Design. Informationen zu den Karten von Stamen finden Sie auf der Website http://maps.stamen.com. Die Übersicht zeigt Ihnen drei Kartenstile von Stamen.

Abbildung: watercolor.

Abbildung: toner.

Abbildung: terraint.

Beim Einbinden einer Karte von Stamen müssen Sie zusätzlich eine JavaScript-Datei verlinken. Wie Sie den StamenTileLayer genau nutzen, können Sie im nachfolgenden Programmcodebeispiel ablesen.

<!DOCTYPE HTML> <html> <head> <title>Eine OSM-Karte mit Leaflet</title> <link rel="stylesheet" href="../leaflet/leaflet.css" /> <script src="../leaflet/leaflet.js"></script> *<script src="http://maps.stamen.com/js/tile.stamen.js"></script> </head> <body> <div style="height: 700px;" id="mapid"></div> <script> var mymap = L.map('mapid').setView([50.27264, 7.26469], 13); *var layer = new L.StamenTileLayer("watercolor"); *mymap.addLayer(layer); </script> </body> </html>

Achtung: Der StamenTileLayer unterstützt nicht alle Zoomstufen. Wenn Sie den Typ watercolor verwenden, sehen Sie zum Beispiel mit der Zoomstufe 19 eine leere graue Fläche. Um dies zu verhindern, können Sie die Optionen des StamenTileLayer überschreiben.

Setzten Sie dafür nach der Instanziierung die Options maxZoom auf 19. So bleibt die Zoomstufe 19 als Ebene auf der Karte erhalten.

Setzen Sie dann aber die Option maxNativeZoom auf 18. Dies bewirkt, dass Leaflet nicht versucht, Kacheln für eine Zoomstufe 19 zu laden. Stattdessen benutze Leaflet auch bei Zoomstufe 19 die Kacheln der Zoomstufe 18 – skaliert diese aber auf die Größe der Zoomstufe 19.

… var layer = new L.StamenTileLayer("watercolor"); layer.options.maxZoom = 19; layer.options.maxNativeZoom = 18; …

ESRI ist ein weiterer Anbieter von Basiskarten. Was ESRI genau ist und wie Sie die Karten dieses Instituts einbinden können, erkläre ich Ihnen im Kapitel zu ESRI.

Haben Sie noch nicht den Kartenstil gefunden, den Sie suchen oder sind Sie einfach nur neugierig, welche Karten sonst noch angeboten werden? Verweise auf weitere Tile-Server-Provider finden Sie unter der Adresse: http://wiki.openstreetmap.org/wiki/Tiles³³.

Подняться наверх