Skip to content

Conversation

@kaziNymul
Copy link

Add Google Maps-style map rotation using leaflet-rotate plugin:

  • Mobile: Two-finger touch gesture to rotate
  • Desktop: Shift + mouse drag to rotate

The feature is configurable via config.map.allowRotation (default: true) and can be disabled per-theme if needed.

Changes:

  • Add leaflet-rotate dependency
  • Enable rotation props in Map.js component
  • Add allowRotation config option in config.default.js

Proposed Changes

Pull Request Check List

  • A reasonable set of unit tests is included
  • Console does not show new warnings/errors
  • Changes are documented or they are self explanatory
  • This pull request does not have any merge conflicts
  • All existing tests pass in CI build

Review

  • Read and verify the code changes
  • Test the functionality by running the UI locally with all popular browsers available in your platform
  • Check that the implementation matches the design, when such one is defined in an issue in Azure Boards
  • Merge the pull request

Add Google Maps-style map rotation using leaflet-rotate plugin:
- Mobile: Two-finger touch gesture to rotate
- Desktop: Shift + mouse drag to rotate

The feature is configurable via config.map.allowRotation (default: true)
and can be disabled per-theme if needed.

Changes:
- Add leaflet-rotate dependency
- Enable rotation props in Map.js component
- Add allowRotation config option in config.default.js
@kaziNymul
Copy link
Author

@Antiik91 @Jontzii @optionsome @vesameskanen - Could you please review this feature addition? It adds 360-degree map rotation similar to Google Maps. Thanks!

@vesameskanen
Copy link
Member

Thanks for contribution. Some comments:

  • What is the use case for map rotation by a gesture? It might cause bad user experience when the map gets rotated accidentally, especially because leaflet raster map does not keep rotated labels readable (they may appear upside down). Therefore, the option cannot be enabled by default.
  • We do have new feature development which will benefit from automatic map rotation. The map should be oriented by mobile device sensors. This will help to read the map while walking on a street. In order to allow this, we will replace leaflet with a new vector map engine (e.g. MapLibre) at some point. New map will be able to keep labels readable on a rotating map. Considering the upcoming map engine change, do you think that merging this PR makes sense?

@kaziNymul
Copy link
Author

Thank you for the detailed feedback and sharing your roadmap!

My Use Case

My primary motivation was navigation during transport transfers (e.g., switching between bus/metro/tram). When I arrive at an unfamiliar station and need to find my next platform or exit, I often need to orient the map to match my physical direction. Currently, I find myself switching to Google Maps for this.

I Understand the Concerns

You raise valid points:
Accidental rotation - I agree this can frustrate users
Upside-down labels - Raster maps don't handle rotation gracefully
Default setting - You're right, it shouldn't be enabled by default

Given Your Roadmap

Since you're planning to:

  1. Replace Leaflet with MapLibre (vector maps)
  2. Implement sensor-based automatic rotation
  3. Have proper label rendering on rotated maps

It makes sense to wait for the proper implementation rather than merge this as a temporary solution.

My Suggestion

I'm happy to:

  • Close this PR if you prefer to wait for MapLibre integration
  • Or modify it to keep allowRotation: false by default, available only for testing/development

Thank you for considering this feature request. Looking forward to the MapLibre update! 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants