CODEWITHSUNDEEP
leafletangular-leaflet-directivengx-leaflet
Andrea Scarafoni
Andrea Scarafoni

Reputation: 955

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?

Upvotes: 2

Views: 2071

Answers (1)

Andrea Scarafoni
Andrea Scarafoni

Reputation: 955

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>

Upvotes: 4

Related Questions