My current code merely binds markers according to the data from this json file:

{
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "type": "Point",
        "coordinates": [53.8460456, -38.9135742]
      },
      "type": "Feature",
      "properties": {
        "name": "red"
      }
    }
  ]
}

and my code looks something like this:

const blueLayer = new L.LayerGroup();
const redLayer = new L.LayerGroup();
const link = './data/events2.json' //file above
const map = L.map("mapid", {
  center: [53.8460456, -38.9135742],
  zoom: 12,
  layers: [blueLayer, redLayer],
});

L.tileLayer(
  "/......",
  {
    attribution: "......",
    maxZoom: 18,
    minZoom: 1,
  }
).addTo(map);

$.getJSON(link, (events) => {
  L.geoJSON(events, {
    style: (feature) => (feature.properties && feature.properties.style),
    onEachFeature: onEachFeature,
    pointToLayer: (feature, latlng) => marker(latlng),
  });
}).addTo(map);

However, I would like to add markers to different layers instead of binding them all directly to the map so I can do something like this:

onEachFeature(feature, layer) {
  if (feature.properties.name === "red") {
    //do something that binds associated marker to red layer)
  } else {
   //do something that binds associated marker to bluelayer
  }
}

My current code merely binds markers according to the data from this json file:

{
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "type": "Point",
        "coordinates": [53.8460456, -38.9135742]
      },
      "type": "Feature",
      "properties": {
        "name": "red"
      }
    }
  ]
}

and my code looks something like this:

const blueLayer = new L.LayerGroup();
const redLayer = new L.LayerGroup();
const link = './data/events2.json' //file above
const map = L.map("mapid", {
  center: [53.8460456, -38.9135742],
  zoom: 12,
  layers: [blueLayer, redLayer],
});

L.tileLayer(
  "https://api.mapbox./......",
  {
    attribution: "......",
    maxZoom: 18,
    minZoom: 1,
  }
).addTo(map);

$.getJSON(link, (events) => {
  L.geoJSON(events, {
    style: (feature) => (feature.properties && feature.properties.style),
    onEachFeature: onEachFeature,
    pointToLayer: (feature, latlng) => marker(latlng),
  });
}).addTo(map);

However, I would like to add markers to different layers instead of binding them all directly to the map so I can do something like this:

onEachFeature(feature, layer) {
  if (feature.properties.name === "red") {
    //do something that binds associated marker to red layer)
  } else {
   //do something that binds associated marker to bluelayer
  }
}

• javascript
• leaflet
• geojson

Share Improve this question Follow edited Dec 15, 2023 at 17:36 Mike 'Pomax' Kamermans 53.8k1717 gold badges125125 silver badges175175 bronze badges asked Jun 7, 2017 at 20:35 hebaheba 11911 gold badge22 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I believe you are nearly there. In your onEachFeature function, you can simply add layers to your different Layer Groups accordingly. Then, you can add the Layer Groups to the map whenever you want. Try this out:

function onEachFeature(feature, layer) {
  if (feature.properties.name === "red") {
    // add only 'red' markers to Layer Group
    redLayer.addLayer(layer);
  } else {
    // add only 'blue' markers to Layer Group (assuming just red/blue markers)
    blueLayer.addLayer(layer);
  }
}

Now somewhere else in your code you can add these layers to your map:

redLayer.addTo(map);
blueLayer.addTo(map);

Just make sure to remove the .addTo() method after the L.geoJSON() unless you want all the markers on the map initially. Hope this helps!