Issue with Map Focus
Within my application, there are two main tabs - Home and Map. The map functionality is implemented using OpenLayers. When navigating from the Home tab to the Map tab, a specific feature on the map should be focused on. However, if the Map tab is opened before clicking the designated button, the feature does not receive focus.
The current implementation involves a button within the Home tab that triggers the loading of the Map tab with focus on the selected feature:
<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);
}
The challenge lies in ensuring that the feature receives focus only when triggered by the button, rather than every time the route changes. This is due to the persistent query parameters in the URI even when navigating through tabs.
One attempted solution involved watching '$route', but this resulted in the focus being applied consistently, contrary to the intended behavior.
An alternative approach would involve running a function to handle the focus each time the Map tab is accessed, regardless of whether it was triggered by the button or tab navigation.
How can this issue be effectively addressed?