My problem
My app is composed of two major tabs, Home and Map (I use OpenLayers). Home shows some details about a randomly chosen Feature on the Map, and has a button that navigates to the map with focus on this specific Feature.
The problem is that when I open the Map before clicking the button, it gets loaded with no particular focus but then clicking the button in Home won’t focus the Feature, as the map has already been setup
and mounted
.
What I tried
Here is my current code for the button, using query parameters:
<!-- The button is actually a small map with a preview of the feature's location -->
<div id="mapContainer" @click="activateMap([discovery.lng, discovery.lat])"></div>
activateMap() {
const mapInstructions = {
path: "/tabs/map/",
query: {
type: discovery.dType,
id: discovery.id
}
};
this.$router.push(mapInstructions);
}
And the component is getting the data this way:
const route = useRoute();
const dType = route.params.dType.toString;
const id = route.params.id.toString();
if (dType && id) {
const discovery = getDiscovery(parseInt(id), dType);
this.focusDiscovery(discovery);
}
I also tried watching '$route'
but then if I click the button, the focus is made every time, while I only want to force the focus when clicking the button. The reason is because the URI is not reset when opening the Map using my tabs toolbar, so it keeps all query params.
An alternative (but I couldn’t find how to) would be to run a function with this last piece of code every time the map is shown, whatever the way (button or tabs navigation).
How can I solve this?