Popup's accepting altitude

[jscastro76]

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

[andrewharvey]

I'd like to see this supported too, both by Popup and Marker. They both have an existing offset option but that's in pixels in screen space, so an elevation offset in meters would be needed.

We'd probably want to carefully consider the API to be consistent with 3D terrain (eg. z vs elevation vs altitude) and depending which feature lands first, future proof so it could be either relative to ground or relative to the datum.

[472542625]

if pitch >60 ,is coordinate conversion normali？ @jscastro76

[jscastro76]

if pitch >60 ,is coordinate conversion normali？ @jscastro76 @472542625 Not sure if I'm understanding well the question, mapbox maxPitch is 60... so unless you modify maxPitch value in mapbox source you cannot go beyond that pitch. Anyway, these labels are pure THREE.js objects so there are no limitations of any tilt/rotation combination.

[spencerthayer]

Has there been any progress getting markers, points, or any object to render with a z-offset or altitude?

[suryakumara]

Waiting for this feature too.

[ShadyManu]

Waiting for this.. can't believe we don't have that utility yet.. you can set elevation basically everywhere, I'd love to have Popup acceptting height as well