1

I have two layers built on FeatureCollection GeoJSON data. One of them is of type circle and the other is symbol. Here they are:

enter image description here

Thing is, as you can see in our project we use 3D buildings on the map, and we need our objects to be at a certain altitude above the ground. The question is, how to do this in Mapbox?

Here's what I've tried:

GeoJSON feature coordinates

An OPTIONAL third-position element SHALL be the height in meters above or below the WGS 84 reference ellipsoid. In the absence of elevation values, applications sensitive to height or depth SHOULD interpret positions as being at local ground or sea level. — GeoJSON spec.

I've tried setting the third argument for a feature's geometry, which is a point, but it didn't help. Looks like the third value is just being ignored.

      return {
        type: 'Feature',
        id: l.id,
        geometry: {
          type: 'Point',
          coordinates: [l.coordinates.lng, l.coordinates.lat, 50]
        }
      }

circle-translate

The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.

I've tried setting this but the result looked super weird, it didn't look like a normal elevation.

Example

I've modified an example from Mapbox so you can play around with this — here.

Randex
  • 770
  • 7
  • 30
  • circle-translate is the way to handle the offset, you should play with the circle-pitch-alignment, circle-pitch-scale, and circle-translate-anchor to see if that helps. I think the issue you'll run into is that the circle layer will produce a flat vector graphic, you'll have better luck using the symbol layer with custom icons. This will allow you to create a hover effect by messing with symbol offset and pitch along with the label anchor and pitch, combined with a custom icon graphic to show depth (3d orb) – Ed Barahona Aug 18 '23 at 00:14

1 Answers1

0

There is no support for setting elevation on symbol layers. See https://github.com/mapbox/mapbox-gl-js/issues/3993 and https://github.com/mapbox/mapbox-gl-js/issues/10483

Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
  • 1
    Bad news :( So now workarounds for this or some other libraries on top of Mapbox? I've tried looking for them, but couldn't find anything myself. – Randex Nov 30 '21 at 10:25