2

I have a bunch of markers that I would like to add to a feature group. Currently I'm doing it manually:

1) First adding all the markers (around 50)

var shelter1 = L.marker([54.962725, 12.548215], {icon: shelterIcon}).on('click', clickZoom); 
var shelter2 = L.marker([54.944250, 12.515722], {icon: shelterIcon}).on('click', clickZoom); 
var shelter3 = L.marker([55.008244, 12.299891], {icon: shelterIcon}).on('click', clickZoom); 
...

2) Then I define a feature group:

var shelterMarkers = new L.FeatureGroup();

3) And finally I add the markers in my feature group:

shelterMarkers.addLayer(shelter1);
shelterMarkers.addLayer(shelter2);
shelterMarkers.addLayer(shelter3);

Instead of doing 3) manually, I would like to create a function that does it automatically. Something like this:

var i = 1;
text = "";

while (i < 52) {
    text += "shelterMarkers.addLayer(shelter" + i + ")" + ";" + " ";
    i++;
    console.log(text)
}

When I look at the output, it looks pretty much like 3) (which successfully adds markers to the map) but for some reason the markers are not added to my map.

3

This way it would work:

        var shelter1 = L.marker([54.962725, 12.548215]); 
        var shelter2 = L.marker([54.944250, 12.515722]); 
        var shelter3 = L.marker([55.008244, 12.299891]); 

        var shelterMarkers = L.featureGroup();

        shelterMarkers.addTo(map);

        var i = 1;

        while (i < 4) {
            var currentShelter = window['shelter' + i];
            currentShelter.addTo(shelterMarkers);
            i++;
        }

Note that I adjusted the counter to 4 because I have only 3 datasets.

I have also changed new L.FeatureGroup(); to L.featureGroup();

You need to add the group to the map, and you add the markers to the group. If you add each marker and the group then you would have every marker in the map twice.

Please think about this; it might be better not to define so many variables but define an array with the markers:

var markers = [
                L.marker([54.962725, 12.548215]),
                L.marker([54.944250, 12.515722]),
                L.marker([55.008244, 12.299891])
            ]


var shelterMarkers = L.featureGroup();

shelterMarkers.addTo(map);

for (var i = 0; i < markers.length; i++) {
    var currentShelter = markers[i];
    currentShelter.addTo(shelterMarkers);
}

This way you could just loop through your array and use a for loop, instead of using a while loop and window to access the variables.

  • Thx for the suggestions. If I would like to add titles, descriptions and images to each marker, which approach is better - markers as separate markers or markers as an array? – Saud Oct 23 '17 at 5:59
  • I assume you want to show all that information in a popup? It does not matter then; whatever is easiest to you. But using an array plus a loop saves you a lot of writing. – BritishSteel Oct 23 '17 at 7:18
  • Yes, would display it in a popup. Thx. – Saud Oct 23 '17 at 13:19
2

Create the feature group, add it to the map, then add each marker to the group. If you use a layer control you only have one layer to deal with instead of 52 separate markers.

   var shelterMarkers = L.featureGroup();
    map.addLayer(shelterMarkers);

    L.marker([54.962725, 12.548215]).addTo(shelterMarkers); 
    L.marker([54.944250, 12.515722]).addTo(shelterMarkers); 
    L.marker([55.008244, 12.299891]).addTo(shelterMarkers); 
  • Thx for the suggestion, Bill. Will have to edit in order to not show the markers on initial load. – Saud Oct 23 '17 at 5:55
1

I see 2 issues that might be causing it:

writing to console.log instead use, shelterMarkers.addLayer("shelter" + i );

In your while loop.

Now you have the markers in the Feature group layer but you didn't add the group layer to the map.

shelterMarkers.addTo(map);

  • I actually don't apply shelterMarkers.addTo(map) in the steps 1)-3) and the markers in the feature group are added on the map. So, apparently you don't need to use addTo(map). I've also tested the first approach, replacing "console.log(text)" with "shelterMarkers.addLayer("shelter" + i );". No markers are added to the map. – Saud Oct 18 '17 at 19:34

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.