DE:OSM mit Leaflet
| Einleitung | Vorbereitung | HTML | CSS | JavaScript | Daten | Popup | ... | Plugin | Beispiele |
OpenStreetMap Karten und Daten können mit Leaflet relativ einfach in eine Webseite eingebunden werden.
Diese Einführung zeigt in aufeinander aufbauenden Schritten, was man dafür braucht und anhand einfacher Beispiele, wie man das umsetzt. Benötigt werden ein Editor zum Bearbeiten der Dateien, die Dateien selbst und etwas Kenntnisse in HTML und CSS. Je mehr du weisst über JavaScript (JS), umso besser. JS begegnet dir bei den individuellen Initialeinstellungen der Karte, beim Füllen der Popups und bei den Daten in den GeoJSON-Dateien. Auch wenn die Beispiele hier mit Copy und Paste übernomme werden können: sobald du etwas verändern willst, brauchst du mehr oder weniger JS-Kenntnisse.
Wie immer beim Erstellen von Programmcode sollte man ein gewisses Maß an Ruhe und Geduld mitbringen. Fehler sind schnell gemacht (auch wenn manchmal nur ein "Strichpunkt" vergessen wird), und die Suche danach kann oft zermürbend sein. Hilfreich ist klares, strukturiertes Denken und Vorgehen. Eine Suche bei Google, hier im OSM-Wiki oder in Wikipedia kann oft einen entscheidenden Hinweis zur Lösung eines Problems geben.
Was du brauchst
- eine Website, die du über einen FTP-Zugang selber gestalten kannst
Für erste Versuche reicht eine kostenlose Website, beispielsweise bei bplaced.de. - OSM als Basiskarte
- den HTML-Code für dein Grundgerüst, den JavaScript-Code von Leaflet, eine CSS-Datei für das Erscheinungsbild
- Daten zum Anzeigen
- einen Editor zum Code-schreiben und ein FTP-Programm zum Hochladen des Codes.
die nächsten Schritte
- Vorbereitung - erklärt, welche Software benötigt wird
- HTML-Datei - erklärt die HTML-Datei
- CSS-Datei - erklärt die CSS-Datei. Sie bestimmt das Erscheinungsbild der Seite sowie Hilfstexte
- Daten - erklärt, wie man Geodaten findet und als Layer darstellt
- JavaScript-Datei - erklärt die JavaScript-Dateien, die für die Steuerung der Layer, Popups und anderer Features verantwortlich sind
- Beispiele - verlinkt aktuelle Beispiele