Skip to content

Routing: Enable waypoint selection on mobile devices via a map crosshair #905

Description

@dopenguin

Description

The Routing plugin is currently unusable and thus disabled on mobile devices.
This is the case, as waypoint selection relies on a focus-then-click mechanism:
focusing an input sets currentlyFocusedInput in store.ts, which adds a Draw interaction,
so the next map click adds a coordinate (addCoordinateToRoute on drawend).
On mobile, the plugin content is rendered inside the core MoveHandle, covering the map,
so the required map tap cannot be performed without losing focus on the input.

The goal of this issue is to replace the map-click interaction on small displays with a Google-Maps-style crosshair flow.
This means adding a fixed crosshair icon at the map center after clicking a designated button next to the input.
The user then pans the map and confirms with an "Okay" button or cancels the process.
After confirming the position, the current map center is used as the coordinate for the targeted waypoint.

This procedure supersedes the Draw-interaction-flow on mobile devices.
Note that a selected coordinate should still be added to the route-layer with addCoordinateToRoute and the existing currentlyFocusedInput state is reused so little logic has to be reinvented for this implementation.
As #865 is implemented prior to this issue, the user is also able to enter an address directly through the input as an alternative.

The exact placement of the "Okay"/"Cancel" controls is intentionally left open and should be evaluated during implementation.
A Google-Maps-style on-map overlay seems preferable over placing them only in the MoveHandle.

Affected areas

File What needs to change
src/plugins/routing/components/RoutingWrapper.ce.vue Remove the v-if="!coreStore.hasSmallDisplay" guard; render a mobile-capable layout reusing existing sub-components; collapse/hide the panel while crosshair mode is active.
src/plugins/routing/components/RoutingInput.ce.vue Add a button to the right of the input to toggle map-selection (crosshair) mode for that waypoint index.
src/plugins/routing/store.ts Reuse currentlyFocusedInput as the active-waypoint indicator; branch its setter so that on hasSmallDisplay it shows/hides the center crosshair layer instead of adding/removing the Draw interaction; on confirm read map.getView().getCenter() and call addCoordinateToRoute; add cancel handling; skip the updateFocus reset while in crosshair mode so the on-map controls do not clear the active waypoint.
src/plugins/routing/composables/useLayer.ts (or a new sibling composable) Provide a center crosshair icon layer/overlay (reusing the existing useLayer pattern) shown only while in crosshair mode.
src/plugins/routing/locales.ts Add de/en strings for the map-select toggle button, crosshair confirm/cancel actions and their aria labels.

Out of scope

  • The existing focus-then-click Draw flow remains unchanged on large displays.
  • Mobile support is always enabled, so no configuration is needed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestrefactorRefactoring of previous code

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions