Deck.gl: Using local image file with BitmapLayer doesn't work - Pydeck

[TareqAlqutami]

Description

Trying to load a bitmap layer using pydeck from local image file. Setting the image argument to point to the full path of the image results in a black image. I tried to use the pydeck example and just downloaded the image from the url and pointed to where it is locally. Using the URL works but local file shows black image.
I tried to encode the image as base64 using below line, in this case no thing shows up.

import base64
image = 'data:image/jpeg;base64,'+ str(base64.b64encode(open("/path/to/file", "rb").read()).decode('utf-8'))

Steps to produce the issue

• Download the image from https://i.imgur.com/W95ked7.jpg to local directory
• Change the IMG_URL in the example code (https://pydeck.gl/gallery/bitmap_layer.html) to point to the downloaded file (using one set of quotation only)

import pydeck as pdk

# Map of San Francisco from 1906
# IMG_URL = '"https://i.imgur.com/W95ked7.jpg"'
IMG_URL = "path/to/file.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)

r.to_html("bitmap_layer.html")

Environment (

• Pydeck Version: '0.5.0b1'
• Browser Version: FireFox 80.0.1, Chrom 76.0.3809.87
• OS:Ubuntu 18

[Pessimistress]

I tried to encode the image as base64 using below line

An easy test is to paste your image string into the browser's location bar and see if it displays. If not, then it is not a valid image.

[ajduberstein]

You can base64 encode that image and then wrap the encoded data in quotes to indicate to pydeck that it's a string literal.

import pydeck as pdk

# base64-encoded image string of a red dot
IMG_URL = '"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="'
# 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)

r.to_html()

Currently your image asset must be served or passed as a base64-encoded string. Then the URL or encoded string must be wrapped in quotes, e.g., "'data:image/png...'" that lets pydeck know to interpret that asset as a string. This PR will help switch this awkward syntax for something more intuitive.

[TareqAlqutami]

Thanks a lot @ajduberstein , wrapping the encoded data in quotes solved my issue. This was the missing info for me.
It would be great if this can be clarified somewhere in the docs (at least in pydeck docs). Enclosing the encoded data in additional quotes is not intuitive syntax, at least for me.