Spherical geometry question - directions and non-great circles

Factual Questions
41

The earth being oblong/elliptical makes things difficult for flat maps.

On one app, using flat Leaflet maps, I usually show one thing (a city, port, etc…) and below that have a navigation row of buttons where the user can go to the next place and so forth. I use nautical miles and try to show a compass direction. I reckon the distance is about right yet the compass pointer is really only a general “go thataways”. I use what I believe is the haversine algorithm through PostGis as such:

                ST_DistanceSphere(
                    t.geom_point,
                    (SELECT p.geom_point FROM ports p WHERE p.id = target_id)
                ) / 1852 AS distance_nm,
                ROUND(
                    degrees(
                        ST_Azimuth(
                            (SELECT p.geom_point FROM ports p WHERE p.id = target_id),
                            t.geom_point
                        )
                    )
                ) AS degrees

It’s a horseshoes and handgrenades closeness.

Recently I started using spherical globes with THREE and globe.gl. My goal was to have airplanes of various kinds fly from airport to airport. I try to keep the airplane pointing in the direction it’s going and rather than keep doing diffs I calculate the curve at takeoff.

My flightcurve function:

    function makeFlightCurve(startLat, startLng, endLat, endLng) {
        const start = globe.getCoords(startLat, startLng);
        const end = globe.getCoords(endLat, endLng);
        const startVec = new THREE.Vector3(start.x, start.y, start.z);
        const endVec = new THREE.Vector3(end.x, end.y, end.z);
        const midVec = startVec.clone().add(endVec).normalize();
        const earthRadius = startVec.length();
        const distance = startVec.distanceTo(endVec);
        const arcHeight = Math.min(earthRadius * 0.2, distance * 0.3);
        midVec.multiplyScalar(earthRadius + arcHeight);
        return new THREE.QuadraticBezierCurve3(startVec, midVec, endVec);
    }

All the planes appear to be flying too high, and furthermore for long-haul flights I have to give them even more altitude in the middle else they dive into the Pacific and emerge near Hong Kong (etc..) so they often look like they’re in low-earth-orbit.

I’ve put both of the above on hiatus for a while to get other useful things done.