Camera positionning

[cigone-openindoor]

I suggest this code to easily manipulate maplibre camera position:

        map.getCameraPosition = () => {
            const pitch = map.transform._pitch;
            const altitude = Math.cos(pitch) * map.transform.cameraToCenterDistance;
            const latOffset = Math.tan(pitch) * map.transform.cameraToCenterDistance;
            const latPosPointInPixels = map.transform.centerPoint.add(new maplibregl.Point(0, latOffset));
            const latLong = map.transform.pointLocation(latPosPointInPixels);
            const verticalScaleConstant = map.transform.worldSize / (2 * Math.PI * 6378137 * Math.abs(Math.cos(latLong.lat * (Math.PI / 180))));
            const altitudeInMeters = altitude / verticalScaleConstant;
            return { lng: latLong.lng, lat: latLong.lat, altitude: altitudeInMeters, pitch: pitch * 180 / Math.PI };
        }

        map.setCameraPosition = (camPos) => {
            const { lng, lat, altitude, pitch } = camPos;
            const pitch_ = pitch * Math.PI / 180;
            const cameraToCenterDistance = 0.5 / Math.tan(map.transform._fov / 2) * map.transform.height;
            const pixelAltitude = Math.abs(Math.cos(pitch_) * cameraToCenterDistance);
            const metersInWorldAtLat = (2 * Math.PI * 6378137 * Math.abs(Math.cos(lat * (Math.PI / 180))));
            const worldsize = (pixelAltitude / altitude) * metersInWorldAtLat;
            const zoom = Math.log(worldsize / map.transform.tileSize) / Math.LN2;
            const latOffset = Math.tan(pitch_) * cameraToCenterDistance;
            const newPixelPoint = new maplibregl.Point(map.transform.width / 2, map.transform.height / 2 + latOffset);
            const newLongLat = new maplibregl.LngLat(lng, lat);
            map.transform.zoom = zoom;
            map.transform.pitch = pitch;
            map.transform.setLocationAtPoint(newLongLat, newPixelPoint);
        }

Example of usage here: https://open-indoor.github.io/examples/immersive-camera/

[HarelM]

Can you add some context? Problem statement? How would this work with the terrain 3d branch etc...

[clement-igonet]

Well, it's just something very useful for me, so I would like to share.
No idea about terrain 3D dev branch...
I'll add an example in maplibre examples page.

[HarelM]

Converting to a discussion...

[AbelVM]

Looks like the logic up there is missing the bearing, am I right?

[danielfaust]

2022-09-09

Google is using heading instead of bearing. It would equate the following code:

var heading = map.transform.angle * 180 / Math.PI
if (heading > 0) heading = 360 - heading
if (heading < 0) heading = -heading

Basically the call

console.log('https://www.google.com/maps/@'+
    cameraPosition.lat+','+
    cameraPosition.lng+','+
    cameraPosition.altitude+'a,'+
    '35y,'+
    heading+'h,'+
    cameraPosition.pitch+'t'+
    '/data=!3m1!1e3')

generates a link which will replicate the current view in Google Maps.

I find the functions provided by @cigone-openindoor pretty helpful, they do add value.

---

2022-09-10

There's an issue with the location hash. While it gets updated, the previous one isn't retained in the browser's history so there's no back button functionality available.

There's another issue in the sense that setCameraPostion cannot get animated properly, at least when 3D terrain is being used and the altitude of the camera is being animated. It results in very jittery transitions.

[forna]

Updated version:

function getCameraPosition(mapObj) {
    if (mapObj) {
        const lngLat = mapObj.getCenter()
        const pitchInDegrees = mapObj.getPitch()  // getPitch() gives degrees
        const bearing = mapObj.getBearing()
        const pitchInRadians = pitchInDegrees * (Math.PI / 180) // convert degrees -> radians
        const altitudeWithoutScaling = Math.cos(pitchInRadians) * mapObj.transform.cameraToCenterDistance
        const earthCircAtLat = 2 * Math.PI * 6378137 * Math.abs(Math.cos(lngLat.lat * (Math.PI / 180)))
        const verticalScaleConstant = mapObj.transform.worldSize / earthCircAtLat
        const altitudeInMeters = altitudeWithoutScaling / verticalScaleConstant
        return {
            lng: lngLat.lng,
            lat: lngLat.lat,
            pitch: pitchInDegrees,
            bearing: bearing,
            altitude: altitudeInMeters
        }
    }
    else return null
}