I am using Vue.js 3, Leaflet and Vueleaflet.
My map displays the layers groups containing markers (LLayerGroup
) :
I want to add "Select all" / "Unselect all" checkboxes at the top of the groups checkboxes. Is there a way to easily custom Layer and group control element in Vue Leaflet to achieve this ?
Here is my vue template code :
<l-map
:zoom="zoom"
:center="center"
:options="{ attributionControl: false }"
@update:zoom="zoomUpdated"
@update:center="centerUpdated"
@update:bounds="boundsUpdated">
<l-tile-layer
v-for="tileProvider in tileProviders"
:key="tileProvider.name"
:name="tileProvider.name"
:visible="tileProvider.visible"
:url="tileProvider.url"
layer-type="base"/>
<l-control-layers position="topright"></l-control-layers>
<l-layer-group
v-for="bGroup in groupsMarkers"
:key="bGroup.groupId" layer-type="overlay" :name="bGroup.groupName" :visible="true">
<MapMarker
v-for="marker in bGroup.markers"
:key="marker.baliseId"
:id="marker.baliseId"
:name="marker.baliseName"
/>
</l-layer-group>
</l-map>