How to add multiple set of marker?

Question

I need to have multiple layer of icons drawed on my map. Each set of that icon must be rendered or not by clicking on the option panel. I found all examples that shown how to add a single marker or a group of markers, but nothing about a plurality of groups.

i'm working in angular with Asymmetrik/ngx-leaflet but ithink the concept i missing i think is for all implementation.

  markersLayersLev_1: Marker[] = [];
  markersLayersLev_2: Marker[] = [];
  markersLayersLev_3: Marker[] = [];

How can i put this "layers" in separate manner on the map?

score 4 · Accepted Answer · edited Dec 04 '21 at 22:34

Ok, I found how to do this task.

Marker extends Layer so I can insert these markers in LayerGroup. I have various layerGroup, each one with its own set of markers.

the ngx-leaflet leafletLayers directive accepts an array of layers, so I put the various layerGroup in a LayerGroup[] array and I set this to the value of the directive.

In Typescript file:

itemsLevel_1: LayerGroup = new LayerGroup();
itemsLevel_2: LayerGroup = new LayerGroup();

marker1.addTo(itemsLevel_1);
marker2.addTo(itemsLevel_1);

marker3.addTo(itemsLevel_2);
marker4.addTo(itemsLevel_2);

 layerMainGroup: LayerGroup[] = [
    itemsLevel_1,
    itemsLevel_2
  ];

and in the html page:

<div
  id="mapContainer"
  leaflet
  [...]
  [leafletLayers]="layerMainGroup"
></div>

Maybe you can accept your own answer :). – Federico Navarrete Dec 04 '21 at 22:33 — Federico Navarrete, Dec 04 '21 at 22:33

How to add multiple set of marker?

1 Answers1