Using gyroscope to trigger map rendering (parallax) #1980

wiesehahn · 2022-12-22T10:42:17Z

wiesehahn
Dec 22, 2022

Not sure if this is the right place to ask...

I am wondering if it would be somehow possible to create more immersive three-dimensional maps by changing the mapview based on indirect user interaction (enot click, drag, scroll).

The main application I have in mind would be to render the map on mobile devices based on the gyroscope. Tilting of the device is recorded by the gyroscope which triggers the map rendering.
On a 2D map this could for example trigger the shift (parallax effect) of elements in a certain layer (e.g. points, labels) over the basemap to make them visually pop out (motion perception).
I imagine this effect especially effective for 3D terrain maps to give a sense of elevation.

Something similar where map rotation is triggered is shown here 3d-maps-for-android

Visual example:

HarelM · 2022-12-22T15:13:29Z

HarelM
Dec 22, 2022
Maintainer

I think this is possible, but the performance of this might be problematic.
You could try and hack it out though.

0 replies

amenk · 2023-02-11T17:32:41Z

amenk
Feb 11, 2023

Just a rough example setting the pitch based on orientation - performance is pretty good. Not sure if it's that what you mean.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css'>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 20px;
            bottom: 0;
            width: 100%;
        }
    </style>


</head>

<body>
<div id="gyro">gyro</div>
<div id="map"></div>
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>

<script>
    var map = new maplibregl.Map({
        container: 'map', // container id
        style: 'https://africa.tiles.openplaceguide.org/styles/bright/style.json', // style URL
        center: [38.790278294521386, 8.98727616588279], // starting position [lng, lat]
        zoom: 18 // starting zoom
    });


    const options = { frequency: 60, referenceFrame: "device" };
    const sensor = new AbsoluteOrientationSensor(options);

    sensor.addEventListener("reading", () => {
        let quaternion = sensor.quaternion;
        document.getElementById('gyro').innerText = `${quaternion} `;
        map.setPitch(quaternion[0] * 100);
    });

    sensor.addEventListener("error", (error) => {
        if (event.error.name === "NotReadableError") {
            window.alert("Sensor is not available.");
        }
    });

    Promise.all([
        navigator.permissions.query({ name: "accelerometer" }),
        navigator.permissions.query({ name: "magnetometer" }),
        navigator.permissions.query({ name: "gyroscope" }),
    ]).then((results) => {
        if (results.every((result) => result.state === "granted")) {
            sensor.start();
            // …
        } else {
            window.alert("No permissions to use AbsoluteOrientationSensor.");
        }
    });
</script>
</body>
</html>

1 reply

wiesehahn Aug 11, 2023
Author

awesome, thanks!
I was'nt looking at this for a long time (the first time I tried it did not work under firefox, but chrome supports the sensor API).

This is definitely going in the direction I thought about and looks great with terrain. However I still didnt figure out how to mimic the the behaviour of the sample image above. Especially I couldnt find a way to do the sidewards tilting.

wiesehahn · 2024-09-02T20:37:49Z

wiesehahn
Sep 2, 2024
Author

Just stumbled across MapOut. Don't know which library they are using but they have implemented more or less what I was thinking about.

2 replies

HarelM Sep 3, 2024
Maintainer

Currently the camera's pitch in MapLibre can only move up and down and not sideways.
In terms of webgl this is possible, but I don't have the expertise to do it.
Maybe there's a way to change the projection matrix to create this effect, I'm not sure...

wiesehahn Sep 3, 2024
Author

Yes, and negative tilting is also not possible as far as I know.
If someone finds a solution or this will be implemented, let me know.

We humans perceive moving objects quite well, so this effect is not just superb with terrain but also e.g. to make (elevated) labels or markers more visible.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using gyroscope to trigger map rendering (parallax) #1980

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Using gyroscope to trigger map rendering (parallax) #1980

wiesehahn Dec 22, 2022

Replies: 3 comments · 3 replies

HarelM Dec 22, 2022 Maintainer

amenk Feb 11, 2023

wiesehahn Aug 11, 2023 Author

wiesehahn Sep 2, 2024 Author

HarelM Sep 3, 2024 Maintainer

wiesehahn Sep 3, 2024 Author

wiesehahn
Dec 22, 2022

Replies: 3 comments 3 replies

HarelM
Dec 22, 2022
Maintainer

amenk
Feb 11, 2023

wiesehahn Aug 11, 2023
Author

wiesehahn
Sep 2, 2024
Author

HarelM Sep 3, 2024
Maintainer

wiesehahn Sep 3, 2024
Author