l-geo-json - how to keep layer in the background when more that 1 layer is used

[udos]

Versions

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

I am passing data (through prop segments) from a parent component to a child component which gets rendered in 2 l-geo-json components:

<template>
  <div>
    <l-geo-json :geojson="segments" :options="{ bringToFront: true }" key="r" />
    <l-geo-json
      v-if="concatenate && routeSegments"
      :geojson="routeConcatenated"
      :options="{ bringToBack: true }"
      key="r_concat"
    />
  </div>
</template>

with the options bringToFront/bringToBack I am trying to define the order of the layers but they are "ignored" (probably because I'm applying them wrong...).

I also tried to switch the sequence in which they are listed without success...

any suggestions what I'm doing wrong?

[nmezzopera]

@udos Hi! leaflet bringToFront or bringToBack are a function!
You can assign two different refs to those two json and then use the function in the @ready callback of the GeoJson or the map or in the mounted lifecycle hook of the component that you are using ( inside a nextTick function )

Let me know if this helps!

[udos]

thanks! works!

I had to place it in the updated lifecycle hook because routeConcatenated is not computed on mounted:

updated() {
  this.$nextTick(() => {
    this.$refs.refRouteConcatenated.mapObject.bringToBack();
  });
},