JavaScript - leaflet, adding a bunch of markers

Question

Let's say I have a bunch of markers (over 100) I want to add from this:

module.exports = [
{ value: 'Varrock', lng: 22.5, lat: -15.52249812756166, popular: 1 },
{ value: 'Lumbridge', lng: 25.9661865234375, lat: -43.644025847699496, popular: 1 },
{ value: 'Monastery', lng: -4.0924072265625, lat: -5.714379819235291 },
{ value: 'Edgeville', lng: 2.4884033203125, lat: -6.0094592380595495, popular: 1 },
{ value: 'Varrock Palace', lng: 22.412109375, lat: -6.882800241767556 },
{ value: 'Digsite', lng: 46.043701171875, lat: -17.266727823520508 },
{ value: 'River Salve', lng: 54.931640625, lat: -14.083301314706778 },
{ value: 'Morytania', lng: 64.610595703125, lat: -13.501814172428656 },
{ value: 'Mort Myre Swamp', lng: 59.820556640625, lat: -22.740723091194727 }
];

It uses browserify to get it. So, I do this:

var locations = require('./locations');

What would be the best way to add all of those into LayerGroup()? I mean, because doing var fairy = L.layerGroup([One, Two, Three...]); by hand would get tiresome.

So how would I go about adding all of those markers into a new layer (so I can toggle them on/off)

Answer 1

How about adding an empty L.LayerGroup, looping over your array and adding them to that layer?

var locations = [];

var layer = L.layerGroup().addTo(map);

locations.forEach(function (location) {
  L.marker([location.lat, location.lng])
    .bindPopup(location.value)
    .addTo(layer);
});

Working example on Plunker: http://plnkr.co/edit/Q0DGqs?p=preview