Vue2leaflet: How to add layer-group into control-layers

[sangdth]

In official documentation, Leaftlet shows me to use L.control.layers(baseMaps, overlayMaps).addTo(map); to add baseMaps and overlayMaps to control layer. How can I do that with l-layer-group and l-control-layers?

I checked the example, it has the only baseMaps option.

Make an example, I want to add this layer group, it is a set of markers, how do I add another checkbox on control-layers to become overlayMaps?

<l-tile-layer
    layerType="base"
    name="Default Base"
    :url="url"
/>
<l-layer-group :visible="sourceVisible">
    <l-marker
         v-for="(item, index) in sources"
         :key="index"
         :lat-lng="[item.coordinates[1], item.coordinates[0]]"
         :icon="sourceIcon(item.icon)"
         @l-click="onClick(item)"
    >
    </l-marker>
</l-layer-group>

Thank you.

[KoRiGaN]

Hi @sangdth,

The documentation is far from perfect and I want to add many examples of the official documentation to Vue2Leaflet documentation but didn't have the time yet.
You can add overlay to your control like this:

<l-control-layers></l-control-layers>
<l-tile-layer
    layerType="base"
    name="Default Base"
    :url="url"
/>
<l-layer-group 
    :visible="sourceVisible"
    layerType="overlay"
    name="Sources">
    <l-marker
         v-for="(item, index) in sources"
         :key="index"
         :lat-lng="[item.coordinates[1], item.coordinates[0]]"
         :icon="sourceIcon(item.icon)"
         @l-click="onClick(item)"
    >
    </l-marker>
</l-layer-group>

Let me know if this helps.

Micka

[mujahidinside]

Hello @KoRiGaN,
How to add/show all layers in leaflet-control-layers-toggle?
in no layers show.

[sangdth]

Thank you @KoRiGaN, I tried it before posting it here. As you can see, I typed exactly your code, but it only displays the Default Base.

I went to check the source code, and inside l-layer-group it has only the props visible, it does not have layerType props.

Maybe I missed something...

[KoRiGaN]

I'm sorry @sangdth, you're right.

It's something I'm working on but is not published yet that should simplify all properties and make all layer components have a name and layerType properties.
I will try to publish it soon.

In the meanwhile, you can:

• Attach a reference to your control layers (ref="myControl")
• Register an event handler on add event on the different layer that use leaflet addBaseLayer( layer, name) and addOverlay( layer, name) methods on this.$refs.myControl.mapObject to add them manually.

Hope this helps.

[KoRiGaN]

@mujahidinside does my previous message answer your question?

[mujahidinside]

@KoRiGaN ,
Here is my code

Here map showing looks good in [leaflet-control-layers]

But on hower, it looks like this

Nothing showing.

[sangdth]

I remember I had the similar problem when I've messed with adding image overlay and control layer manually. After I clean my code and use purely this package, problem gone.

If the :name="layer.name" has something wrong, it will print out undefined. Can you give us more detail about your code?

[KoRiGaN]

Hi @mujahidinside,

You must add

layer-type="overlay" 

for layers to be added as overlay layers in the control.

[mujahidinside]

Hi @KoRiGaN,
did, but gain nothing.

[KoRiGaN]

@mujahidinside, Do you have a running example, for example, a JS Fiddle.
It's really hard to guess like that...

[sangdth]

@KoRiGaN , I followed your guide, use $refs, and it works! Thank you. But there is small thing relate to Vue, I would like to have some explanation if you have time.

methods: {
    addSourcesOverlay() {
        const layersControl = this.$refs.layersControl.mapObject;
        const sourcesGroup = this.$refs.sourcesGroup.mapObject;
        layersControl.addOverlay(sourcesGroup, 'Show sources');
    },
}

Right now if I put these code into methods and bind it to a button with @click, it will work as expected. But if I call it from mounted(), nothing happens. I have to do some hack, put it into $nextTick.

mounted() {
    this.lmap = this.$refs.map.mapObject;
    this.$nextTick(() => {
        this.addSourcesOverlay();
    });
 },

If I simply run this.addSourcesOverlay(); right after the this.lmap assignment, it won't work. Why the script stops after this line this.lmap = this.$refs.map.mapObject;?

I know this is not related to your code, but I'm learning Vue so I would like to have some help.

Thanks in advance.

[mujahidinside]

@KoRiGaN

https://jsfiddle.net/k04zpLx9/1215/

[sangdth]

@mujahidinside Please check this: https://jsfiddle.net/sangdth/L0uzzjn4/
I've done some hack to make it works. In future we can use simple layer-type="overlay", but for now I have to hack it like @KoRiGaN said in previous comment.

[KoRiGaN]

@sangdth example is right.

1. Property LayerType should be written layer-type in the template.
2. Overlay layers must be added manually,

@sangdth, I will try to explain your issue:
When mounted is called on your Vue app the other component (layer-group for example) are not mounted yet so they don't exist in $refs yet.
Vue.$nextTick() will trigger your method just after the DOM is updated so all inside components should have been mounted and be in $refs at that time.

This is why it's probably better to do it when the layer group is added to the map (add event). I modified your example here to make it work without $nextTick.

[sangdth]

Thank you @KoRiGaN. I also think about that the leaflet map's components in $refs do not exist yet when I tested with created(), that's why I tried to use $nextTick. I will learn more about add event, thank you for your suggestion.

I closed this issue as it is solved.

[RoshanAtDure]

Hi,

I facing same issue. the link given in Previous commnet is not working.

Can anybody please guid?

[DonNicoJs]

@RoshanAtDure Can you create a reproduction fiddle of what are you doing?

[RoshanAtDure]

@DonNicoJs here is link: fiddle

I want add controls for marker but they are not reflecting.

I am new to vue and dont know where i am doing wrong

Thanks

[DonNicoJs]

@RoshanAtDure you are using vue2-leaflet version 1.x :) we are 2.2.1 now! Can your try to update and use the new one?

[RoshanAtDure]

@DonNicoJs i am using update version only on local.

Here is update link of fiddle with 2.2.1 link

Thanks

[DonNicoJs]

@RoshanAtDure Here, the fiddle is still using the old version but I updated it and fixed the code:
https://jsfiddle.net/a0sm8ghj/12/

[RoshanAtDure]

@DonNicoJs Thanks man.. Its working now. I miss the layer-type="overlay" in layer group.

Thanks again for your help.

[paibanezma]

@KoRiGaN thanks so much for this information. I am currently trying to add the awesome wind overlay danwild has created (https://github.com/danwild/leaflet-velocity) to my vue based leaflet map but it is based on a custom class extended from L.Layer:

L.VelocityLayer = (L.Layer ? L.Layer : L.Class).extend({
all the class details
});

As I understand from your post, we could add this overlay with this code:

```
layer-type="overlay"
name="Sources"
:visible="true">
v-for="marker in markers"
:key="marker.id"
:visible="marker.visible"

        :lat-lng="marker.position"

      />

```
But instead of using the LMarker component we must create a vue component for the custom Layer extended class and used it inside the LLayerGroup.

Could you please tell me how could I create this component in vue?

Thanks so much @KoRiGaN ,

Pablo