Bestehende Routen in die Website einbetten

SchneiderS · 2015-05-20 16:45:09

Hall zusammen,

meine Frau und ich lieben Wanderungen und haben zur Zugspitze einige Berichte veröffentlicht: http://www.auf-die-zugspitze-wandern.info/

Jetzt möchte ich die Seite noch Benutzerfreundlicher gestalten und jeweilige Karten für die fünf Routen implementieren. Einige Routen werden zwar in https://www.openstreetmap.org/way/28254 … &layers=CD angezeigt, aber wenn ich diese in die Website einbette, dann erscheinen diese nicht mehr.

Beispiel: http://www.auf-die-zugspitze-wandern.in … oellental/

Kann mir da jemand einen Tipp geben, wie ich bestehende routen in die Website einfüge? Stellt Openstreetmap eigentlich auch Höhenprofile bereit?

Vielen Dank für deine Hilfe!

Harald Hartmann · 2015-05-20 17:07:38

SchneiderS wrote:

Kann mir da jemand einen Tipp geben, wie ich bestehende routen in die Website einfüge?

Hierzu würde ich dir uMap (wiki) empfehlen. Dort kannst du eine "Karte" erstellen, den Weg selbst einzeichnen (inkl. wichtiger Wegpunkte) oder aber auch ein GPX hochladen, Farbe auswählen, Hintergrundkarte auswählen, usw. Letztendlich kannst du diese Karte dann als iframe einbinden

SchneiderS wrote:

Stellt Openstreetmap eigentlich auch Höhenprofile bereit?

nein. Die meistens Karten um Openstreetmap herum nutzen dazu meist die SRTM-Daten

Last edited by Harald Hartmann (2015-05-20 17:08:46)

SchneiderS · 2015-05-20 17:34:16

Hallo Harald,

vielen Dank für deinen Hinweis.

Wenn ich dich richtige verstehe, kann man bestehende GPS Tracks also nicht in eine Website einbinden?

Harald Hartmann · 2015-05-20 17:58:47

SchneiderS wrote:

Wenn ich dich richtige verstehe, kann man bestehende GPS Tracks also nicht in eine Website einbinden?

Hmm, mir stellt sich gerade die Frage, was du darunter verstehst? Wie ich oben beschrieben habe, kann man durchaus bestehende GPS Tracks (meistens ja GPX Dateien) z.B. über uMap in eine Webseite einbinden. Wenn du dich ein bisschen mit HTML und JavaScript auskennst, kannst du es sogar ohne eine "Drittseite" machen, z.B. mit dem Leaflet oder OpenLayers Framework

Harald Hartmann · 2015-05-20 18:04:00

Hier noch zwei Beispiele: per Leaflet Framework und Overpass und per uMap mit iframe eingebunden

4rch · 2015-05-20 18:06:41

Du kannst mit dem Brouter eine GPX-Datei erstellen und diese dann in Umap einbinden.

http://brouter.de/brouter-web/#zoom=15& … at=geojson

TSM1904 · 2015-05-20 18:53:10

Ich glaube er meint Routen, die schon in OSM eingetragen sind und bspw. hiermit auch visualisiert werden.

TheFive · 2015-05-20 19:23:53

Ich habe mal 5 Minuten gebastelt.

In Kurzform: An der Zuspitze hab ich mir die Relation mit der ref = "H 4" rausgesucht.

In Overpass Turbo sieht das so aus:

http://overpass-turbo.eu/s/9uU
(bitte das [out:json] rausnehmen)

Das ist aber nicht in eine Website einbettbar.

Also hab ich die Query als Kompaktes QL Format exportiert und in uMap eingebunden.
(Wichtig, der Export setzt den Rand der Abfrage auf den sichtbaren Bereich, also in den gewünschten Bereich zoomen)

Das war dieser Link:

http://overpass-api.de/api/interpreter?data=%5Btimeout%3A25%5D%3B%28node%5B%22ref%22%3D%22H%204%22%5D%2847%2E41124550000924%2C10%2E964183807373047%2C47%2E44770982681244%2C11%2E04452133178711%29%3Bway%5B%22ref%22%3D%22H%204%22%5D%2847%2E41124550000924%2C10%2E964183807373047%2C47%2E44770982681244%2C11%2E04452133178711%29%3Brelation%5B%22ref%22%3D%22H%204%22%5D%2847%2E41124550000924%2C10%2E964183807373047%2C47%2E44770982681244%2C11%2E04452133178711%29%3B%29%3Bout%20body%3B%3E%3Bout%20skel%20qt%3B%0A

Den ich vorne noch modifiziert habe auf HTTPS.

Das ganze sieht in uMap dann so aus:

http://umap.openstreetmap.fr/de/map/zug … 44/11.0100

Diese Karte kann jeder editieren, so das man sich die mal anschauen kann.

Fehlt noch ?

Ja wie binde ich eine uMap in meine eigene Seite ein.

Hab ich spontan nicht gefunden wie das geht, aber hier ist ein Beispiel:
https://bzgrafik.atavist.com/bernvegan#chapter-134363
Scheint nicht so schwer zu sein mit nem "iframe".

Christoph

P.S. Wenn man mehrere Wege haben möchte, macht man sich mehrere Layer in uMap.

P.S.S. Alternativ kann man mit Overpass die Daten der Route auch exportieren, und diese Fix wieder importieren, da sich die Wege ja nicht so oft ändern werden. Damit spart man sich den Schritt, dieses HTTPS Konstrukt in uMap einzubinden.

Last edited by TheFive (2015-05-20 19:26:16)

4rch · 2015-05-20 19:33:36

TheFive wrote:

Ja wie binde ich eine uMap in meine eigene Seite ein.
Hab ich spontan nicht gefunden wie das geht, aber hier ist ein Beispiel:
https://bzgrafik.atavist.com/bernvegan#chapter-134363
Scheint nicht so schwer zu sein mit nem "iframe".

in UMap: linke Navileiste --> Reiter "Mehr" --> Teilen-Symbol

Ansonsten: Klar kann man mit Overpass Routen in UMap einbinden, das erfordert aber schon wieder mehr Kenntnisse und Einarbeitungszeit. Auf 5 Minuten schafft man das vermutlich nicht, wenn man sich mit OSM und den Tools nicht auskennt. Der GPX-Export aus Brouter ist da mMn wesentlich einfacher.

Last edited by 4rch (2015-05-20 19:42:48)

Announcement

#1 2015-05-20 16:45:09

Bestehende Routen in die Website einbetten

#2 2015-05-20 17:07:38

Re: Bestehende Routen in die Website einbetten

#3 2015-05-20 17:34:16

Re: Bestehende Routen in die Website einbetten

#4 2015-05-20 17:58:47

Re: Bestehende Routen in die Website einbetten

#5 2015-05-20 18:04:00

Re: Bestehende Routen in die Website einbetten

#6 2015-05-20 18:06:41

Re: Bestehende Routen in die Website einbetten

#7 2015-05-20 18:53:10

Re: Bestehende Routen in die Website einbetten

#8 2015-05-20 19:23:53

Re: Bestehende Routen in die Website einbetten

#9 2015-05-20 19:33:36

Re: Bestehende Routen in die Website einbetten

Board footer