pydeck: Error in examples: missing 1 required positional argument: 'data'

[bpicard-fluctus]

Hi all,

I'm Bruno, I want to use pydeck to display earth observation satellite data.
I just installed pydeck via condaforge, version 0.5
I copied/pasted the s2layer example and it works just fine.

But TerrainLayer and BitmapLayer crashed with the same error in the same method:

 File "./example_pydeck_bitmaplayer.py", line 29, in <module>
    bitmap_layer = pdk.Layer("BitmapLayer", image=IMG_URL, bounds=BOUNDS, opacity=0.7)
TypeError: __init__() missing 1 required positional argument: 'data'

  File "./example_pydeck_terrainlayer.py", line 25, in <module>
    terrain_layer = pdk.Layer("TerrainLayer", elevation_decoder=ELEVATION_DECODER, texture=SURFACE_IMAGE, elevation_data=TERRAIN_IMAGE)
TypeError: __init__() missing 1 required positional argument: 'data'

Any idea what went wrong ?

regards,
Bruno

[kylebarron]

I think data is the second argument. Can you try with

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

and see if that works?

[bpicard-fluctus]

Hi Kyle,
Thx for answering.
No more error message... But the html output is blank/void...

[ajduberstein]

Hi @bpicard-fluctus, can we get some source code? BitmapLayer and TerrainLayer will no longer require the data argument in pydeck 0.6, which goes out this week.

[bpicard-fluctus]

Hi @ajduberstein ,
the python script is a copy/paste of the example found on pydeck documentation:
`#! /usr/bin/env python3

-- coding: utf-8 --

"""
BitmapLayer

A 1906 Britton & Rey's map of San Francisco's 1906 fire, overlaid on
an interactive map of San Francisco.
"""

import pydeck as pdk
import os

mapbox_api_token = os.getenv("MAPBOX_ACCESS_TOKEN")

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_provider="mapbox", map_style=pdk.map_styles.SATELLITE, mapbox_key=mapbox_api_token)

r.to_html("bitmap_layer.html")`

[bpicard-fluctus]

and here is the source code of the bitmap_layer.html page [displayed by firefox 82.0.3 (64 bits) on Pop os 20.04]
`

<title>pydeck</title> <script src='https://cdn.jsdelivr.net/npm/@deck.gl/jupyter-widget@~8.3.*/dist/index.js'></script> <style> body { margin: 0; padding: 0; overflow: hidden; }

#deck-map-container {
  width: 100%;
  height: 100%;
  background-color: black;
}

#map {
  pointer-events: none;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}

#deckgl-overlay {
  z-index: 2;
  background: none;
}

#deck-map-wrapper {
  width: 100%;
  height: 100%;
}

#deck-container {
  width: 100vw;
  height: 100vh;
}
</style>

<script> const jsonInput = {"initialViewState": {"bearing": -45, "latitude": 37.7576171, "longitude": -122.5776844, "pitch": 60, "zoom": 10}, "layers": [{"@@type": "BitmapLayer", "bounds": [[-122.52690000000051, 37.70313158980733], [-122.52690000000051, 37.816395657523195], [-122.34604834372873, 37.816134829424335], [-122.34656848822227, 37.70339041384273]], "id": "65505fba-ff86-44ae-a12b-2cdd62348f01", "image": "@@=https://i.imgur.com/W95ked7.jpg", "opacity": 0.7}], "mapProvider": "mapbox", "mapStyle": "mapbox://styles/mapbox/satellite-v9", "views": [{"@@type": "MapView", "controller": true}]}; const MAPBOX_API_KEY = 'pk.eyJ1IjoiYnBpY2FyZCIsImEiOiJja2tudmw3OTYzbThwMzBvY29jaGlwdXppIn0.tukhClp8D9uKSO7rMcxO0Q'; const GOOGLE_MAPS_API_KEY = 'None'; const tooltip = true; const customLibraries = null;

const deck = createDeck({
  mapboxApiKey: MAPBOX_API_KEY,
  googleMapsKey: GOOGLE_MAPS_API_KEY,
  container: document.getElementById('deck-container'),
  jsonInput,
  tooltip,
  customLibraries
});

</script> `