Linuchs: Radwege (OpenStreetMap) in eigene Seite einbinden

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

  1. 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

    1. 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?

  2. 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

    1. Hallo Jürgen,

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

      Gruß, Linuchs

      1. 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"})
          });
        
        1. 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

      2. Hej Linuchs,

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

        Lizenzen sind geklärt?

        Marc

        1. 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