Читать книгу Leaflet - Astrid Günther - Страница 12
Erstellen Sie das Kartenobjekt
ОглавлениеNun wird es spannend. Wir erstellen das Skript, das die Karte anzeigen wird. Dabei beginnen wir mit dem Erstellen des Kartenobjektes. Im nachfolgenden Programmcodeausschnitt sehen Sie die erste Zeile des Skripts. Ich habe die betreffende Stelle mit einem Stern markiert.
<!DOCTYPE HTML> <html> <head> <title>Eine OSM-Karte mit Leaflet</title> <link rel="stylesheet" href="../leaflet/leaflet.css" /> <script src="../leaflet/leaflet.js"></script> </head> <body> <div style="height: 180px;" id="mapid"></div> <script> *var mymap = L.map('mapid').setView([50.27264, 7.26469], 13); </script> </body> </html> <!--index_996.html-->
Was haben wir genau gemacht? Wir haben mit dem Befehl var mymap = L.map('mapid') ein neues Objekt – oder eine neue Instanz – der Klasse map erstellt und dieser den Namen mymap gegeben.
Sie fragen sich nun vielleicht, wie wir eine neue Instanz ohne die Verwendung des Schlüsselwortes new erstellen konnten? Die Antwort ist einfach: Die Leaflet-Klassen sind mit einem Großbuchstaben – beispielsweise L.Map – benannt und diese müssen mit new erstellt werden. Es gibt aber Shortcuts mit Kleinbuchstaben – L.map – die aus Bequemlichkeitsgründen von den Leaflet-Programmierern für Sie erstellt wurden. Leaflet setzt hier das Entwurfsmuster Fabrikmethode8 ein. Das Muster beschreibt, wie ein Objekt durch Aufruf einer Methode anstatt durch direkten Aufruf eines Konstruktors erzeugt wird. Wollen Sie sich dies selbst ansehen? Die Funktion L.map()9 der Klasse L.Map finden Sie auf Github ganz am Ende in der Datei map.js. Ein weiteres Beispiel finden Sie zu Beginn des Kapitels Custom Markers.
Das Festlegen des Kartenmittelpunktes mithilfe der Koordinaten [50.27264, 7.26469] und der Methode setView() und die Angabe der Zoomstufe 13 ist optional. Ich empfehle Ihnen, diese Werte immer mitzugeben. Denn: Es ist für jeden ärgerlich, eine Karte zu sehen, die die ganze Welt anzeigt – die relevanten Daten befinden sich aber alle in Gering, einem kleinen Dorf in der deutschen Eifel. Man muss somit erst einmal mehrmals auf die Schaltflächen zum Zoomen klicken.
Sagen Ihnen die Koordinaten in der Form [50.27264, 7.26469] nichts und möchten Sie gerne mehr zum Thema geografische Koordinaten erfahren? Dann lesen Sie den Exkurs im Kapitel Exkurs: Geographische Koordinaten.
Sie verfügen nun über ein Leaflet-Kartenobjekt, mit dem Sie eine Karte anzeigen können. Sie müssen dem Kartenobjekt noch mitteilen, welches Kartenbild – also welche Grafiken – es anzeigen soll. Dies erreichen Sie, indem Sie eine Schicht mit Kacheln, also einen Tile-Layer, zum Kartenobjekt hinzufügen. Wie Sie dies genau umsetzen, zeige ich Ihnen im nächsten Kapitel.
