OSM-Karte mit Leaflet selber bauen

classic Classic list List threaded Threaded
20 messages Options
Reply | Threaded
Open this post in threaded view
|

OSM-Karte mit Leaflet selber bauen

Markus-2
Liebe Profis,

ich - und vermutlich viele andere auch - hätte gern eine Karte, die ich
individuell mit Layern ergänzen kann :-)

- eigener GPX-Track
- eigene POI-Liste als GesJSON
- alle <key=value> in <boundary=xy> über Overpass dynamisch
- alle <key=value> in <boundary=xy> über Overpass statisch
- ...

Vermutlich kann man sowas als kopierbare Code-Blöcke anbieten, und recht
simpel individuell zusammenstellen?

Hier habe ich nichts in deutscher Sprache gefunden:
https://wiki.openstreetmap.org/wiki/DE:Leaflet

Viele Beispiele sind veraltet und funktionieren nicht mehr, und die
funktionierenden sind nicht so dokumentiert, dass man als Laie daraus
die Code-Blöcke ableiten und anders zusammenstellen und anpassen könnte.

Vielleicht können wir ja gemeinsam sowas zusammenstellen?
Ich helfe gern mit, das im Wiki zu dokumentieren :-)

Was könnte ein passender Seitentitel fürs Wiki sein?

Use case könnte sein:
Provider: Bplaced
Code und Doku: im Wiki
Basiskarte: OSM
Layer 1: alle Sitzbänke, mit Ref-Nr als Popup
Layer 2: alle Wanderwege mit Wegzeichen, Popup mit Länge und
Kurzbeschreibung
Gebiet: Simmelsdorf https://www.openstreetmap.org/relation/35117
Layout: Kartentitel, Layerauswahlmenü, Permalink, ...

Mit herzlichem Gruss,
Markus

Beispiele:
http://maxheight.bplaced.net/overpass/map.html?zoom=16&lat=50.93688&lon=6.96337&layers=B0000000TFFFFFFFFFFF&label=T&style=line&opacity=70
http://osmstreetlight.bplaced.net/#17/49.59864/11.00446

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Harald Hartmann
hmm, muss es eine "deutsche" Anleitung sein? Ansonsten würde ich als
erstes auf die Leaflet Tutorials selbst verweisen [1].

Was du nicht geschrieben hast, wie dynamisch die "Daten" sein sollen.
Klar, eine overpass Anbindung bedeutet ein bisschen mehr Arbeit (es gibt
zwar ein Plugin, dass geht aber nicht wirklich ressourcenschonend mit
den Anfragen zu overpass um und man wird dann ziemlich schnell für
minuten geblockt, da bei overpass nur zwei gleichzeitige Abfrage pro IP
zulässig sind)

Wenn die Daten aber eher "statischer" Natur sind, die Daten einfach als
GeoJSON exportieren und das direkt über das entsprechende Plugin (siehe
Tutorials) einbinden, inkl. Popups usw.

[1] https://leafletjs.com/examples.html

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Markus-2
Hallo Harald,

> muss es eine "deutsche" Anleitung sein?

Ja, denn die meisten Anleitungen sind nur in Englisch.
Und gerade wenn jemand IT-mässig nicht so bewandert ist, hilft eine
deutsche Anleitung unnötige Missverständnisse zu vermeiden.

> die Leaflet Tutorials [1]

könnten ja eine Grundlage für die Doku bieten.

Mir schwebt eine Art "Baukasten" vor.
Verschiedene Use Cases sollen damit abgedeckt werden können.
Vom Einfachen zum Komplexen, Schritt für Schritt :-)

> wie dynamisch die "Daten" sein sollen.

Wenn es nur die Wanderwege oder Sehenswürdigkeiten oder so einer
Gemeinde sein sollen, reicht eine statische GeoJSON (die man zu Beginn
der Wandersaison jeweils neu macht).

Wenn jemand die Brückendurchfahrtshöhen in DE oder EU zeigen will,
braucht man vermutlich eine andere Lösung.

Weitere Use Cases:
- alle Dart-Sport Vereinigungen oder Flughäfen weltweit anzeigen
  (da braucht man dann noch eine Suche nach Orten)
- Änderungen in der OSM-DB überwachen
- ...

> overpass Anbindung bedeutet ein bisschen mehr Arbeit (es gibt
> zwar ein Plugin, das geht aber nicht wirklich ressourcenschonend mit
> den Anfragen zu overpass um und man wird dann ziemlich schnell für
> minuten geblockt, da bei overpass nur zwei gleichzeitige Abfrage pro IP
> zulässig sind)

Für weit Fortgeschrittene könne man später auch noch ergänzen, wie man
Wikidata abfragt, oder Wikipedia, oder Commons.
Oder wie man spezifische Popups macht (Layout), oder Kombi-Popups mit
Bildern aus Commons.

> Wenn die Daten aber eher "statischer" Natur sind, die Daten einfach als
> GeoJSON exportieren und das direkt über das entsprechende Plugin (siehe
> Tutorials) einbinden, inkl. Popups usw.

Also erst mal HTML-Gerüst, dann die einzubindenden Skripte, Variablen,
CSS, dann wie man die Daten findet und einbindet und Popups macht, Menüs
und Doku in der Karte, ...

Mit herzlichem Gruss,
Markus

> [1] https://leafletjs.com/examples.html



_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Markus-2
Hallo Harald,

ich habe mal etwas "Gerüst" gebaut:
https://wiki.openstreetmap.org/wiki/DE:OSM_mit_Leaflet

Da wo ich nicht weitergekommen bin, habe ich einen Kommentar geschrieben...
Vielleicht kannst Du - oder andere - ja das eine oder andere ergänzen?

Mit herzlichem Gruss,
Markus



Am 29.12.2018 um 17:38 schrieb Markus:

> Hallo Harald,
>
>> muss es eine "deutsche" Anleitung sein?
>
> Ja, denn die meisten Anleitungen sind nur in Englisch.
> Und gerade wenn jemand IT-mässig nicht so bewandert ist, hilft eine
> deutsche Anleitung unnötige Missverständnisse zu vermeiden.
>
>> die Leaflet Tutorials [1]
>
> könnten ja eine Grundlage für die Doku bieten.
>
> Mir schwebt eine Art "Baukasten" vor.
> Verschiedene Use Cases sollen damit abgedeckt werden können.
> Vom Einfachen zum Komplexen, Schritt für Schritt :-)
>
>> wie dynamisch die "Daten" sein sollen.
>
> Wenn es nur die Wanderwege oder Sehenswürdigkeiten oder so einer
> Gemeinde sein sollen, reicht eine statische GeoJSON (die man zu Beginn
> der Wandersaison jeweils neu macht).
>
> Wenn jemand die Brückendurchfahrtshöhen in DE oder EU zeigen will,
> braucht man vermutlich eine andere Lösung.
>
> Weitere Use Cases:
> - alle Dart-Sport Vereinigungen oder Flughäfen weltweit anzeigen
>   (da braucht man dann noch eine Suche nach Orten)
> - Änderungen in der OSM-DB überwachen
> - ...
>
>> overpass Anbindung bedeutet ein bisschen mehr Arbeit (es gibt
>> zwar ein Plugin, das geht aber nicht wirklich ressourcenschonend mit
>> den Anfragen zu overpass um und man wird dann ziemlich schnell für
>> minuten geblockt, da bei overpass nur zwei gleichzeitige Abfrage pro IP
>> zulässig sind)
>
> Für weit Fortgeschrittene könne man später auch noch ergänzen, wie man
> Wikidata abfragt, oder Wikipedia, oder Commons.
> Oder wie man spezifische Popups macht (Layout), oder Kombi-Popups mit
> Bildern aus Commons.
>
>> Wenn die Daten aber eher "statischer" Natur sind, die Daten einfach als
>> GeoJSON exportieren und das direkt über das entsprechende Plugin (siehe
>> Tutorials) einbinden, inkl. Popups usw.
>
> Also erst mal HTML-Gerüst, dann die einzubindenden Skripte, Variablen,
> CSS, dann wie man die Daten findet und einbindet und Popups macht, Menüs
> und Doku in der Karte, ...
>
> Mit herzlichem Gruss,
> Markus
>
>> [1] https://leafletjs.com/examples.html
>
>
>
> _______________________________________________
> Talk-de mailing list
> [hidden email]
> https://lists.openstreetmap.org/listinfo/talk-de
>


_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Norbert Kück-2
Hallo Markus,

am 30.12.2018 um 23:13 schrieb Markus:
> ich habe mal etwas "Gerüst" gebaut:
> https://wiki.openstreetmap.org/wiki/DE:OSM_mit_Leaflet
Der Satz "Kenntnisse in JavaScript werden nicht vorausgesetzt..." auf
der Seite ist m.E. sehr mutig. Trotz (oder wegen?) einiger Jahre
Erfahrung mit Leaflet kann ich mir nicht vorstellen, wie das stabil
funktionieren soll.

GeoJSON, das du nutzen möchtest, *IST* JavaScript. Beispielsweise die
Füllung von Popups und die individuelle Initialeinstellungen der Karte
bedeuten zwangsläufig Umgang mit JavaScript. Die Chance zu scheitern und
der Betreuungsbedarf verhalten sich reziprok proportional zum Umfang der
JavaScript-Kenntnisse – auch dann, wenn der Karten-Prototyp als Korsett
(gibt Halt und engt ein) gebaut ist.

Gruß
Norbert

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Markus-2
Hallo Norbert,

> GeoJSON, das du nutzen möchtest, *IST* JavaScript. Beispielsweise die> Füllung von Popups und die individuelle Initialeinstellungen der
Karte> bedeuten zwangsläufig Umgang mit JavaScript.
Herzlichen Dank für den Hinweis!
Ist es so besser?

Wenn Du magst bist Du natürlich gern eingeladen, bei der Entwicklung von
Standardlösungen mitzuhelfen.

Ich wünsche Dir und allen hier einen guten Start ins Neue Jahr :-)
Frieden hier und anderswo, und viele bereichernde Begegnungen...

Mit herzlichem Gruss,
Markus

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Gmbo
In reply to this post by Norbert Kück-2
Hallo Markus,
ich finde deinen Ansatz im Wiki gut, da ich auch zu denen gehöre, die
eine deutsche Beschreibung befürworten, denn die kommt inzwischen in
vielen Bereichen zu kurz.
Aber ich muß auch sagen ohne JavaScript-Kenntnisse wird das schwer.
Leaflet stellt sogar größere Anforderungen an JS da das
objektorientierte Modell dazu benötigt wird.
Du brauchst also zusätzlich Kenntnisse in Objektorientierung und der
Klassen der LeafletAPI.

Werde das Projekt gerne mit unterstützen

Gruß
Gisbert


Am 31.12.18 um 13:27 schrieb Norbert Kück:

> Hallo Markus,
>
> am 30.12.2018 um 23:13 schrieb Markus:
>> ich habe mal etwas "Gerüst" gebaut:
>> https://wiki.openstreetmap.org/wiki/DE:OSM_mit_Leaflet
> Der Satz "Kenntnisse in JavaScript werden nicht vorausgesetzt..." auf
> der Seite ist m.E. sehr mutig. Trotz (oder wegen?) einiger Jahre
> Erfahrung mit Leaflet kann ich mir nicht vorstellen, wie das stabil
> funktionieren soll.
>
> GeoJSON, das du nutzen möchtest, *IST* JavaScript. Beispielsweise die
> Füllung von Popups und die individuelle Initialeinstellungen der Karte
> bedeuten zwangsläufig Umgang mit JavaScript. Die Chance zu scheitern
> und der Betreuungsbedarf verhalten sich reziprok proportional zum
> Umfang der JavaScript-Kenntnisse – auch dann, wenn der Karten-Prototyp
> als Korsett (gibt Halt und engt ein) gebaut ist.
>
> Gruß
> Norbert
>
> _______________________________________________
> Talk-de mailing list
> [hidden email]
> https://lists.openstreetmap.org/listinfo/talk-de



_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Markus-2
Hallo Gisbert, Norbert und Harald,

Willkommen im Neuen Jahr :-)

Und willkommen im Team "HowTo: OSM-Karte mit Leaflet selber bauen"!

> ohne JavaScript-Kenntnisse wird das schwer.
> Leaflet stellt sogar größere Anforderungen an JS da das
> objektorientierte Modell dazu benötigt wird.
> Du brauchst also zusätzlich Kenntnisse in Objektorientierung und der
> Klassen der LeafletAPI.

Oha - da bin ich ja mal gespannt, ob ich das mit Eurer Hilfe so
verstehe, dass am Ende ein HowTo rauskommt...

> Werde das Projekt gerne mit unterstützen

:-)

Ich habe den Code für das "Minimal-Beispiel" noch etwas verschlankt,
damit er wirklich "minimal" wird, und das Ergebnis auf bplaced kopiert.
Funktioniert bestens:
http://markus-b.bplaced.net/mini-1marker/

Nächster Schritt wäre nun, unter
https://wiki.openstreetmap.org/wiki/DE:OSM_mit_Leaflet/HTML-Datei#Marker
das Mini-Beispiel in "ausführlich" zu schreiben, also so, dass man auf
dem Code aufbauend alle weiteren Schritte machen kann.

Also Leaflet auf dem eigenen Server speichern, *
Variablen in einem Block definieren,
vor jedem Aufruf einen Kommentar,
jede Zeile unten in Prosa beschreiben, und Alternativen zeigen.

Ziel ist, dass auch Laien die angewendete Struktur intuitiv verstehen,
und dadurch in die Lage versetzt werden, die entsprechenden Blöcke
"zusammenzukopieren".

Mit herzlichem Gruss,
Markus

* wie geht das:
https://wiki.openstreetmap.org/wiki/DE:OSM_mit_Leaflet/Vorbereitung#Leaflet_herunterladen


_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Norbert Kück-2
In reply to this post by Markus-2
Hallo Markus,

am 31.12.2018 um 18:04 schrieb Markus:
> Ist es so besser?
Ja, so ist es besser.

Hoffentlich ist mein Eindruck falsch: Kann es sein, dass du eine
Anleitung erstellen möchtest, ohne je selbst mit Leaflet experimentiert
zu haben? Dann würde ich empfehlen, zunächst eigene Erfahrungen zu sammeln.

Die Beschreibung erweckt den Eindruck, Anwendungen auf Basis von HTML,
JavaScript und CSS müssten unbedingt auf einen Server hochgeladen werden
um lauffähig zu sein. Tatsächlich funktioniert das auch auf dem lokalen
Rechner (zumindest bei Windows-Maschinen mit gängigen Browsern), ohne
dass man einen Webserver installieren müsste. Alle meine Karten wurden
lokal entwickelt. Onlinezugang braucht es dann nur für externe Quellen
(Kartenkacheln sowie ggf. Leaflet, andere externe Scripte, Daten). FTP
nutze ich erst für die Veröffentlichung.

> Wenn Du magst bist Du natürlich gern eingeladen, bei der Entwicklung von
> Standardlösungen mitzuhelfen.
Vielleicht schaust du dir mal folgende Seite an. Sie enthält Links zu
Kartenanwendungen, die drei unterschiedliche Arten von Datenquellen
ansprechen und die Daten unterschiedlich darstellen. Das ist ein
Ausschnitt aus meinem Portfolio. "Normale" Marker wirst du dort
allerdings nicht sehen, weil sie m.E. zu sehr den Kartenhintergrund
verkleistern.
https://osm.nkbre.net

Daraus abgeleitet gibt es ein paar Prototypen. Aus dem folgenden Modell
wurden von Personen ohne Leaflet-Kenntnis bereits funktionierende Karten
erstellt:
https://osm.nkbre.net/x/rm_media/nk-rm_media.html
Übrigens: Der eingebundene Ton deutet NICHT auf meine Vorliebe für
Militärkapellen. Die Europahymne gespielt von US-Soldaten ist Publik
Domain. :-)
Wenn du dich mit dem Prototypen befassen willst, bekommst du Zugang zu
einem ZIP-File, das auch etwas Erläuterung enthält.

Die Idee, sich eine Karte aus entsprechenden Blöcken
"zusammenzukopieren", halte ich für verwegen. Es bestehen immer einige
Abhängigkeiten, die bei Nichtbeachtung den Showstopper geben. Möglich
wäre wohl eine bessere Kapselung einzelner Module. Das ist aber
(derzeit) nicht mein Weg. Ich bevorzuge funktionierende Prototypen, die
nur Anpassungen in der Oberfläche, Starteinstellungen und Daten im
passenden Formaten benötigen.

Gruß
Norbert

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Markus-2
N'Abend Norbert,

> Kann es sein, dass du eine Anleitung erstellen möchtest

Ja - wobei: eigentlich wollte ich nur ein paar Karten erstellen und
veröffentlichen. Also hatte ich mich auf die Suche nach einem
deutschsprachigen HowTo gemacht, aber keines gefunden. Zwar gibt es
viele Beispiele und man kann auch deren Quellcode sehen, aber ich bin
kein Programmierer. Und als Anwender erschliesst sich mir die interne
Logik des Codes nicht wirklich, und noch weniger kann ich im Vergleich
der verschiedenen Lösungen die verbindenden Schnittmengen erkennen und
den für mich passenden Teil herausarbeiten und nutzen.

Und da ich davon ausgehe, dass ich nicht der Einzige bin, sondern noch
viele andere einen Bedarf haben, Geodaten zu visionakisieren, habe ich
beschlossen, einen Teil meiner Zeit in die Doku im Wiki zu investieren.

> ohne je selbst mit Leaflet experimentiert zu haben?

Ich glaube, es ist effizienter, Synergien zu schaffen,
statt jeden das Rad neu erfinden zu lassen.
Und ja, ich werde vermutlich noch oft experimentieren, bis wir gemeinsam
eine 80/20 Lösung für die wichtigsten UseCases gefunden haben

> unbedingt auf einen Server hochgeladen

Das ist eine Möglichkeit, Karten zu teilen.

Lokal zu testen wäre vermutlich effizienter? Dann müsste man nicht jede
Änderung erst hochladen, um den Erfolg zu prüfen. Wie geht das?

>> Entwicklung von Standardlösungen
>
> Kartenanwendungen, unterschiedliche Arten von Datenquellen
> Daten unterschiedlich darstellen
> https://osm.nkbre.net

Danke, gefällt mir.
Der Code sieht (wie bei vielen anderen auch) recht individuelle aus.

Den meisten Anwendern würde /eine/ Musterlösung reichen,
bei der sie nur Variablen füllen und Codeblöcke kopieren müssten.

> Wenn du dich mit dem Prototypen befassen willst, bekommst du Zugang zu
> einem ZIP-File, das auch etwas Erläuterung enthält.

Vielleicht kannst Du das ja auch im Wiki veröffentlichen?

> Die Idee, sich eine Karte aus entsprechenden Blöcken
> "zusammenzukopieren", halte ich für verwegen.

Ich hoffe, dass wir, wenn hier einige Erfahrene ihr Wissen einbringen,
die Idee realisieren können.

> Möglich wäre wohl eine bessere Kapselung einzelner Module.

Vielleicht wissen die anderen, was Du damit meinst?
Falls nicht: hast Du mal ein Beispiel?

> Ich bevorzuge funktionierende Prototypen, die nur Anpassungen
> in der Oberfläche, Starteinstellungen und Daten im
> passenden Formaten benötigen.

Klingt gut!

Mit herzlichem Gruss,
Markus

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

dieterdreist


sent from a phone

> On 1. Jan 2019, at 21:15, Markus <[hidden email]> wrote:
>
> Lokal zu testen wäre vermutlich effizienter? Dann müsste man nicht jede
> Änderung erst hochladen, um den Erfolg zu prüfen. Wie geht das?


einfach die html Datei im Browser öffnen. Wenn Du Geojson aus weiteren Dateien laden willst geht das so allerdings vermutlich nicht (Sicherheitsfeature), dann müsstest Du z.B. lokal einen Webserver starten.
Gruß, Martin
_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Norbert Kück-2
Hallo,

am 02.01.2019 um 01:03 schrieb Martin Koppenhoefer:
> einfach die html Datei im Browser öffnen. Wenn Du Geojson aus
> weiteren Dateien laden willst geht das so allerdings vermutlich
> nicht
Doch, geht. Leaflet-Beispiel zeigt, wie:
https://leafletjs.com/examples/geojson/

Gruß
Norbert

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Norbert Kück-2
In reply to this post by Markus-2
Hallo Markus,

am 01.01.2019 um 21:15 schrieb Markus:
>> Die Idee, sich eine Karte aus entsprechenden Blöcken
>> > "zusammenzukopieren", halte ich für verwegen.
> Ich hoffe, dass wir, wenn hier einige Erfahrene ihr Wissen einbringen,
> die Idee realisieren können.
Ok, dann wünsche ich viel Erfolg. Ein Projekt mit dem Ansatz
"Leaflet-Karte als Lego" kann meins nicht sein.

Gruß
Norbert


_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Gmbo
Am 02.01.19 um 10:53 schrieb Norbert Kück:
> Ok, dann wünsche ich viel Erfolg. Ein Projekt mit dem Ansatz
> "Leaflet-Karte als Lego" kann meins nicht sein.

Den Ansatz Lego sehe ich da aber nicht direkt,  auch wenn gerade Leaflet
durch das Konzept mit vielen Plugins schon an ein zusammenstecken erinnert.

Aber eine Deutsche Anleitung mit lauffähigen Beispielen wäre schon eine
gute Sache um den Einstieg zu erleichtern.

Habe da wenig gut lauffähiges gesehen. Noch schwerer ist einen passenden
Ansatz mit dem Umgang mit OSM-Daten oder anderen externen Daten zu finden.

Wenn dann mal ein gutes Beispiel im Netz auftaucht, fehlt da einiges an
Erklärung oder es wurde mit einer zu alten Version gebaut.

Das Versionsproblem ist bei OpenLayers aber größer.

Von daher werde ich schon versuchen das ganze zu unterstützen.

Gruß

Gisbert



_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

dieterdreist
In reply to this post by Norbert Kück-2


sent from a phone

> On 2. Jan 2019, at 10:40, Norbert Kück <[hidden email]> wrote:
>
> Doch, geht. Leaflet-Beispiel zeigt, wie:
> https://leafletjs.com/examples/geojson/


mit lokalen Dateien hat mein Browser das immer blockiert wegen der CORS directive. Am einfachsten ist es, man startet einen simplen webserver in dem directory, um das fürs lokale Testen zu umgehen.


Gruß, Martin
_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Norbert Kück-2
Hallo Martin,

am 02.01.2019 um 17:06 schrieb Martin Koppenhoefer:
>> On 2. Jan 2019, at 10:40, Norbert Kück <[hidden email]> wrote:
>>>
>>> Doch, geht. Leaflet-Beispiel zeigt, wie:
>>> https://leafletjs.com/examples/geojson/
>
> mit lokalen Dateien hat mein Browser das immer blockiert wegen der
> CORS directive.
Missverständnis? Wenn die Dateien des verlinkten Beispiels auf deiner
Festplatte liegen, gibt es kein cross origin.

Gruß
nk

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

dieterdreist
Am Mi., 2. Jan. 2019 um 17:25 Uhr schrieb Norbert Kück <[hidden email]>:

> > mit lokalen Dateien hat mein Browser das immer blockiert wegen der
> > CORS directive.
> Missverständnis? Wenn die Dateien des verlinkten Beispiels auf deiner
> Festplatte liegen, gibt es kein cross origin.




bei Safari und Chrome werden die lokalen geojson Dateien bei mir nur
geladen, wenn ich einen Webserver starte, sonst geht es nur im Firefox, die
bei ersteren bekomme ich "Cross origin requests are only supported for
HTTP." (allerdings mit mapbox-gl-js), bei dem oben verlinkten
Leaflet-Beispiel bekomme ich "Origin null is not allowed by
Access-Control-Allow-Origin" und "Cross-origin script load denied by
Cross-Origin Resource Sharing policy.", aber nur, wenn ich die Datei lokal
ausführe, bei der Datei auf dem leaflet Server gibt es keine Probleme.

Gruß,
Martin
_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Norbert Kück-2
Danke für die Info.
Wie schön, dass die Browser wieder unterschiedliche "Standards" haben.
Dabei sollten doch gerade <script src="…"></script> (das nutzt das
Leaflet-Beispiel) etc. nicht beschränkt werden.
Gruß
nk

Am 02.01.2019 um 19:14 schrieb Martin Koppenhoefer:

> Am Mi., 2. Jan. 2019 um 17:25 Uhr schrieb Norbert Kück <[hidden email]>:
>
>>> mit lokalen Dateien hat mein Browser das immer blockiert wegen der
>>> CORS directive.
>> Missverständnis? Wenn die Dateien des verlinkten Beispiels auf deiner
>> Festplatte liegen, gibt es kein cross origin.
>
>
>
>
> bei Safari und Chrome werden die lokalen geojson Dateien bei mir nur
> geladen, wenn ich einen Webserver starte, sonst geht es nur im Firefox, die
> bei ersteren bekomme ich "Cross origin requests are only supported for
> HTTP." (allerdings mit mapbox-gl-js), bei dem oben verlinkten
> Leaflet-Beispiel bekomme ich "Origin null is not allowed by
> Access-Control-Allow-Origin" und "Cross-origin script load denied by
> Cross-Origin Resource Sharing policy.", aber nur, wenn ich die Datei lokal
> ausführe, bei der Datei auf dem leaflet Server gibt es keine Probleme.
>
> Gruß,
> Martin
> _______________________________________________
> Talk-de mailing list
> [hidden email]
> https://lists.openstreetmap.org/listinfo/talk-de
>

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Markus-2
In reply to this post by Markus-2
Hallo Gisbert,

danke für Dein zweites Beispiel und die Doku.
Habe ich noch etwas ergänzt/formatiert:
https://wiki.openstreetmap.org/wiki/DE:OSM_mit_Leaflet/Vorbereitung

Norberts Anregung folgend, will ich gern etwas experimentieren...
Was wäre eine sinnvolle Verzeichnisstruktur?

Passt das so? oder gibt es etwas Sinnvolleres?
- Arbeitsverzeichnis
-- Leaflet
--- images
-- Beispiel 1
-- Beispiel 2
-- Beispiel x

Wie muss ich die Pfade z.B. "leaflet/leaflet.css" anpassen?

Mit herzlichem Gruss,
Markus

PS: warum heissen die HTML-Dateien immer "index.html"?
Wenn man mehrere offen hat muss man höllisch aufpassen...


Am 01.01.2019 um 18:08 schrieb Markus:

> Ich habe den Code für das "Minimal-Beispiel" noch etwas verschlankt,
> damit er wirklich "minimal" wird, und das Ergebnis auf bplaced kopiert.
> Funktioniert bestens:
> http://markus-b.bplaced.net/mini-1-marker/
>
> Nächster Schritt wäre nun, unter
> https://wiki.openstreetmap.org/wiki/DE:OSM_mit_Leaflet/HTML-Datei#Marker
> das Mini-Beispiel in "ausführlich" zu schreiben, also so, dass man auf
> dem Code aufbauend alle weiteren Schritte machen kann.
>
> Also Leaflet auf dem eigenen Server speichern, *
> Variablen in einem Block definieren,
> vor jedem Aufruf einen Kommentar,
> jede Zeile unten in Prosa beschreiben, und Alternativen zeigen.
>
> Ziel ist, dass auch Laien die angewendete Struktur intuitiv verstehen,
> und dadurch in die Lage versetzt werden, die entsprechenden Blöcke
> "zusammenzukopieren".

_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de
Reply | Threaded
Open this post in threaded view
|

Re: OSM-Karte mit Leaflet selber bauen

Gmbo
Am 02.01.19 um 19:56 schrieb Markus

> Norberts Anregung folgend, will ich gern etwas experimentieren...
> Was wäre eine sinnvolle Verzeichnisstruktur?
>
> Passt das so? oder gibt es etwas Sinnvolleres?
> - Arbeitsverzeichnis
> -- Leaflet
> --- images
> -- Beispiel 1
> -- Beispiel 2
> -- Beispiel x

>
> Wie muss ich die Pfade z.B. "leaflet/leaflet.css" anpassen?
>
> Mit herzlichem Gruss,
> Markus
>
> PS: warum heissen die HTML-Dateien immer "index.html"?
> Wenn man mehrere offen hat muss man höllisch aufpassen...

index.html ist die default-Seite in einem Standard-Webspace. Würde also
aufgerufen wenn du www.meine-seite.de aufrufst.

Du kannst aber mit www.meine-seite.de/Beispiel_1.html auch die Seite
direkt aufrufen, dann wäre index.html außen vor.

du kannst die Beispiele nennen wie du willst. Wenn die Seite die Endung
.html hat wird sie der Standartbrowser laden.
Beispiel_1.html
Beispiel_2.html
Beispiel_x.html
Wenn die im Arbeitsverzeichnis stehen brauchst du die Pfade eben nicht
anpassen.
Wenn du für jedes Beispiel ein neues Verzeichnis anlegst musst du
z.B. "../leaflet/leaflet.css" anpassen

Gruß

Gisbert




_______________________________________________
Talk-de mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-de