Slippymap - Selbermachen mit OL oder LL und mit Overpass - HowTo, Tutorial deutsch

Woanders hat chris66 vorgeschlagen, selber eine Slippymap mit OpenLayers oder Leaflet zu machen. Also habe ich mich mit den Stichworten mal auf die Suche gemacht, hier (incl. altem Forum) und im OSM-Wiki und mit Suchmaschine.

Da findet man viel, oft Detailfragen, auch mal ein “Hallo world”, aber meist bezieht sich das auf alte Versionen vor 5 bis 15 Jahren. Zur Frage “OL oder LL” ist man sich einig: OL kann fast alles, ist aber schwierig zu lernen. LL ist ganz simpel, aber meist braucht man dann doch OL (aber auch das bezieht sich auf nicht aktuelle Versionen). Und je mehr Beiträge ich lese, desto weniger verstehe ich…

Ein deutschsprachiges HowTo ist für mich eine grundlegende Voraussetzung. Es soll sich auf die aktuelle Version beziehen, methodisch-didaktisch aufgebaut sein, vom Anfänger bis zum nicht mehr ganz Anfänger…

Wo finde ich (und andere) sowas?

OpenLayers hab’ ich noch nie gebraucht, weil Leaflet mir alles bietet, was ich benötige.

Um das von Dir gewünschte deutschsprachige HowTo zu erhalten, benötigt man Freiwillige, die das erstellen. Einen Anfang gibt es im Wiki: die ersten beiden Beispiele auf DE:Leaflet - OpenStreetMap Wiki (2023 geschrieben).

Weitergehende Beispiele benötigen nahezu zwingend einen Webserver, der gerne lokal sein kann.

Hallo Vinzenz, Danke für Dein Engagement :slight_smile:
Ja, für ein Leaflet-Tutorial ist das OSM-Wiki ein guter Platz
Ein ausfühliches systematisches Tutorial wäre wirklich hilfreich und sinnvoll.
Mich wundert es, dass die vielen Entwickler und Anwender nicht schon längst sowas geschrieben haben und regelmässig für neue Verwionen erweitern.

Wäre das nicht ein schönes Projekt für eine Hochschule?
Dort müsste sich doch ein IT’ler finden lassen, der sich mit LL auskennt und auch etwas von Methodik und Didaktik versteht? Idealerweise ein Team…

Ich habe auf der Seite mal den SW-Kasten und ein paar Links eingefügt und etwas Text erweitert.

Wenn Du magst, stehe ich gern als Dummy-Tester zur Verfügung:
Du schreibst das Tutorial, ich teste Abschnitt für Abschnitt und gebe Feedback, und Du verbesserst die Abschnitte iterativ. Webserver ist vorhanden.
Wenn Du magst, kann ich Dich auch gern unterstützen bei Methodik und Didaktik.
Magst Du mal mit mir telefonieren? Schicke mir Deine Tel-Nr gern per Mail (keine Ahnung wie das hier geht…)

PS: Angenommen man möchte mehrere LL-Projekte ausprobieren:
Wie sähe dafür eine sinnvolle Ordnerstruktur auf einer Subdomain aus?

1 Like

Sehr schön: wir können gerne den Bereich zum entsprechenden Tutorial ausbauen.
Ein paar Ideen hätte ich schon:

  • Kreise und Polygone (eventuell in das Marker-Beispiel einbauen)
  • Liste von Markern
  • GeoJSON laden
  • GPX-Datei(en) anzeigen
  • Layergruppen und -kontrolle
  • Overpass-Abfrage bestimmter Elemente im Kartenausschnitt und hervorgehobene Anzeige dieser Elemente :slight_smile:

Ich persönlich würde HTML- und Javascript-Basics außen vor lassen, für die absoluten Einsteiger z.B. auf das SELFHTML-Wiki verweisen.

Ich würde für jedes Projekt einen eigenen Ordner anlegen - und auf der gleichen Ebene einen leaflet-Ordner (entpackter Download, umbenannt), parallel dazu einen css- und einen js-Ordner.

Wobei natürlich zu unterscheiden ist zwischen Tutorial (gerne ein eigenes Projekt) mit statischen Seiten, während Du bei Deinen Projekten sicher serverseitige Programmiersprachen einsetzen wirst, die Dir die Daten liefern, die im Tutorial bereits fertig bereitgestellt werden.

Klingt prima :slightly_smiling_face:

Hilfreich sind User Story und entsprechende Persona:

Vincent: 16 Jahre, Gymnasiast, im IT-Leistungskurs, OSM-Sesselmapper (kennt alle tags)
Maria: 45, Italienerin, Pizzabäckerin, Mutter von Vincent
Hannes: 52, Lehrer von Vincent, Fächer: IT, Mathe, Geografie, OSMer der ersten Stunde
Blaubär: 47, Freund von Maria, leidenschaftlicher Segler, arbeitet als Maschinenbauer

Story 1 “Wo ist die Pizzeria”
Maria hat eine Website für die Pizzeria und möchte eine Karte als Wegbeschreibung.
Vincent, damals noch 12, macht einen Screensot von OSM, malt mit IrfanView einen Kreis um die Pizzeria, stellt das Bild auf die WordPress-Site und verlinkt das Bild mit dem OSM-Permalink.

Story 2 “Pizzeria und Pension”
Maria hat eine Freundin, die eine kleine Pension hat. Sie fragt Vincent, ob er diese auch auf der Karte eintragen kann? und auch, wie man am Besten dort hin kommt. Vincent denkt: zwei POI, mit Verbindungsweg, vielleicht ein Popup mit Adressdaten, optional ein Bild - mit Leaflet?

Story 3 “Segeltörn”
Blaubär wurde von seinem Chef gefragt, ob er für ihn und die Teamleiter einen Segeltörn machen kann. Er ist ganz stolz und fragt Vincent, ob er ihm eine “Internet-Karte” machen kann? Vincent denkt, dass er ja Leaflet dafür nutzen könnte und fragt nach den genauen Anforderungen…

Das habe ich nicht verstanden. Kannst Du mal einen Dateibaum machen?

Ich schlage vor, das Tutorial eher niederschwellig zu beginnen. Also C&P-Blöcke mit Kommentaren im Code, die man (ohne sie verstehen zu müssen) simpel kombinieren kann. Durch Erweiterung anhand der Story ergeben sich dann neue Anwendungen und Kombinationen.

Vertiefende Verweise in andere Dokus und Tutorials würde ich eher für Erfahrene anbieten.

PS: um die Details nicht immer tippen zu müssen, bevorzuge ich einTelefongespräch.
Ergebnisse dann gern wieder hier bzw. im Wiki.

1 Like

Was ist damit gemeint?

  • Subdomain
    • Projekt-1 (Ordner)
      • HTML (hier die index.html?)
      • LL (ein Unterordner? mit entpackten LL-Dateien?)
      • CSS (ein Unterordner? mit CSS-Dateien?)
      • JS (ein Unterordner? mit JS-Dateien?)
    • Projekt-2 (Ordner)

Oder etwas ganz anderes?

Ich habe die Ordner jetzt so angelegt:

  • Subdomain
    • LL (Ordner mit entpackten Leaflet-Dateien)
      leaflet,css
      leaflet.js
      optional: index.html (z.B. Menü mit Links auf die Projekte)
    • Projekt-1 (Ordner mit zum Projekt gehörenden Dateien)
      projekt 1.html
    • Projekt-2 (Ordner mit zum Projekt gehörenden Dateien)
      projekt 2.html