Adding markers from an array into Leaflet

Question

I am trying to add markers from an array into a leaflet map. I am trying to get the popup info, layer and coordinates from the array. I must be missing something obvious because I can't pull the layer info.

markersArray[i][1] returns the value "layer1" but it does not work in the .addTo method.

EDIT: I HAVE CHANGED THE CODE TO SOLVE A PROBLEM WITH A MARKER APPEARING OUTSIDE THE CLUSTER:

My code is as follows:

var markersList = [];
var markersList = [
[41.15,-8.61,'popup1','layer1'],
[41.15,-8.61,'popup2','layer1'],
[41.15,-8.31,'popup3','layer2'],
[41.15,-8.31,'popup4','layer2']
];

var markers = new L.MarkerClusterGroup();

for (var i = 0; i < markersList.length; i++) {
markers.addLayer(new L.marker([markersList[i][0], markersList[i][1]]).bindPopup(markersList[i][2]));
markers.addTo(layer1); // working
markers.addTo(markersList[i][3]); // not working
map.addLayer(markers);
};

Thanks for helping.

iH8 · Accepted Answer · 2014-11-24 16:23:52Z

2

That's because markersArray[i][1] is has the type of string. If you want to use that to reference the layer1 object you could use this[markersArray[i][1]];

edit because of asker edit:

You're still making the same mistake. The addTo method expects an instance of a layer as parameter not a string with the name of the variable that contains your layerinstance. markersList[i][3] contains a string with the name of the variable of your layerinstance not an instance of that layer. If you want to grab the instance of that layer by string you should use: this[markersList[i][3]]. That would result in the following code:

markers.addTo(this[markersList[i][3]]);

Here 'this' represent your current scope, markersList[i][3] the string with your variable name so it would result in 'this["layer1"]' which is a reference to your layerinstance. I'm assuming you've declared variable layer1 in that scope and it contains the layerinstance:

var layer1 = new L.LayerGroup();

But i can't deduct that from your current code because you've deleted where you create the instances of the layergroups.

edited Nov 24, 2014 at 16:23

answered Nov 21, 2014 at 16:18

iH8

28.8k4 gold badges72 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

BMM Over a year ago

Thanks for helping out. Still no luck, or I possibly did not understand what you meant. I have changed the code in the original post, since I had a problem with a marker appearing always outside of the cluster. Tks

BMM Over a year ago

Thanks. I'm understanding it better now. It outputs no error now, but somehow the markers are being placed in both layers; i.e. hiding layer1 or layer2 in the Leaflet layer control hides / shows all the markers... I will try to figure it out

iH8 Over a year ago

You can easily check if you added the right markers to the right layer by logging them to your console. For instance: console.log(layer1._layers);

BMM Over a year ago

Yes. All 4 objects (markers) are on both layer1 and layer2, when they should be 2 in layer1 and 2 in layer2.

iH8 Over a year ago

I'm am kind of confused as to what you're trying to accomplish because of your edits. Before you we're working with a layerGroup, now you've suddenly thrown in a MarkerClusterGroup. Untill that my answer was perfectly valid, changing the context of the question does not make it very easy for me and other users who are trying to help or looking for the same solution. I'd suggest to accepting the best answer and/or opening a new question with your new code and a clear problem description and maybe a nice testcase on plunkr.

|

pk. · Accepted Answer · 2014-11-21 16:38:18Z

1

addTo is used to add the marker to the map. Passing it markersArray wont work as you have found.

I'm going to guess that you plan to have multiple layers, each holding some features that you add to the map. You probably need to use a dictionary of layers, and map each layer name to a corresponding leaflet layer object.

var layerLookup {};
layerLookup["layer1"] = new L.LayerGroup().addTo(map);
layerLookup["layer2"] = new L.LayerGroup().addTo(map);

... // other code

for (var i = 0; i < markersArray.length; i++) {
    marker = new L.marker([markersArray[i][2],markersArray[i][3]])
    .bindPopup(markersArray[i][0]).addTo(layerLookup[markersArray[i][1]]);
};

answered Nov 21, 2014 at 16:38

pk.

9868 silver badges15 bronze badges

2 Comments

BMM Over a year ago

Can you please elaborate? I changed a bit the code to make the cluster work with layers (there was a problem: 1 marker was always "outside" the cluster). I have EDITED the code in the original post. Thank you.

pk. Over a year ago

Looks like you have selected the other answer and opened a new question. Hopefully you figure it all out.

Collectives™ on Stack Overflow

Adding markers from an array into Leaflet

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related