Cannot execute example code

[jan-casas]

Hello, i am trying to reproduce some example code but i cannot execute it. Just keeps loading with a black screen. Here is the code example, maybe something change in the latest release? Any idea? thank you!

import os

import dash
import dash_deck
import dash_html_components as html
import pydeck as pdk
import pandas as pd

mapbox_api_token = os.getenv("MAPBOX_ACCESS_TOKEN")

app = dash.Dash(__name__)

# Map of San Francisco from 1906
IMG_URL = '"https://i.imgur.com/W95ked7.jpg"'

# Specifies the corners of the image bounding box
BOUNDS = [
    [-122.52690000000051, 37.70313158980733],
    [-122.52690000000051, 37.816395657523195],
    [-122.34604834372873, 37.816134829424335],
    [-122.34656848822227, 37.70339041384273],
]

bitmap_layer = pdk.Layer(
    "BitmapLayer", data=None, image=IMG_URL, bounds=BOUNDS, opacity=0.7
)

view_state = pdk.ViewState(
    latitude=37.7576171, longitude=-122.5776844, zoom=10, bearing=-45, pitch=60,
)

r = pdk.Deck(
    bitmap_layer,
    initial_view_state=view_state,
    map_style=pdk.map_styles.SATELLITE,
    # mapbox_key=mapbox_api_token,
)

app.layout = html.Div(
    dash_deck.DeckGL(r.to_json(), id="deck-gl", mapboxKey=mapbox_api_token)
)

if __name__ == "__main__":
    app.run_server(debug=False)

[KS-HTK]

As to why you are not seeing a map. Add map_provider="mapbox" to pdk.Deck. Default map provider is carto and they do not seem to support map_style.SATELLITE. Look here for supported styles of carto.

r = pdk.Deck(
    bitmap_layer,
    initial_view_state=view_state,
    map_provider="mapbox",
    map_style=pdk.map_styles.SATELLITE,
)

---

For me the bitmap won't load due to a 403 Forbidden from imgur. Not sure why as loading the URL directly works fine. Possibly just an issue with using imgur.

Using the example from deck.gl documentation works fine for me. They use this URL: https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png

You should not need to double Quote the URL either. Here is the version I got running:

import os
import dash
import dash_deck
from dash import html
import pydeck as pdk

mapbox_api_token =  os.getenv("MAPBOX_ACCESS_TOKEN")

app = dash.Dash(__name__)

# Map of San Francisco from 1906
IMG_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png'

# Specifies the corners of the image bounding box
BOUNDS = [-122.5190, 37.7045, -122.355, 37.829]

bitmap_layer = pdk.Layer(
    "BitmapLayer", image=IMG_URL, bounds=BOUNDS, opacity=0.7
)

view_state = pdk.ViewState(
    latitude=37.7576171, longitude=-122.5776844, zoom=10, bearing=-45, pitch=60,
)

r = pdk.Deck(
    bitmap_layer,
    initial_view_state=view_state,
    map_provider="mapbox",
    map_style=pdk.map_styles.SATELLITE,
)

app.layout = html.Div(
    dash_deck.DeckGL(r.to_json(), id="deck-gl", mapboxKey=mapbox_api_token)
)

if __name__ == "__main__":
    app.run_server(debug=False)