Vue2leaflet: how to add l-layer-group overlay as unchecked

[C00Lzero]

sorry, if i write this here, even if it's not a bug. I'm new to vue (and are using quasar).

How can I add a layer-group that is disabled but visible?
What I mean:
How can I add this to the control, but don't have it activated (checkbox not checked)

I have to load around 10k Elements in different layers.
If I would load them all at once, you won't see anything.

In 'pure' Javascript I did it like this:

var cities = L.layerGroup();
L.marker([52.369072,9.722780], {icon: homeIcon}).addTo(cities);

...

var overlayControl = L.control.layers(null, null,{collapsed:false});
  overlayControl.addOverlay(cities, "Cities");
  overlayControl.addOverlay(areas, "Areas");
  
  overlayControl.addTo(map);

So none of the Layers are activated per default.
Is there a way to get this somehow in vue?

<l-layer-group>
        <l-layer-group layer-type="overlay" name="Cities" :visible="true">
          <l-marker
            v-for="marker in markers"
            :key="marker.id"
            :visible="marker.visible"
            :lat-lng="marker.position"
            :icon="iconHome">
            <l-popup :content="marker.popuptext" />
          </l-marker>
        </l-layer-group>

        <l-layer-group layer-type="overlay" name="geoJSON" :visible="true" >
           <l-geo-json
              :geojson="geojsontxt"
              :options="options"
              :options-style="styleFunction"
            />
        </l-layer-group>
</l-layer-group>

or do I have to generate it in mounted() -> this.$nextTick using my leaflet-Import?

Versions

• Leaflet: v1.6.0
• Vue: v2.6.10
• Vue2Leaflet: v2.2.1

[C00Lzero]

Okay,
I found out that in the LMap the new layer is always added to the map

      if (!alreadyAdded && layer.activated) {
        this.mapObject.addLayer(layer.mapObject);
      }

this isn't the default behaviour of the leaflet api.

So to not break existing implementations I tried a fix and a pull-request #493 .
Though i'm not sure if this will break anything.

src/components/LMap.vue
```diff
@@ -186,7 +186,7 @@ export default {
this.layerControl.addLayer(layer);
}
}
- if (!alreadyAdded) {
+ if (!alreadyAdded && layer.activated) {
this.mapObject.addLayer(layer.mapObject);
}
},

/src/mixins/Layer.js
 ```diff
@@ -22,7 +22,11 @@ export default {
       type: Boolean,
       custom: true,
       default: true
-    }
+    },
+    activated: {
+      type: Boolean,
+      default: true
+    },
   },
   mounted () {
     this.layerOptions = {

[DonNicoJs]

Closing this since the PR is merged :)

[s3bul]

Closing this since the PR is merged :)

Why PR is not merged?

[s3bul]

Closing this since the PR is merged :)

Why PR is not merged?

Ok, I see https://github.com/vue-leaflet/Vue2Leaflet/pull/498

[s3bul]

I have the same problem... I can't add layer-group as unchecked. What is solution? For now only custom control?

[jamus]

Hi, Sorry to bump this but Im afraid I can't seem to work out how this should work. How would you add a layer but "unchecked" in the l-control-layers?

[DonNicoJs]

@jamus have you tried setting :visible="false on the layer in question? :)

[xlcrr]

When initialising, :visible="false" hides the display of the <input type="checkbox" /> it doesn't actually control the checked value of the checkbox