Unable to display 3D airspace hull over a city using pydeck

[asourabh-airnav]

I am trying to display 3D hulls (e.g.: a particular volume of air, between certain altitudes or certain locations, but the volume is not a simple cuboid) using pydeck. I am using SimpleMeshLayer for displaying the volume.

The code runs without error and an html file is generated. But, when I open the output in browser, I can see other layers except the mesh layer. In the console, there is an error of Geometry geometry-1 attribute positions: must be typed array or object with value as typed array

From my review of the code, it seems that deck.gl expects a Float32Array for positions but when pydeck converts the mesh layer to json, it doesnt indicate the type of array for the position values and thus deck.gl doesnt get the data in right format.

i have used meters offset for the values for vertex positions.

Here is a reproducible example:

import pydeck as pdk

mesh_cube = { 
    'attributes' : { 
        'positions' : {
            'value' : [-500.0,  -500.0,  -500.0,  500.0,  -500.0,  -500.0,  500.0,  500.0,  -500.0,  -500.0,  500.0,  -500.0,  -500.0,  -500.0,  500.0,  500.0,  -500.0,  500.0,  500.0,  500.0,  500.0,  -500.0,  500.0,  500.0,  -500.0,  -500.0,  -500.0,  -500.0,  500.0,  -500.0,  -500.0,  500.0,  500.0,  -500.0,  -500.0,  500.0,  500.0,  -500.0,  -500.0,  500.0,  -500.0,  500.0,  500.0,  500.0,  500.0,  500.0,  500.0,  -500.0,  -500.0,  -500.0,  -500.0,  -500.0,  -500.0,  500.0,  500.0,  -500.0,  500.0,  500.0,  -500.0,  -500.0,  -500.0,  500.0,  -500.0,  500.0,  500.0,  -500.0,  500.0,  500.0,  500.0,  -500.0,  500.0,  500.0],
            'size' : 3,
            'dtype': 'float32' 
        }
        ,'normals' : { 
            'value' : [0.0,  0.0,  -1.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  1.0,  -1.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  -1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  1.0,  0.0,  0.0,  1.0,  0.0],
            'size' : 3,
            'dtype': 'float32' 
        }
    }
}

lon0, lat0 = -122.4, 37.78
size = 0.01                
half = size / 2.0

# location of mesh
data = [
    {
        "position": [float(lon0), float(lat0)], 
        "color": [255, 0, 0],         # RGB color pure bright red
        "orientation": [0, 180, 0],   
        "scale": 10                   
    },
]

# GeoJSON of the bottom face footprint
bottom_coords_llz = [
    (lon0-half,    lat0+half,    0.0),
    (lon0+half,  lat0+half,  0.0),
    (lon0+half, lat0-half, 0.0),
    (lon0-half,   lat0-half,   0.0),
    (lon0-half,    lat0+half,    0.0),  # close ring
]
bottom_geojson = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {"name": "cube ground"},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[ [lng, lat] for (lng, lat, _z) in bottom_coords_llz ]]
        }
    }]
}

footprint_layer = pdk.Layer(
    "GeoJsonLayer",
    bottom_geojson,
    stroked=True,
    filled=False,
    get_line_color=[0, 255, 0, 255],   # green outline
    line_width_min_pixels=2,
)


text_layer = pdk.Layer(
    "TextLayer",
    data=[{"lon": -122.4, "lat": 37.78, "txt": "Center"}],
    get_position=["lon", "lat"],
    get_text="txt",
    get_size=16,
    billboard=True,
    get_color=[255,255,0,255],
)


mesh_layer = pdk.Layer(
    "SimpleMeshLayer",
    data,
    mesh=mesh_cube,
    get_position="position",
    get_color="color",
    get_orientation="orientation",
    get_scale="scale",
    pickable=True,  # Allow clicking
    auto_highlight=True,
    # coordinate_system="LNGLAT",
)

view_state = pdk.ViewState(
    longitude=-122.4,
    latitude=37.78,
    zoom=14,
    pitch=45
)

r = pdk.Deck(
    layers=[mesh_layer, text_layer, footprint_layer],
    initial_view_state=view_state,
    tooltip={"text": "3D Model"}
)

r.to_html("simple_mesh_layer_example.html", notebook_display=False)

The console output is:

create-deck.js:163 deck: Using Carto base maps
util.js:349  This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.
we @ util.js:349
_._detectMissingCSS @ map.js:2285
_._setupContainer @ map.js:2298
_ @ map.js:429
_initialize @ map-wrapper.js:53
cM @ map-wrapper.js:9
sg @ deckgl.js:55
xwe @ create-deck.js:164
uM @ create-deck.js:215
(anonymous) @ simple_mesh_layer_example.html:317
deck.js:82  deck: initialization of SimpleMeshLayer({id: '5450072d-1a80-4ac4-a231-0e5acce64708'}): Geometry geometry-1 attribute positions: must be typed array or object with value as typed array Error: Geometry geometry-1 attribute positions: must be typed array or object with value as typed array
    at Yi (assert.js:8:15)
    at new Mn (geometry.js:27:13)
    at SW (simple-mesh-layer.js:64:16)
    at Nb.getModel (simple-mesh-layer.js:216:23)
    at Nb.updateState (simple-mesh-layer.js:173:41)
    at Nb._update (layer.js:776:22)
    at Nb._initialize (layer.js:731:14)
    at pm._initializeLayer (layer-manager.js:287:19)
    at pm._updateSublayersRecursively (layer-manager.js:254:26)
    at pm._updateLayers (layer-manager.js:221:14)
onError @ deck.js:82
raiseError @ layer.js:430
_handleError @ layer-manager.js:195
_initializeLayer @ layer-manager.js:291
_updateSublayersRecursively @ layer-manager.js:254
_updateLayers @ layer-manager.js:221
setLayers @ layer-manager.js:161
updateLayers @ layer-manager.js:172
_onRenderFrame @ deck.js:715
_renderFrame @ animation-loop.js:256
redraw @ animation-loop.js:154
_animationFrame @ animation-loop.js:244
requestAnimationFrame
h3 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
start @ animation-loop.js:119
await in start
o1 @ deck.js:247
sg @ deckgl.js:50
xwe @ create-deck.js:164
uM @ create-deck.js:215
(anonymous) @ simple_mesh_layer_example.html:317

I am using a clean conda based virtual environment having py3.12. Here is a list of packages installed:

# created-by: conda 25.5.1
anyio=4.10.0=py312haa95532_0
argon2-cffi=25.1.0=py312haa95532_0
argon2-cffi-bindings=25.1.0=py312h02ab6af_0
asttokens=3.0.0=py312haa95532_0
async-lru=2.0.5=py312haa95532_0
attrs=25.4.0=py312haa95532_2
babel=2.17.0=py312haa95532_0
beautifulsoup4=4.14.2=py312haa95532_0
blas=1.0=mkl
bleach=4.1.0=pyhd3eb1b0_0
bottleneck=1.4.2=py312h540bb41_1
brotlicffi=1.2.0.0=py312h885b0b7_0
bzip2=1.0.8=h2bbff1b_6
ca-certificates=2025.12.2=haa95532_0
certifi=2026.01.04=py312haa95532_0
cffi=2.0.0=py312h02ab6af_1
charset-normalizer=3.4.4=py312haa95532_0
colorama=0.4.6=py312haa95532_0
comm=0.2.3=py312haa95532_0
debugpy=1.8.16=py312h885b0b7_1
decorator=5.2.1=py312haa95532_0
defusedxml=0.7.1=pyhd3eb1b0_0
executing=2.2.1=py312haa95532_0
expat=2.7.3=h885b0b7_4
geos=3.10.6=he74ecf9_0
h11=0.16.0=py312haa95532_1
httpcore=1.0.9=py312haa95532_0
httpx=0.28.1=py312haa95532_1
idna=3.11=py312haa95532_0
intel-openmp=2025.0.0=haa95532_1164
ipykernel=6.31.0=py312h4442805_0
ipython=9.7.0=py312haa95532_0
ipython_genutils=0.2.0=pyhd3eb1b0_1
ipython_pygments_lexers=1.1.1=py312haa95532_0
ipywidgets=7.8.5=py312haa95532_0
jedi=0.19.2=py312haa95532_0
jinja2=3.1.6=py312haa95532_0
jpeg=9f=ha349fce_0
json5=0.12.1=py312haa95532_0
jsonschema=4.25.1=py312haa95532_0
jsonschema-specifications=2025.9.1=py312haa95532_0
jupyter=1.1.1=py312haa95532_0
jupyter-lsp=2.2.5=py312haa95532_0
jupyter_client=8.8.0=py312haa95532_0
jupyter_console=6.6.3=py312haa95532_1
jupyter_core=5.9.1=py312haa95532_0
jupyter_events=0.12.0=py312haa95532_1
jupyter_server=2.17.0=py312haa95532_0
jupyter_server_terminals=0.5.3=py312haa95532_0
jupyterlab=4.5.0=py312haa95532_0
jupyterlab_pygments=0.3.0=py312haa95532_0
jupyterlab_server=2.28.0=py312haa95532_0
jupyterlab_widgets=1.0.0=pyhd3eb1b0_1
lerc=3.0=hd77b12b_0
libcurl=8.17.0=h97e0424_0
libdeflate=1.17=h2bbff1b_1
libexpat=2.7.3=h885b0b7_4
libffi=3.4.4=hd77b12b_1
libhwloc=2.12.1=default_hfa10c62_1000
libiconv=1.16=h2bbff1b_3
libsodium=1.0.20=h83e8143_0
libssh2=1.11.1=h2addb87_0
libtiff=4.5.1=hd77b12b_0
libxml2=2.13.9=h6201b9f_0
libzlib=1.3.1=h02ab6af_0
lz4-c=1.9.4=h2bbff1b_1
markupsafe=3.0.2=py312h827c3e9_0
matplotlib-inline=0.2.1=py312haa95532_0
mistune=3.1.2=py312haa95532_0
mkl=2025.0.0=h5da7b33_930
mkl-service=2.5.2=py312h0b37514_0
mkl_fft=2.1.1=py312h300f80d_0
mkl_random=1.3.0=py312ha5e6156_0
nbclient=0.10.2=py312haa95532_0
nbconvert=7.16.6=py312haa95532_0
nbconvert-core=7.16.6=py312haa95532_0
nbconvert-pandoc=7.16.6=py312haa95532_0
nbformat=5.10.4=py312haa95532_0
nest-asyncio=1.6.0=py312haa95532_0
notebook=7.5.0=py312haa95532_0
notebook-shim=0.2.4=py312haa95532_0
numexpr=2.14.1=py312h7660c64_0
numpy=2.4.1=py312h050da96_0
numpy-base=2.4.1=py312h1e017a8_0
openssl=3.0.18=h543e019_0
packaging=25.0=py312haa95532_1
pandas=2.3.3=py312h42c1672_1
pandoc=3.8=haa95532_0
pandocfilters=1.5.1=py312haa95532_0
parso=0.8.5=py312haa95532_0
pip=25.3=pyhc872135_0
platformdirs=4.5.0=py312haa95532_0
proj=9.3.1=ha107b6e_0
prometheus_client=0.21.1=py312haa95532_0
prompt-toolkit=3.0.52=py312haa95532_1
prompt_toolkit=3.0.52=hd3eb1b0_1
psutil=7.0.0=py312h02ab6af_1
pure_eval=0.2.3=py312haa95532_0
pycparser=2.23=py312haa95532_0
pydeck=0.9.1=py312haa95532_0
pygments=2.19.2=py312haa95532_0
pyproj=3.6.1=py312hcaa9d94_1
pysocks=1.7.1=py312haa95532_1
python=3.12.12=h716150d_1
python-dateutil=2.9.0post0=py312haa95532_2
python-fastjsonschema=2.21.2=py312haa95532_0
python-json-logger=4.0.0=py312haa95532_0
python-tzdata=2025.3=pyhd3eb1b0_0
pytz=2025.2=py312haa95532_0
pywin32=311=py312h885b0b7_0
pywinpty=2.0.15=py312h72d21ff_0
pyyaml=6.0.3=py312hb9a58be_0
pyzmq=27.1.0=py312h7149c55_1
qtconsole=5.7.0=py312haa95532_0
qtpy=2.4.3=py312haa95532_0
referencing=0.37.0=py312haa95532_0
requests=2.32.5=py312haa95532_1
rfc3339-validator=0.1.4=py312haa95532_0
rfc3986-validator=0.1.1=py312haa95532_0
rpds-py=0.28.0=py312h114bc41_0
send2trash=1.8.3=py312haa95532_0
setuptools=80.9.0=py312haa95532_0
shapely=2.1.2=py312h0c56243_0
six=1.17.0=py312haa95532_0
sniffio=1.3.1=py312haa95532_0
soupsieve=2.5=py312haa95532_0
sqlite=3.51.1=hda9a48d_0
stack_data=0.6.3=py312haa95532_0
tbb=2022.3.0=h90c84d6_0
tbb-devel=2022.3.0=h90c84d6_0
terminado=0.18.1=py312haa95532_0
tinycss2=1.5.1=py312haa95532_0
tk=8.6.15=hf199647_0
tornado=6.5.4=py312h02ab6af_0
traitlets=5.14.3=py312haa95532_0
typing-extensions=4.15.0=py312haa95532_0
typing_extensions=4.15.0=py312haa95532_0
tzdata=2025b=h04d1e81_0
ucrt=10.0.22621.0=haa95532_0
urllib3=2.6.3=py312haa95532_0
vc=14.3=h2df5915_10
vc14_runtime=14.44.35208=h4927774_10
vs2015_runtime=14.44.35208=ha6b5a95_10
wcwidth=0.2.14=py312haa95532_0
webencodings=0.5.1=py312haa95532_2
websocket-client=1.8.0=py312haa95532_0
wheel=0.45.1=py312haa95532_0
widgetsnbextension=3.6.10=py312haa95532_0
win_inet_pton=1.1.0=py312haa95532_1
winpty=0.4.3=4
xz=5.6.4=h4754444_1
yaml=0.2.5=he774522_0
zeromq=4.3.5=h6c54ac7_1
zlib=1.3.1=h02ab6af_0
zstd=1.5.7=h56299aa_0

[asourabh-airnav]

Can pydeck be used to display free floating hulls over maps?