Bestehende Routen in die Website einbetten

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/282545213#map=15/47.4256/10.9977&layers=CD angezeigt, aber wenn ich diese in die Website einbette, dann erscheinen diese nicht mehr.

Beispiel: http://www.auf-die-zugspitze-wandern.info/tour-3-der-weg-durchs-hoellental/

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!

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

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

Hallo Harald,

vielen Dank für deinen Hinweis.

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

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

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

http://brouter.de/brouter-web/#zoom=15&lat=47.4366&lon=11.01203&layer=OpenStreetMap&lonlats=10.987315,47.422121|11.023879,47.437667&nogos=&profile=trekking&alternativeidx=0&format=geojson

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

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/zugspitze-h4_40521#13/47.4244/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.

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.