leafletangular-leaflet-directivengx-leaflet

How to add multiple set of marker?

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?

Solution

  • 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>