radical-data / queering-the-map

Queering the Map is a community-based platform where individuals anonymously pin their queer experiences and stories on a global map.
https://queeringthemap.com
16 stars 5 forks source link

Cardinal orientation is locked to North-South #80

Open nielsbom opened 2 months ago

nielsbom commented 2 months ago

(from Slack)

And navigating the site on mobile a bit: I quickly went into a non-North-South orientation and could only get it back to "regular" manually. This doesn't happen on desktop. Is this something we'd like to change? Some solutions: Prevent different orientations (sounds opposite to what the site stands for now that I read it). This is what Google Maps does on desktop and mobile. A button to re-orient to north-south (see attached image). The re-orientation button could either appear only when the orientation is not north-south. Or be always visible (maybe a bit much on desktop).

CleanShot 2024-07-02 at 10 58 42

nielsbom commented 2 months ago

Lucas:

Ah I would prefer to force the north/south axis, rather than adding in the orientation icon

Elie-Simard commented 2 weeks ago

To block the orientation axis to north/south I'm thinking adding these lines to src/lib/map.svelte on line 97:

    map.dragRotate.disable();  // Disables rotation via dragging.
    map.touchZoomRotate.disableRotation();  // Disables rotation via touch gestures.
    map.keyboard.disable();  // Optional: Disables keyboard interactions. (**it was set to .enable before**)

I tried to test it on my phone via localhost but the map isn't showing up

jokroese commented 2 weeks ago

That looks right. I would have expected MapLibre to have a one-liner for this but I don't think they do.

The other option would be to force the bearing set to 0 (e.g. map.on('rotate', () => map.setBearing(0)); but that could cause a glitchy response, not sure.

I liked including the keyboard option for navigating the map and I think it's useful for accessibility. Could you look into if there's a way to keep that keyboard functionality but not allow rotation? Or test out the option above.

On the map not showing up, the tiles will have CORS issues if you access it through your phone. Maybe we use a different approach for which sites are allowed (similar question to #42). All-in-all, current approach is causing a hassle with the development workflow.