mehrere gpx-Dateien auf einer Ebene

Communities Deutschland (Germany)
1

Hallo Alle,

mit

var Parken = new L.LayerGroup();

L.marker([50.4212, 9.6205], {icon: ParkplatzIcon}).bindPopup(‘Auerberghalle’).addTo(Parken);
L.marker([50.4331, 9.6818], {icon: ParkplatzIcon}).bindPopup(‘Teichparkplatz’).addTo(Parken);
…

usw. habe ich es geschafft, dass Leaflet mir alle Parkplätze im Kartenbereich en bloc anzeigt.

Auch wie einzelne GPX-Dateien angezeigt werden, habe ich herausgefunden.

Gerne würde ich mit mehreren GPX-Dateien auch so verfahren.
Auf eine Ebene packen und en bloc anzeigen lassen.

Geht das?
Was muss ich tun?

Danke für die Hilfe.

Mit freundlichem Gruß

Franz Luwein

2

Was bedeutet das? Hast du mal ne Webseite wo man sich das live anschauen kann?

3

Du kannst deine LayerGroups alle zusammenfassen, so etwa:


var Parken = new L.LayerGroup();

L.marker([50.4212, 9.6205]).addTo(Parken);
L.marker([50.4331, 9.6818]).addTo(Parken);

var mehrParken = new L.LayerGroup();

L.marker([50.3, 9.6]).addTo(mehrParken);
L.marker([50.35, 9.6]).addTo(mehrParken);
L.marker([50.40, 9.6]).addTo(mehrParken);

var alleZusammen = new L.LayerGroup();
Parken.eachLayer(function(l) {
	l.addTo(alleZusammen);
});

mehrParken.eachLayer(function(l) {
	l.addTo(alleZusammen);
});

Als Beispiel so: http://jsfiddle.net/mpo6sjxy/3/ (im Layerwechsler im rechts unteren Fenster umschalten).

4

Hallo Gormo,

Danke für den Hinweis und deine Mühe.
Für Marker habe ich zwar schon eine Lösung, aber deinen Rat werde ich dennoch befolgen und das Ganze entsprechend umbauen.
Es macht alles etwas übersichtlicher.

Wie würde das mit GPX-Dateien funktionieren?

Hintergrund:
An einem recht langen Wanderweg gibt es s.g. Zuwege, also Wege, die zb. zum Bahnhof o.ä. führen.
Das sind alles nur jeweils 0,2 - 1,5 km lange (gpx) Teilstücke.
Diese möchte ich gerne “en bloc”, also alle auf einmal, ein bzw. ausblenden.

Mit freundlichem Gruß

Franz Luwein

5

Zeig mal deinen Code, mit dem du eine GPX-Datei einbindest, dann kann man dir besser helfen.

6

Hallo gormo,

ich hoffe, das hilft.



        var gpxTrack1 = new L.GPX(
            'zuweg1.gpx', 
            {
                async: true,
                max_point_interval: 120000,
                polyline_options: {
                    color: 'red',
		    opacity: 0.9
                },
                marker_options: { 
                    startIconUrl: './leaflet-gpx-master/pin_icon-start.png',
                    endIconUrl: './leaflet-gpx-master/pin_icon-end.png',
                    shadowUrl: './leaflet-gpx-master/pin_shadow.png'
                }
            }
        );


	var overlays = {
            "<img src='./icon/ZW.svg' height=19>&nbsp;Zuweg1": gpxTrack1,
            "<img src='./icon/ZW.svg' height=19>&nbsp;Zuweg2": gpxTrack2,


	L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map);

Gruß

Franz Luwein

7

Hallo Franz,

ich hab da eine elegante(re) Lösung für die GPX-Dateien gefunden:

Falls sich jemand wundert: das GPX-Plugin ist mpetazzoni/leaflet-gpx, volle HTML-Seite meines Beispiels hier https://pastebin.com/YtzJchhq . Die GPXe sind beliebige GPX mit Track drinnen.


// ein GPX-Layer
var gpx1 = new L.GPX("/w1.gpx", {
  async: true,
});

// noch eins
var gpx2 = new L.GPX("/w2.gpx", {
  async: true,
});

// und ein drittes
var gpx3 = new L.GPX("/w3.gpx", {
  async: true,
});

// Layergruppe, in die die 3 GPX-Layer zusammengefasst werden
var lg = new L.LayerGroup([gpx1, gpx2, gpx3]);
      
var control = L.control.layers({"OSM": osmBase}, {"3 Tracks": lg}).addTo(map);

Ich hoffe, damit kommst Du klar.

Der Trick ist, dass man die GPX-Layer nur der Layer-Gruppe zufügt. Du würdest also für jede Wanderung eine eigene LayerGroup machen, und da jeweils die Teilstück-GPX-Layer zufügen. Dann die LayerGroups dem Control als Overlays geben, feddich.

Viele Grüße,
gormo

8

Hallo Gormo,

DANKE!
Das hört sich wirklich clever an.

Mit freundlichem Gruß

Franz Luwein