Title: Get bounds of featureGroup with multiple features
Tags: leaflet;geojson;boundaries
Question: 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?
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());
Comment: Can you share your full code as well?

Comment: @whyzar Sorry about that, absolutely slipped my mind the first time around. Updated the post with my function.

Comment: https://stackoverflow.com/questions/44880792/map-fitbounds-with-json-data-in-a-featuregroup/44979020#44979020

Here is the accepted answer: @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());
Comment for this answer: In the end you write "map.fitBounds(layers.getBounds());", but "layers" is never defined in your code, so what is this variable?
Comment for this answer: Ok, I think the idea is just to have another feature group that has ALL of the markers (don't add it to the map, just use it to get the bounds).


{'source': 'StackExchangeDataset', 'subset': 'gis.stackexchange.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2018:00:04/25/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<leaflet><geojson><boundaries>', 'Title': 'Get bounds of featureGroup with multiple features', 'ViewCount': 4667, 'id': 280816, 'user_AboutMe': '<p>Just a small time independent developer and businessman trying to get by in life.</p>\n\n<p>Currently working on the an app combining the independent recreational services of 4 municipalities in my immediate region in to one, easy to use free app, sponsored by themselves.</p>\n', 'user_AccountId': 8575029.0, 'user_DisplayName': 'Dixos', 'user_Reputation': 125.0, 'user_Views': 13.0, 'user_id': 75820.0}}