Popup's accepting altitude

Motivation

First of all thanks for all the work you have been doing through the years with Mapbox. I know you're always open for feedback and suggestions, so here I go...

One of the features I've been missing a lot is the possibility to have popups with altitude for my fill-extrusions and my 3D models, so I finally implemented my own version using THREE.CSS2DObject, but honestly it's only a workaround that could be made within popup class that is the proper place.

Design

To implement these custom popups with altitude, it required to create a new CSS2DRenderer instance and call it's render method on the render member of a CustomLayerInterface new layer. Then, create a CSS2DObjetc, add the HTML inside and set position.

This is how it works using the default sample for 3D buildings adding a queryRenderedFeatures call on click to filter the extrusions at the point clicked, and then creating two popups in the same LngLat position, but one using the custom approach including altitude and the other one using the standard popup class. I use feature.properties.height of the clicked extrusion to create one of these custom popups. Position is quite stable on any camera pitch/zoom/bearing combination. I use a converter to project the LngLat + Alt coordinates to position properly.

Implementation

I have updated the jsfiddle Add a 3D model with Popup in Altitude with a simplified sample for better understanding, comparing this custom popup with a standard Mapbox popup.

As far as I understand, the main difference (apart from the input of a third parameter for altitude) is the calculation of the css translate values for offsetedPos.x and offsetedPos.y final pixels done in _update member, but I could be wrong. I'm aware this could be a major change for popup but I think it deserves the effort now that your maps are now supporting 3D models and fill-extrusions.

Thanks in advance,
@jscastro76

Start with the popup class in src/ui/popup.js, then compare the 3D buildings example and the linked jsfiddle showing CSS2DObject positioning. Review the CustomLayerInterface render entry point and the popup _update member. Done means the standard popup supports an altitude input and remains correctly positioned across camera pitch, zoom, and bearing.