MapLibre GL JS (Deck GL and 3D Buildings) Maps not work in Streamlit App. Show the only blank display and ground basemap.

[datafyresearcher]

Environment Information

• leafmap version: 0.35.1
• streamlit version: 1.36.0
• Python version: 3.11.5
• Operating System: Window 11

Description: Issue-1

This Leafmap code is not working in the Streamlit app, resulting in a blank screen.. URL: https://leafmap.org/maplibre/add_deckgl_layer/

import leafmap.maplibregl as leafmap
import streamlit as st
import requests

st.set_page_config(layout="wide")  # Optional: for a wider layout

data = requests.get("https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json").json()

m = leafmap.Map(
    style="positron",
    center=(-122.4, 37.74),
    zoom=12,
    pitch=40,
)
deck_grid_layer = {
    "@@type": "GridLayer",
    "id": "GridLayer",
    "data": data,
    "extruded": True,
    "getPosition": "@@=COORDINATES",
    "getColorWeight": "@@=SPACES",
    "getElevationWeight": "@@=SPACES",
    "elevationScale": 4,
    "cellSize": 200,
    "pickable": True,
}

m.add_deck_layers([deck_grid_layer], tooltip="Number of points: {{ count }}")
m.to_streamlit(height=800)

Description: Issue-2

This is a Leafmap code implementation in a Streamlit app, displaying ground map details such as basemap information. However, it does not provide a 3D building map in the Streamlit app, although it works in Jupyter Notebook. In this implementation, I used my MAPTILER_KEY. URL: https://leafmap.org/maplibre/3d_buildings/

MAPTILER_KEY = leafmap.get_api_key("MAPTILER_KEY")
style = f"https://api.maptiler.com/maps/basic-v2/style.json?key={MAPTILER_KEY}"

m = leafmap.Map(center=[-74.0066, 40.7135], zoom=16, pitch=45, bearing=-17, style=style)
source = {
    "url": f"https://api.maptiler.com/tiles/v3/tiles.json?key={MAPTILER_KEY}",
    "type": "vector",
}

layer = {
    "id": "3d-buildings",
    "source": "openmaptiles",
    "source-layer": "building",
    "type": "fill-extrusion",
    "min-zoom": 15,
    "paint": {
        "fill-extrusion-color": [
            "interpolate",
            ["linear"],
            ["get", "render_height"],
            0,
            "lightgray",
            200,
            "royalblue",
            400,
            "lightblue",
        ],
        "fill-extrusion-height": [
            "interpolate",
            ["linear"],
            ["zoom"],
            15,
            0,
            16,
            ["get", "render_height"],
        ],
        "fill-extrusion-base": [
            "case",
            [">=", ["get", "zoom"], 16],
            ["get", "render_min_height"],
            0,
        ],
    },
}
m.add_source("openmaptiles", source)
m.add_layer(layer)
m.to_streamlit(height=800)

What I Did

Please review this issue. Either resolve it in Leafmap or create a new feature in Streamlit to execute the relevant maps.

Paste the command(s) you ran and the output.
If there was a crash, please include the traceback here.