Rudi Ratlos: Google Maps - ÖPNV Layer einbinden

Hallo,

ich habe eine Karte und möchte den Layer für den öffentlichen Nahverkehr einbinden:
var transitLayer = new google.maps.TransitLayer(); transitLayer.setMap(map);

Die werden nicht gezeigt. Zum Vergleich: Radwege kann ich sehen
var bikeLayer = new google.maps.BicyclingLayer(); bikeLayer.setMap(map);

Erklärung könnte sein, dass die Stadt X nicht aufgeführt ist bei den Städten mit ÖPNV.

Aber die Stadt Grenzach-Wyhlen ist auch nicht verzeichnet. Wenn ich dort den ÖPNV Layer aufrufe und die Karte 300 km weiterschiebe, sehe ich Buslinien in dem gewünschten Ort.

Wie bekommt Grenzach-Wyhlen den LAyer? Ich werde aus dem Quellcode nicht schlau.

Rudi

  1. Wie bekommt Grenzach-Wyhlen den LAyer?

    Der dort gezeigte ÖPNV-Layer ist jener von Open Street Map.

    Du kannst über eine Google Karte neue eine mapTypeId legen - wie das geht, ist hier beschrieben:
    http://wiki.openstreetmap.org/wiki/Google_Maps_Example

    Du kannst da natürlich auch den ÖPNV-Layer von OSM verwenden.

    1. meine sorgfältige Antwort von 19:00 Uhr ist nicht abgeschickt. Durch falsche Tastenkombination wurde der Tab in Opera entfernt und war nicht wieder herzustellen (anders als im Firefox).

      In Kürze: Habe das OpenStreetMap (OSM) Muster ausprobiert, es zeigt mir eine Weltkarte ohne ÖPNV. Wie ich einen OSM LAyer als png- Datei erzeuge nur mit den ÖPNV Linien, ist mir unklar.

      Ist das der richtige Weg? Rote Linien auf durchsichtiger Folie, die ich dann auf die Google Karte lege?

      Schade, dass alle Mühe der Antwort verloren ist. Aber für einen zweiten Roman fehlte die Zeit.

      Rudi

      1. In Kürze: Habe das OpenStreetMap (OSM) Muster ausprobiert, es zeigt mir eine Weltkarte ohne ÖPNV. Wie ich einen OSM LAyer als png- Datei erzeuge nur mit den ÖPNV Linien, ist mir unklar.

        Dafür gibts fertige Layer.

        Ist das der richtige Weg? Rote Linien auf durchsichtiger Folie, die ich dann auf die Google Karte lege?

        Ja, aber du nimmst die bereits fertigen Linien die dir OSM (genauer gesagt ÖPNVKarte) bereitstellt:

        Ein Blick in den Quelltext genügt:

        layerTiles = new OpenLayers.Layer.XYZ("Öpnv Welt", "http://tile.memomaps.de/tilegen/${z}/${x}/${y}.png", {numZoomLevels: 19,displayInLayerSwitcher:false,buffer:0,transitionEffect:'resize'});

        Wie du den URL dieses Tile-Generators in Google Maps verwendest, sollte klar sein.

        z ist der Zoomfaktor und x/y sind die Koordinaten des Tiles (das sind kleine Geokoordinaten :)).

        1. Hallo suit,

          danke für deine Bemühung, mir das zu erklären. Es hat noch nicht gefruchtet.

          Folgender Code ergibt eine Karte von Bad Zwischenahn plus Kreis mit 9 km Radius:

          <div id="map"></div>  
          <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>  
          <script>  
          /* Google */  
          var marker;  
          var map;  
            
          function ini_google() {  
            var mapOptions = {  
             zoom:      11  
            ,mapTypeId: google.maps.MapTypeId.ROADMAP  
            ,center:    new google.maps.LatLng(53.1853,8.02872)  
            };  
            map = new google.maps.Map(document.getElementById("karte"), mapOptions);  
            
            
          var marker = new google.maps.Marker({  
          position: new google.maps.LatLng(53.1853,8.02872),  
          map:    map,  
          title:  "D-26160 Bad Zwischenahn (Mitte des Ortes/Ortsteils)",  
          icon:   "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|FFFFFF|000000",  
          zIndex: 0  
          });  
            
            
          //https://developers.google.com/maps/documentation/javascript/reference#Circle  
          //Add a Circle overlay to the map, radius in m / Opacity 1=voll 0=transparent.  
            var circle = new google.maps.Circle({  
             map: map  
            ,radius: 9000  
            ,strokeColor: '#ff0000'  
            ,strokeWeight: 1  
            ,fillColor: '#ffff00'  
            ,fillOpacity: 0.1  
            ,zIndex: 1  
            });  
            circle.bindTo('center', marker, 'position');  
          
          

          Nun füge ich aus der von dir verlinkten ÖPNV-Karte dieses hinzu:

          // OEPNV  
            layerTiles = new OpenLayers.Layer.XYZ("&Ouml;pnv Welt", "http://tile.memomaps.de/tilegen/${z}/${x}/${y}.png", {numZoomLevels: 19,displayInLayerSwitcher:false,buffer:0,transitionEffect:'resize'});  
            layerStops = new OpenLayers.Layer.Vector("Haltestellen");  
            markerLayer = new OpenLayers.Layer.Markers("Positionen");  
            map.addLayers([layerTiles,layerStops,markerLayer]);  
          
          

          Um ehrlich zu sein, ich wundere mich, dass die alte Fassung ohne Fehler weiterhin angezeigt wird, natürlich ohne ÖPNV. Ich habe leider keine Ahnung, wie die Werte ${z}/${x}/${y} gefüllt werden. Reden wir vielleicht von zwei getrennten Welten - hier Google, dort OpenStreetmaps?

          Ich verstehe die Werte so:
          z = 11
          x = 8.02872
          y = 53.1853
          Wenn ich die in die Grafik einsetze:
          http://tile.memomaps.de/tilegen/${11}/${8.02872}/${53.1853}.png

          kommt die Fehlermeldung:
          "... können Kartenausschnitt nicht liefern ..."

          Mir ist es ja schnuppe, wie Programme ihre Parameter haben wollen, aber sowas Seltsames habe ich noch nicht gesehen.

          Rudi

          1. Mir ist es ja schnuppe, wie Programme ihre Parameter haben wollen, aber sowas Seltsames habe ich noch nicht gesehen.

            Ein kartesisches Koordinatensystem mit Ganzzahlen? Wirklich sehr seltsam :D

            Ich verstehe die Werte so:
            z = 11
            x = 8.02872
            y = 53.1853
            Wenn ich die in die Grafik einsetze:
            http://tile.memomaps.de/tilegen/${11}/${8.02872}/${53.1853}.png

            Dein Verständnisproblem liegt darin begründet, dass die Parameter keine Geokoordinaten sind :)

            Vergleich mal bitte
            http://tile.memomaps.de/tilegen/2/2/1.png
            mit
            http://tile.memomaps.de/tilegen/2/2/2.png

            1. Dein Verständnisproblem liegt darin begründet, dass die Parameter keine Geokoordinaten sind :)

              Vergleich mal bitte
              http://tile.memomaps.de/tilegen/2/2/1.png
              mit
              http://tile.memomaps.de/tilegen/2/2/2.png

              So weit war ich gestern auch schon. Und auch deine Beispiele liefern NICHT die extrahierten Buslinien.

              Ist nicht böse gemeint die Frage: Hast du mein Problem verstanden? Ich brauche keine Landkarte, die habe ich schon. Ich brauche nur die Bus- und Bahnlinien, die ich auf die Karte legen möchte.

              So wie ich den Kreis auf die Karte gelegt habe, ohne nochmals eine Karte zu generieren.

              Hast du einen Link, aus dem ich die Koordinaten erkennen kann und der mir die gesuchte "Folie" liefert?

              Rudi

              1. Ist nicht böse gemeint die Frage: Hast du mein Problem verstanden? Ich brauche keine Landkarte, die habe ich schon. Ich brauche nur die Bus- und Bahnlinien, die ich auf die Karte legen möchte.

                Ja, das ist mir schon klar: du willst die Google-Karte verwenden und darauf die Buslinien anzeigen.

                Ich habe dir die entsprechende Doku-Seite von verlinkt in der beschrieben wird, wie man benutzerdefinierte Kartenlayer über bestehende Google-Karten legt. Im Beispiel wird über eine bestehende Google-Karte 1:1 eine OSM-Karte gelegt wobei die Tiles von OSM bezogen werden, exakt so wie bei dem Grenzach-Wyhlen-Beispiel - da wird über die Google-Karte eine OSM-Karte gelegt.

                Eine mögliche Quelle für entsprechende habe ich dir auch genannt, ob diese deinen Bedürfnissen entspricht, weiß ich nicht - das von dir genannte Beispiel ist unzweifelhaft OSM/ÖPNV-Karte über eine Google Karte gelegt. Es gibt aber auch andere Mütter mit schönen Töchtern. Tileserver gibt es wie Sand am Meer - auch Benutzerdefinierbare wie z.B. Leaflet.

                So wie ich den Kreis auf die Karte gelegt habe, ohne nochmals eine Karte zu generieren.

                Die Karte wird _immer_ nochmals generiert, die Google-Maps-API liest die Daten die du ihr gibst und erzeugt daraus eigene Tiles die sie dir wieder schickt, auch wenn die gelieferten Tiles die eigentliche Google-Karte zu 100% überdecken - das einzige was man "drüberlegen" kann, ohne das Tiles erzeugt werden, sind Marker die am Client behandelt werden - aber alles andere (z.B. Polylines) wird in Form von Tiles vom Google-Server ausgeliefert.

                Hast du einen Link, aus dem ich die Koordinaten erkennen kann und der mir die gesuchte "Folie" liefert?

                Grenzach-Wyhlen? Sicher doch:

                http://tile.memomaps.de/tilegen/12/2135/1431.png
                http://otile4.mqcdn.com/tiles/1.0.0/osm/12/2135/1431.png

                Wenn du die Google-Karte haben willst und nur die Buslinien oder ähnliches drauf anzeigen lassen willst, empfiehlt sich ggf. etwas wie hier:

                http://pt.openmap.lt/12/2135/1431.png

                1. Nachtrag:
                  Mach dich vorher schlau, ob du die Tileserver überhaupt einfach so nutzen darfst ;)

                2. Hallo suit,

                  Die Karte wird _immer_ nochmals generiert, die Google-Maps-API liest die Daten die du ihr gibst und erzeugt daraus eigene Tiles die sie dir wieder schickt, auch wenn die gelieferten Tiles die eigentliche Google-Karte zu 100% überdecken - das einzige was man "drüberlegen" kann, ohne das Tiles erzeugt werden, sind Marker die am Client behandelt werden - aber alles andere (z.B. Polylines) wird in Form von Tiles vom Google-Server ausgeliefert.

                  ich glaube, dass Polylines auch im Browser gezeichnet werden. Ich erkenne das daran, dass bei schlechter Netzanbindung (z.B. Smartphone in der "Pampa") die Linien vor der Kartengrafik erscheinen. Unter "Seiteninformationen" finde ich die Karten-PNGs ohne Linien.

                  Bei Spezialkarten, wie der Cycle-Map oder der ÖPNV-Map sind die Linien allerdings Teil der Kartengrafiken.

                  Gruß, Jürgen

              2. Hallo Rudi,

                Google Maps überzieht die Welt mit rechteckigen Kartenausschnitten. Wenn du  einen Kartenausschnitt zeigen möchtest, sucht Google nach dem entsprechenden Tiles. Dazu übergibt die API den ZOOM-Level und die "Nummer" des Tiles als (x,y) Koordinate.

                Wenn du sehen willst wie ich in meinem GPX-Viewer OSM-Karten einbinde, musst du im Quelltext die Funktion "JB.Map" suchen.

                Gruß, Jürgen