index.html: wir definieren den Kartenbereich
danach den Kartenbereich als <div>-Element mit einem id-Attribut
<h3>Übersichtskarte</h3>
<div id="map"></div>
main.css: wir stylen den Kartenbereich
dazu ein grauer Rahmen
#map {
width: 100%;
height: 600px;
border: 1px solid gray;
}
Beispiele für die drei Arten von Selektoren:
h1 {
/* alle <h1> Elemente */
}
.user {
/* Elemente mit class="user" */
}
#map {
/* das (einzige) Element mit id="map" */
}
Die Homepage der Kartenbibliothek liegt hier: https://leafletjs.com/
kopieren die beiden Zeilen in den <head>-Bereich von index.html, nach <title> mit einem Kommentar
<!-- Leaflet Bibliothek -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
leaflet.css und leaflet.js “original” istwir erstellen nach </main>, also ganz Unten, ein <script>-Element
<script>
</script>
und kopieren den Code des Beispiels auf der Startseite von Leafletjs dorthin
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
Voilà, die erste Karte ist fertig :-)
Challenge, Zeit 10 Minuten:
den Popuptext auf den Etappentitel ändern
die Karte initialisieren
var map = L.map('map')
map. Wir könnten sie auch karte nennen, dann müssten wir alle Vorkommen von map (in der selben Farbe wie bei var map) mit karte ersetzenL steht für Leaflet) und ist eine sogenannte “Methode”. Methoden sind Codeblöcke, die Irgendetwas können, in diesem Fall, eine Karte initialisierenL.map() und bestimmt den Wert des id-Attributs unseres <div>-Elements (allerdings ohne #) in dem die Karte gezeichnet werden sollden Ausschnitt setzen
.setView([-39.13, 175.65], 10)
[-39.13, 175.65] des Ausschnitts als sogenannten Array
1 (Welt) und 20-25 (Detail, je nach Kartenhintergrund), wir sind mit 11 mitten drindie Hintergrundkarte definieren und an die Karte hängen
L.tileLayer().addTo(map);
L.tileLayer() erwartet zwei Argumente
https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
{s}, {x}, {y}, {z} in der Seiteninformation des Browsers (STRG+I im Firefox) unter Medien
{s} steht für den Server (a,b oder c){z} steht für den Zoomlevel{x} steht für die Tilenummer des Tiles entsprechend der geographischen Länge{y} steht für die Tilenummer des Tiles entsprechend der geographischen BreiteWICHTIG: Objekte bestehen aus Doppelpunkt-getrennten Key/Value Paaren
{
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
attribution ist der Key'© ....contributors' ist der Value.addTo(map) hängt den Kartenhintergrund an die Karteden Marker positionieren und zur Karte hinzufügen
L.marker().addTo(map)
L.marker() erwartet ein Argument und zwar einen Array mit der Lat/Lng Koordinate des Markers ([-39.13, 175.65]).addTo(map) hängt den Marker an die Karteein Popup hinzufügen und öffnen
.bindPopup().openPopup()
.bindPopup() erwartet ein Argument und zwar den Text für das Popup, der auch HTML-Markup enthalten kann.openPopup() öffnet das Popup in der KarteSidestep: Fluent Interfaces
L.marker Code ist ein gutes Beispiel für ein sogenanntes “Fluent Interface”L.marker().addTo().bindPopup().openPopup() steht dabei für den Satz definiere einen Marker, füge ihn der Karte hinzu, definiere dort ein zusätzliches Popup und öffne esvar map = L.map('map') ist der Grund, denn 'map' verweist auf unseren <div>-Element mit der ID ‘map’ - nennen wir ihn ab jetzt map-DIVelegant ist das nicht, deshalb erstellen wir ein externes Skript main.js
zuerst im HEAD-Bereich das <script>-Element mit einem Kommentar und dem Baustein script:src erstellen und main.js als src-Attribut verwenden
<!-- Kartenscript -->
<script src="main.js"></script>
main.js erstellenbeide Dateien speichern
den Skript-Code nach main.js verschieben
main.js einfügeneinen Kommentar ganz oben dazu
Sidestep: Kommentare in Javascript
mehrzeilig - wie bei CSS-Kommentaren
/*
Kartenskript für
Neuseelandreise
*/
einzeilig - das ist neu
// Kartenskript für Neuseelandreise
beides speichern
die Entwicklerwerkzeuge des Browsers zeigen das auch an, wo sind sie zu finden?
was steht in der “Konsole”?
Uncaught Error: Map container not found.
_initContainer Map.js:1103
initialize Map.js:136
i Class.js:22
map Map.js:1728
<anonymous> main.js:3
Map container not found ist der entscheidende Hinweis
wir müssen also sicherstellen, dass das Skript in main.js erst ausgeführt wird, wenn die ganze index.html Seite gelanden ist und dabei hilft uns
das defer-Attribut beim <script>-Element 🔗 COMMIT
<script defer src="main.js"></script>
genau das tut es auch und unsere Karte ist wieder da
main.js Skripts das defer-Attribut beim Einbinden GET http://127.0.0.1:5500/favicon.ico
404 Not found
favicons werden als Vorschaublider bei den Tabs im Browser verwendet
wir haben ja ein 100x100 Pixel großes user-Bild, das wir dafür verwenden können
über den Baustein link:favicon definieren wir es im head-Bereich
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
und ändern den Pfad zum Bild sowie den Typ, da wir ja ein .jpg-Bild haben
<!-- Tab-Vorschaubild -->
<link rel="icon" href="images/user.jpg" type="image/jpg" />