1

I tried looking into a solution for this myself, or an alternative way to load my layers, but I'm simply unable to.

I first load a geoJSON file through L.GeoJSON.AJAX(), then add the features (polylines and markers) that I need to a L.featureGroup(), but I'm having issues using the featureGroup.getBounds() function when doing this.

How can I get the bounds of all the features added to a featureGroup like this?

Edit: Added code. Completely slipped my mind when asking the question to include this.

function addMapData(id, map) {
  var newIcon = L.icon({
    iconUrl: './img/icons/ring.png',
    iconSize: [84, 80],
    iconAnchor: [5, 70],
    popupAnchor: [10, 10],
  });

  var mapData = L.featureGroup();

  new L.GeoJSON.AJAX('./data/fjelltrimmen/fjelltrimmen.vefsn.geojson', {
    local: true,
    style: {
      weight: 5,
      color: '#c0392b',
    },
    onEachFeature: function(feature, layer) {
      if (feature.properties.id === id) {
        // Polyline
        layer.addTo(mapData);

        // Map marker
        L.marker([
          feature.geometry.coordinates[feature.geometry.coordinates.length - 1][1],
          feature.geometry.coordinates[feature.geometry.coordinates.length - 1][0],
        ], { icon: newIcon }).addTo(mapData);
      }
    }
  });

  mapData.addTo(map);
  map.fitBounds(mapData.getBounds());   
}
  • Can you share your full code as well? – whyzar Apr 25 '18 at 15:39
  • @whyzar Sorry about that, absolutely slipped my mind the first time around. Updated the post with my function. – Dixos Apr 25 '18 at 16:11
  • 1
0

@ghybs pointed me to a link and I eventually came to realise that the fitBounds function was outside the main call, however that didn't completely solve my problem.

After looking closer at the geoJSON.Ajax plugin, I came across 3 different events you could subscribe to. One of the events is data:loaded

My function ended up becoming like this, and it's working wonderfully even with larger geoJson files (Mine is ~800mb for example):

function addMapData(id, map) {
  var newIcon = L.icon({
    iconUrl: './img/icons/ring.png',
    iconSize: [84, 80],
    iconAnchor: [5, 70],
    popupAnchor: [10, 10],
  });

  var mapData = L.featureGroup();

  var tracks = new L.GeoJSON.AJAX('./data/fjelltrimmen/fjelltrimmen.vefsn.geojson', {
    local: true,
    style: {
      weight: 5,
      color: '#c0392b',
    },
    onEachFeature: function(feature, layer) {
      if (feature.properties.id === id) {
        // Polyline
        layer.addTo(mapData);

        // Map marker
        L.marker([
          feature.geometry.coordinates[feature.geometry.coordinates.length - 1][1],
          feature.geometry.coordinates[feature.geometry.coordinates.length - 1][0],
        ], { icon: newIcon }).addTo(mapData);
      }
    }
  });

  mapData.addTo(map);

  tracks.on('data:loaded', function () {
      map.fitBounds(layers.getBounds());
  });
}
  • In the end you write "map.fitBounds(layers.getBounds());", but "layers" is never defined in your code, so what is this variable? – NachoDawg Sep 9 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.