Best way to add lots of divIcon/html markers

[Ed]

I have a bunch of markers to load into a layergroup.  Right now I just do it all in flat JS.  It works but it's kind of bloated:

var s221 = L.divIcon({className:'standard',html:'<a id="s221">221</a>'});

var m221 = L.marker([29.3299942017,-120.3217849731],{icon:s221});

var s222 = L.divIcon({className:'lakefront',html:'<a id="s222">222</a>'});

var m222 = L.marker([29.3298377991,-120.3215560913],{icon:s222});

var s312 = L.divIcon({className:'standard',html:'<a id="s312">312</a>'});

var m312 = L.marker([29.3294377991,-120.3215560913],{icon:s222});

L.layerGroup([m221,m222,m312]).addTo(map);

(Imagine 500 lines of that).  I thought about bringing in the markers as an array and then using loop to generate the markers but I ran into some hiccups.  I've only been using leaflet since yesterday– Any suggestions for a more efficient way to add unique divIcons to a layergroup?

[Barry Caruth]

I have this challenge too. How do you loop through an array of locations and add them to a specific layergroup?

[Arnie Shore]

Re "... ran into some hiccups ... "

Stating with an array is the right way, IMO. I'll guess here that
those hiccups aren't insurmountable.

Me, I'd generate the JS server-side in PHP, which I do a lot of.

AS

On 12/7/12, Barry Caruth <j...@caruth.com> wrote:
> I have this challenge too. How do you loop through an array of locations
> and add them to a specific layergroup?
>

> --
>
>
>
>

[Barry Caruth]

I asked about this in the new Leaflet IRC channel and got this helpful suggestion:

[16:52] <BarCar> Can anybody help me understand how to add many markers from a JS array to a map with leaflet?

[16:52] <BarCar> Seems I need to create all the markers and add to a layer group in one go which doesn't lend itself to client-side iteration through an array.

[17:15] <ybon> BarCar: what your array looks like?

[17:26] <BarCar> array of location name, longitude, latitiude, description (for infobox pop up)

[17:26] <BarCar> var locations = [];

[17:27] <BarCar> locations.push(new map_location("AE-DUBAI", 25.0, 55.3, "DUBAI", "Full Address"));

[17:27] <BarCar> Repeat times several hundred locations

[17:28] <BarCar> You may be able to tell that JavaScript is not my strong suit...

[17:29] <ybon> so you just need to do: var marker = L.marker([lat, lng]).addTo(map);

[17:29] <BarCar> yeah - thanks - I figured that for basic markers

[17:29] <ybon> then if you want a popup, marker.bindPopup(you_content);

[17:29] <BarCar> but I want to group them into layers - home locations and office locations

[17:30] <ybon> I see

[17:30] <ybon> http://leafletjs.com/examples/layers-control.html will help

[17:31] <BarCar> I've been working through that but it suggests all the markers need to be defined with known names before a layer group can be created

[17:31] <BarCar> which doesn't lend itself to iterating through an array of locations

[17:32] <ybon> ah

[17:32] <ybon> no, you can use layer.addLayer(your_marker)

[17:32] <ybon> layer is your LayerGroup instance

[17:33] <BarCar> great! that's exactly what I was missing I think.

[17:33] <ybon> so you can 1. create your layer group 2. loop over your array of locations 3. for each, create the marker and add it to the layer

[17:33] <ybon> ok

[17:33] <BarCar> much much appreciated.

[17:35] <ybon> :)

Hope that helps others too. I've not tried it out yet. 

[Adam Hanna]

@Barry Curuth

How did you accomplish step #3 - for each, create the marker and add it to the layer

Each marker needs to be assigned to a variable, no? And then each variable needs a unique name, which isn't possible in javascript.

[Bill Doherty]

A late follow-up for anyone who is looking for this solution. You can use the .addLayer method without variable names. Just add and L.marker on each iteration of the loop, without a variable name.