DE:OSM mit Leaflet

From OpenStreetMap Wiki
Jump to: navigation, search
Verfügbare Sprachen — OSM mit Leaflet
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް


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