Add marker to multiple layer groups

Question

I have created a map with leafletjs using StyledLayerControl and markercluster: https://www.wiva.at/v2/basemap-kartentest/ Each marker represents a research project that fits in one category (=layergroup). Unfortunately I have some projects that fall into three categories (like the very south one near the city LEIBNITZ close to GRAZ). So far this one project is represented as three markers, and I got the feedback this confuses especially in the spiderfied view. I've come across an issue, when assigning my marker to a variable and then adding the variable to multiple layergroups that unselecting one layergroup makes the marker disappear in the other layer groups as well. So is there any chance to represent such a project as ONE marker but appearing in multiple layer groups?

If the link above is not sufficient I can add my code (but I'm afraid it's kind of messy).

Thanks for any hint.

EDIT:

So far I add my marker simply like that:

    //Green Industry projects
    //new (running) projects
    var industry_new = new L.LayerGroup();

    //Renewable Gasfield, laufend, Wiva, ONLINE
    L.marker([46.753278, 15.586361], {icon: industryIcon} ).addTo(industry_new).bindPopup("Renewable Gasfield
Projektleitung: Energie Steiermark
Standort: Gabersdorf
Kategorie: Grüne Industrie
Status: laufend
Ganzheitlicher Power-to-Gas Ansatz, bei dem aus erneuerbarem Strom durch Elektrolyse grüner Wasserstoff erzeugt wird und eine zweistufige katalytische Methanisierung im großen Maßstab für eine nachhaltige Energieversorgung in den Bereichen Energie, Mobilität und Industrie vereint.
Details...");

    //HyTechbasis 4 WIVA, laufend, Wiva, ONLINE
    L.marker([48.155278, 14.048056], {icon: industryIcon} ).addTo(industry_new).bindPopup("HyTechbasis 4 WIVA
Projektleitung: FRONIUS INTERNATIONAL GmbH
Standort: Thalheim
Kategorie: Grüne Industrie
Status: laufend
Hydrogen Technology Basis for WIVA
Details...");

    //Co2EXIDE WIVA, laufend, Wiva, ONLINE
    L.marker([48.33826938809515, 14.317320611066839], {icon: industryIcon} ).addTo(industry_new).bindPopup("CO2EXIDE
Projektleitung: (österreichischer Partner) Energieinstitut an der JKU Linz
Standort: AGH Krakau Demo-Anlage
Kategorie: Grüne Industrie
Status: laufend
CO2-basierte Elektrosynthese von Ethylen Oxiden
Details...");
        
    //CORALIS WIVA, laufend, Wiva, ONLINE
    L.marker([48.288029, 14.324497], {icon: industryIcon} ).addTo(industry_new).bindPopup("CORALIS
Projektleitung: Fundación CIRCE / Öst. Partner: Energieinstitut an der JKU Linz
Standort: Linz
Kategorie: Grüne Industrie
Status: laufend
Erfahrungen im Bereich der Industriesymbiose zusammenstellen
Details...");

    //UpHY, laufend, Wiva, ONLINE
    L.marker([48.14735053624901, 16.492216234765525], {icon: industryIcon} ).addTo(industry_new).bindPopup("UpHy I
Projektleitung: OMV
Standort: Wien
Kategorie: Grüne Mobilität
Status: laufend
Im Project UpHy I wird die Basis für die Demonstration der Wertschöpfungskette für die grüne H2- Mobilität von der Produktion in einer Elektrolyse über die Logistik bis zur 350 bar Betankungsinfrastruktur für eine kommerziell betriebene Buslinie mit Brennstoffzellenantrieb entwickelt.
Details...");

    //Underground Sun.Conversion, laufend, Wiva-Netzwerk
    L.marker([48.028889, 13.691944], {icon: industryIcon} ).addTo(industry_new).bindPopup("Underground Sun.Conversion
Projektleitung: RAG Austria AG
Standort: Pilsbach
Kategorie: Grüne Industrie
Status: abgeschlossen
Chemical storage of renewable energy in porous subsurface reservoirs with exemplary testbed
Details...");

I do that for each layer group. Probably this is not the best way, but for me as a java and leaflet beginner the easiest way and I was just very happy everything worked out so far ;-)

user_5108796 · Answer

Unfortunately that is an unresolved UX issue. The main issue is that in some use cases, you want an OR filter (sounds like it would be your case, since your Markers are duplicated in each group where they fit the associated category); and in others, you want an AND filter...

So if you want to populate your map with all Markers that fit at least one selected category (i.e. implement an OR filter), a possible solution could be to use "dummy" empty Layer Groups for your selection control, clear and re-populate the map with relevant Markers whenever the user selection changes.

For example, if you have the map "overlayadd/remove" events:

// "Dummy" layers to be used in selection control
const dummy1 = L.layerGroup();
const dummy2 = L.layerGroup();

// Actual categories with possibly common Markers
const category1 = L.layerGroup([markerA, markerB]);
const category2 = L.layerGroup([markerA, markerC]);

// Intermediate group to easily clear map content
const content = L.layerGroup().addTo(map);

map.on("overlayadd overlayremove", () => {
  // Step 1: remove all content
  content.clearLayers();
  // Step 2: re-add layers that fit at least one selection
  if (map.hasLayer(dummy1)) {
    category1.addTo(content)
  }
  if (map.hasLayer(dummy2)) {
    category2.addTo(content)
  }
  // etc.
});

In case you use Leaflet.markercluster, you can simply use it as the content variable in above snippet.

You also have to create only 1 Marker per project, no longer duplicate them for each category. In normal use cases, this should be avoided, but here we specifically handle this case. For example if Marker A matches categories 1 and 2, you can do:

L.marker(latLngA).addTo(category1).addTo(category2);

Add marker to multiple layer groups

1 Answers