Multiple gpx files: map fits only on the last GPX

[donostiastudio]

Hi there! I have a map with several GPX files. I would like the map to correctly center on all the tracks after loading. However, it currently centers only on the last uploaded route. You can see it in action here: https://www.abbondantiedozzinali.it/fondo-stradale/ghiaia/

Here's the code:

`

      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>
      <style>
        #map { height: 500px; }
      </style>
    <div class="container">

    <div id="map" class="bottom30"></div>
    </div>

    <script>
        var map = L.map('map').setView([41.90, 12.49], 7); // Imposta la posizione iniziale della mappa

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Array di percorsi GPX
        var gpxFiles = [
          // Inserisci qui i percorsi GPX
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2020/07/2020-07-29_228758751_Via-Verde-dei-Trabocchi-da-Pescara-a-San-Salvo.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2020/07/2019-09-09_94274627_Pantelleria-4.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2016/12/1Romavelletri.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2015/11/2023-12-29_1402136166_Madonna-di-Morbano.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2015/11/2023-12-29_1402129035_INsugherata.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2015/08/2023-12-28_1401931659_Ciclovia-dei-laghi.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2015/08/2023-12-28_1401929058_Cascate-di-San-Giuliano.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2015/08/route813453081-1.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2015/08/subiacolivata.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2014/03/Anguillara_CanaleMonterano-1.gpx',
                        'https://www.abbondantiedozzinali.it/wp-content/uploads/2014/03/2023-12-24_1397609329_Lago-di-Martignano.gpx',

        ];

        // Carica e visualizza tutti i file GPX sulla mappa
        gpxFiles.forEach(function(gpxFile) {
          new L.GPX(gpxFile, {
            async: true,
            polyline_options: {
                  color: '#683600',
                  opacity: 0.75,
                  weight: 5,
                  lineCap: 'round'
                  },
            gpx_options: {
                joinTrackSegments: true
              },      
            marker_options: {
             startIconUrl: 'https://www.abbondantiedozzinali.it/wp-content/themes/aed2/images/partenza.svg',
             endIconUrl: 'https://www.abbondantiedozzinali.it/wp-content/themes/aed2/images/partenza.svg',
             shadowUrl: ''
            }
          }).on('loaded', function(e) {
            var gpxLayer = e.target;
            map.fitBounds(gpxLayer.getBounds()); // Centra la mappa sui percorsi GPX
          }).addTo(map);
        });
      </script>`

Could you help me? Thank you

[mpetazzoni]

You'll want to extend the bounds each time, instead of fitting to the latest loaded layer's bounds:

var bounds = null;

...
  .on('loaded', function(e) {
    var layerBounds = e.target.getBounds();
    if (bounds === null) {
      bounds = layerBounds;
    } else {
      bounds.extend(layerBounds);
    }
    map.fitBounds(bounds);
  });

[donostiastudio]

Thank you. Could you help me with the code? I'm not very good at JavaScript. I tried to fix the code as you see below, but it's not working. The map no longer displays the GPX files

<script>
            var map = L.map('map').setView([41.90, 12.49], 7); // 
            var bounds = null;

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
              attribution: '© OpenStreetMap contributors'
            }).addTo(map);

            // Array GPX files
            var gpxFiles = [
              // Inserisci qui i percorsi GPX
              <?php foreach ($files_gpx as $file_gpx) { ?>
                '<?php echo $file_gpx;?>',
              <?php } ?>        
            ];

            // loads gpx files
            gpxFiles.forEach(function(gpxFile) {
              new L.GPX(gpxFile, {
                async: true,
                polyline_options: {
                      color: '#683600',
                      opacity: 0.75,
                      weight: 5,
                      lineCap: 'round'
                      },
                gpx_options: {
                    joinTrackSegments: true
                  },      
                marker_options: {
                 startIconUrl: '<?php echo get_stylesheet_directory_uri(); ?>/images/partenza.svg',
                 endIconUrl: '<?php echo get_stylesheet_directory_uri(); ?>/images/partenza.svg',
                 shadowUrl: ''
                }
              }).on('loaded', function(e) {
                  var layerBounds = e.target.getBounds();
                  if (bounds === null) {
                    bounds = layerBounds;
                  } else {
                    bounds.extend(layerBounds);
                  }
                  map.fitBounds(bounds);
                });

            });
          </script>

[mpetazzoni]

Any javascript errors in the console? Can you confirm the loaded event handler is being called (by debugging, or adding a console.log(...) statement) ?

[donostiastudio]

Thank you so much for your help. I've put WordPress in debug mode. In the console, I'm getting these alerts, but I don't seem to see any errors.

As you can see, with the modification I made trying to follow your instructions, the map is loaded but there are no GPX tracks. Did I modify the code correctly?

THX!

[mpetazzoni]

I'd recommend you use the Javascript debugger in your browser with a breakpoint in the loaded event handler, and step-by-step through it to see what happens.

[donostiastudio]

Hi there! thank you I solved. This is the working code

` Githubissues.

Githubissues is a development platform for aggregating issues.