I'm using Leaflet in order to achieve some "map stuff". I'll be creating a few groups, but I'd like to know if it's possible to apply circles to each marker of a layerGroup instead of doing individually.

I'm aware of the:

L.circle([-33.519604, -70.596107], 1609.34, {
    color: 'blue',
    fillColor: 'blue'
  }

But is there a better way?

var L41 = L.marker([-33.431484, -70.584641]).bindPopup('Francisco Bilbao'),
    L42 = L.marker([-33.426224, -70.590973]).bindPopup('Cristóbal Colón'),
    L43 = L.marker([-33.569405, -70.583611]).bindPopup('Elisa Correa');

var L4 = L.layerGroup([L41, L42, L43]);

var mymap = L.map('map', {
  center: [-33.4560406, -70.6681727],
  zoom: 11,
  layers: L4
});

L.tileLayer('/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href=".0/">CC-BY-SA</a>, Imagery © <a href="">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'xxxxxxxxx'
}).addTo(mymap);

var linea4 = {
  "Línea 4": L4
}

L.control.layers(null, linea4).addTo(mymap);

I'm using Leaflet in order to achieve some "map stuff". I'll be creating a few groups, but I'd like to know if it's possible to apply circles to each marker of a layerGroup instead of doing individually.

I'm aware of the:

L.circle([-33.519604, -70.596107], 1609.34, {
    color: 'blue',
    fillColor: 'blue'
  }

But is there a better way?

var L41 = L.marker([-33.431484, -70.584641]).bindPopup('Francisco Bilbao'),
    L42 = L.marker([-33.426224, -70.590973]).bindPopup('Cristóbal Colón'),
    L43 = L.marker([-33.569405, -70.583611]).bindPopup('Elisa Correa');

var L4 = L.layerGroup([L41, L42, L43]);

var mymap = L.map('map', {
  center: [-33.4560406, -70.6681727],
  zoom: 11,
  layers: L4
});

L.tileLayer('https://api.tiles.mapbox./v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="http://openstreetmap">OpenStreetMap</a> contributors, <a href="http://creativemons/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'xxxxxxxxx'
}).addTo(mymap);

var linea4 = {
  "Línea 4": L4
}

L.control.layers(null, linea4).addTo(mymap);

• javascript
• leaflet

1 Answer 1

LayerGroup has a getLayers method that returns an array of all the layers added to the group. You can use that array to create a circle for each marker object. For example :

L4.getLayers().forEach(function(obj) {
    if (obj instanceof L.Marker) { // test if the object is a marker
        // get the position of the marker with getLatLng
        // and draw a circle at that position

        L.circle(obj.getLatLng(), 1609.34, {
            color: 'blue',
            fillColor: 'blue'
        }).addTo(map);
    }
});

You can also use the more concise eachLayer as @ghybs noted in the ments :

L4.eachLayer(function(obj) { ...

And a demo

var L41 = L.marker([-33.431484, -70.584641]).bindPopup('Francisco Bilbao'),
    L42 = L.marker([-33.426224, -70.590973]).bindPopup('Cristóbal Colón'),
    L43 = L.marker([-33.569405, -70.583611]).bindPopup('Elisa Correa');

var L4 = L.layerGroup([L41, L42, L43]);

var map = L.map('map', {
  center: [-33.4560406, -70.6681727],
  zoom: 11,
  layers: L4
});
L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L4.getLayers().forEach(function(l) {
    if (l instanceof L.Marker) {
        L.circle(l.getLatLng(), 1609.34, {
            color: 'blue',
            fillColor: 'blue'
        }).addTo(map);
    }
});

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg./[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
 
 <div id='map'></div>