如何循环遍历坐标数组以创建layerGroup的地图标记？

Question

Here's a quick snippet of what it looks like currently -- using the for loop. I only took a piece of the map to use an example:

link

The picture is simply showing that, as of right now, my code automatically displays all of the fire extinguishers as soon as the map loads -- which is not what I want. Please read below for a rather detailed version of my question.

    // Fifth Grade class teachers //

    var blower = L.marker([-38.68551, -44.12109], {icon: fiveTeacherIcon}).bindPopup('Mrs. Blower\'s class'),
        okonowski = L.marker([-55.47885, -43.41797], {icon: fiveTeacherIcon}).bindPopup('Mrs. Okonowski\'s class'),
        vermeulen = L.marker([-38.95941, -23.37891], {icon: fiveTeacherIcon}).bindPopup('Mrs. Vermeulen\'s class');

var fifthGrade = L.layerGroup([blower, okonowski, vermeulen]);

var classesOverlay = {
    "Kindergarten": kindergarten,
    "First Grade": firstGrade,
    "Second Grade": secondGrade,
    "Third Grade": thirdGrade,
    "Fourth Grade": fourthGrade,
    "Fifth Grade": fifthGrade
};

L.control.layers(classesOverlay).addTo(cmap);

As you can see above, this is how I display the markers for the fifth grade classes. When I click on "Fifth Grade" on the layer selection option (while viewing the map) those three markers pop-up. This is exactly what I want for my fire extinguishers.

But I want a more efficient way to do so due to the fact that I have so many coordinates. Whereas for Fifth Grade I only have three, so I didn't mind manually entering them individually.

So my question was basically asking if there's a more efficient way to do this. As I showed above, I currently have it run a for loop through the array and place them onto the map, but the problem is that I don't want the fire extinguishers to be showing the whole time; I want them to be just like I have Fifth Grade (and obviously the other grades too), where I simply select them from the layerGroups and then they all appear.

I just don't want to have to individually make a marker for every set of coordinates for the fire extinguishers, because I feel like that is really counter-productive.

I can't figure out how to make it so when selected it will run the for loop and display all of them; it only ended up displaying one set of coordinates when I attempted.

I hope this made more sense. I really appreciate you taking the time out of your day to help me!

Answer 1

function createMarker (coords) {

    return (new L.marker(coords, {icon: fireEx}).bindPopup('<strong>Hi! I\'m a fire extinguisher! And you are?</strong>').addTo(cmap));
}

function createMarkerGroup (markerLocationList) {
    var
        markerList = [];

    markerLocationList.forEach(function (location) {

        markerList.push(createMarker(location));
    });

    return L.layerGroup.apply(L.layerGroup, markerList);
}


var extinguishers = [
    [71.52491, -17.75391],
    [71.69129, 0.35156],
    [60.84491, -56.25],
    [49.49667, -14.41406],
    [10.66061, -33.75],
    [11.3508, -10.01953],
    [-21.45307, -22.5],
    [-50.1769, -60.46875],
    [-49.49667, -27.94922],
    [-59.88894, 36.03516],
    [-48.80686, 47.10938],
    [-49.15297, 84.72656],
    [-49.15297, 84.72656],
    [-48.80686, 47.10938]
];
var fireExtinguishers = createMarkerGroup(extinguishers);