Radwege (OpenStreetMap) in eigene Seite einbinden

[Linuchs]

Moin,

unter meinen Kalendern gibt es Radwege mit Events, z.B. Elbe Radweg

Leider kenne ich das Zauberwort nicht, wie man die in OSM vorhandenen Radwege zeigt, ich vermute, es ist die Art der Ziegel (tiles)?

  var map = L.map("map").setView([52.133,11.617], );
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  {attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,  <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}
  ).addTo(map);

Ich habe opencyclemap.org gefunden, aber das ist übertrieben wuselig. Und die Syntax zum Aufrufen ist mir nicht klar.

Gruß, Linuchs

[Robert B.]

Hallo @@Linuchs,

unter meinen Kalendern gibt es Radwege mit Events, z.B. Elbe Radweg

sehr schick!

Leider kenne ich das Zauberwort nicht, wie man die in OSM vorhandenen Radwege zeigt, ich vermute, es ist die Art der Ziegel (tiles)?

Ich glaube, dass es ein Layer ist:

| Elbe normal | https://www.openstreetmap.org/#map=10/53.1266/10.9918 | Elbe als Radfahrerkarte | https://www.openstreetmap.org/#map=10/53.1266/10.9918&layers=C

Viele Grüße
Robert

[Linuchs]

Ich glaube, dass es ein Layer ist:

Ja, als Parameter zur URL. Aber wie fügt man ihn innerhalb der eigenen Webseite hinzu? Was es so gibt, wird HIER gezeigt. Aber leider kein Code-Beispiel zu finden.

Und der Code von http://www.opencyclemap.org/ enthält keinen layer namens cycle. Wonach muss ich suchen?

[JürgenB]

Hallo,code text here

ich verwende auf meinen Seiten die cycle von Thunderforest:

var osmcycle = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey='+OSM_Cycle_Api_Key, {
	maxZoom: 22,
	attribution: 'Map data &copy; <a href="https://www.thunderforest.com/" target="_blank">OpenCycleMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>'
});

Du musst dir allerdings bei Thunderforest einen API-Key besorgen. Ansehen kannst du sie dir z.B. hier, und dann über den Kartenwähler rechts oben die Cycle wählen.

Wie man mehrer Karten mit Kartenwähler einbindet, habe ich hier mal angefangen aufzuschreiben.

Gruß
Jürgen

[Linuchs]

Hallo Jürgen,

genau das, was ich suche. In den nächsten Tagen arbeite ich mich da ein. Danke.

Gruß, Linuchs

[Linuchs]

ich möchte dieses mouseover für eine Polylinie nutzen entsprechend deiner Seite, bekomme beim Elbe-Radweg aber den Fehler

TypeError: e.sourceTarget is undefined[Weitere Informationen]

Was ist falsch? Popup wird angezeigt

  var polyline = L.polyline([
[53.8506,8.62472],
[53.9145,9.12869],
[53.9145,9.12869],
... 
[50.162,14.75],
[50.203,14.84],
[50.186,15.043]
  ]
  ,{color:'red', weight:3, opacity:0.9})
  .addTo(map)
  .bindPopup("Elbe-Radweg")
  .on("mouseover", function(e) { 
    e.sourceTarget.setStyle({color: "red"})
  })
  .on("mouseout", function(e) { 
    e.sourceTarget.setStyle({color: "green"})
  });

[JürgenB]

Hallo,

ich kann den Fehler nicht nachvollziehen. Ich habe deinen Code-Schnipsel in meine Seite kopiert, die ... entfernt und konnte das Popup bei klick sehen und bei Mouseover den Farbwechsel.

Gruß
Jürgen

[marctrix]

Hej Linuchs,

genau das, was ich suche. In den nächsten Tagen arbeite ich mich da ein. Danke.

Lizenzen sind geklärt?

Marc

[JürgenB]

Hallo Marc,

die Nutzung der meisten OSM-Karten ist frei, eben open, man muss nur ein entsprechendes Copyright angeben. Einige Anbieter, wie z.B. Thunderforest, verlangen allerdings einen Key. Daher habe ich deren Karten, obwohl sie mMn sehr schön aussehen, nicht in meinem Tutorialentwurf aufgenommen.

Gruß
Jürgen