Synched features disappear after route change

[bejohu]

Example: https://codesandbox.io/s/vue-routing-example-h98xw?file=/components/Hello.vue

How to reproduce:

1. Draw some features on map.
2. Change route to some other page.
3. Return to back to map.

Workaround: Replace string name "draw-target" in ident / source attrs with unique value, e.g. draw-target-${Date.now()}

[Soren-Knudsen]

I am able to reproduce the same behavior when using the Vue Router. All my vector layers disappear if a change the route back and forth. Please note that I am not using the sync feature.

I am not able to get your workaround working (Se the following snippet). Are you doing anything different?

<vl-layer-vector :ident="'feature-' + new Date().getTime()">
    <vl-source-vector
        :strategy-factory="featureLoadStrategy"
        :features="features"
        :projection="'EPSG:4326'"
    ></vl-source-vector>
</vl-layer-vector>

[ghettovoice]

Hi there! @bejohu I don't see any problems with your codesample https://drive.google.com/file/d/1pF3WH-S_2sjZ-jxIpxO81f9I8_wkHuQC/view?usp=sharing

@Soren-Knudsen when you switch to another route, the components of the previous route are destroyed. So when you come back, the Vue re-create new components, therefor vector layers bound to urls are reloaded, vector layers bound to features prop don't do anything because you don't synchronize features to any storage.

[Soren-Knudsen]

Hi @ghettovoice

Can you elaborate on "...vector layers bound to features prop don't do anything because you don't synchronize features to any storage"? In my case features are fetched from my Vuex store. So when the Map component gets recreated by Vue (navigate back and forth) it should automatically populate the vector layer, right? I have created a BaseMap component which wraps the <vl-map> component with default settings and so on and added a <slots> for making it possible for others to extend it can this design cause any trouble with your component?

<vl-map>
    <vl-view ...></vl-view>
    <vl-layer-tile>
        <vl-source-wmts ...></vl-source-wmts>
    </vl-layer-tile>
    <slot></slot>
</vl-map>

[ghettovoice]

it should automatically populate the vector layer, right?

Yes, if you bind vl-source-vector features prop to the computed property from store. https://codesandbox.io/s/vue-router-vuex-example-yt2qu?file=/components/Hello.vue

[Soren-Knudsen]

@ghettovoice Thanks for your quick reply. I think, I figured it out what happened. I had multiple layers with the same z-index which caused the base layer to be on top sometimes.

[bejohu]

@ghettovoice Exactly! Any newly drawn features survive the route change, but the initial features disappear.

Please check out the new / better example.

The steps to reproduce are:

1. Make sure you refresh the page / open the link again in incognito mode. 10 static features defined in data() {} should be visible on the map.
2. Now draw one or more new feature on the map in addition to the existing 10.
3. Route to the other page.
4. Go back to the map.

Result: The initial features are not shown anymore.

Here is the example:

https://bprq9.csb.app/hello (https://codesandbox.io/s/vue-routing-example-bprq9?file=/components/Hello.vue)

This is the version applying the workaround:

https://r4eki.csb.app/ (https://codesandbox.io/s/vue-routing-example-r4eki?file=/components/Hello.vue)

[ghettovoice]

@bejohu thanks for examples. Now I see, it seems a bug with identity map usage between vl-interaction-draw and vl-source-vector. I need sometime to understand how to fix this. You workaround is a good compromise 👍