Skip to content

BitmapLayer

lonboard.BitmapLayer

Bases: BaseLayer

The BitmapLayer renders a bitmap (e.g. PNG, JPEG, or WebP) at specified boundaries.

Example:

from lonboard import Map, BitmapLayer

layer = BitmapLayer(
    image='https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png',
    bounds=[-122.5190, 37.7045, -122.355, 37.829]
)
m = Map(layer)
m

auto_highlight class-attribute instance-attribute 

auto_highlight = tag(sync=True)

When true, the current object pointed to by the mouse pointer (when hovered over) is highlighted with highlightColor.

Requires pickable to be True.

  • Type: bool
  • Default: False

before_id class-attribute instance-attribute 

before_id = tag(sync=True)

The identifier of a layer in the Maplibre basemap layer stack.

This deck.gl layer will be rendered just before the layer with the given identifier. You can find such an identifier by inspecting the basemap style JSON.

For example, in the Carto Positron style, if you look at the raw JSON data, each layer has an "id" property. The first layer in the basemap stack has "id": "background". So if you pass before_id="background", you won't see your deck.gl layer because it will be rendered below all layers in the Maplibre basemap.

A common choice for Carto-based styles is to use before_id="watername_ocean" so that your deck.gl layer is rendered above the core basemap elements but below all text labels.

Info

This only has an effect when the map's basemap is a MaplibreBasemap, and the map is rendering in "interleaved" mode.

bounds class-attribute instance-attribute 

bounds = tag(sync=True)

The bounds of the image.

Supported formats:

- Coordinates of the bounding box of the bitmap `[left, bottom, right, top]`
- Coordinates of four corners of the bitmap, should follow the sequence of
  `[[left, bottom], [left, top], [right, top], [right, bottom]]`.

desaturate class-attribute instance-attribute 

desaturate = tag(sync=True)

The desaturation of the bitmap. Between [0, 1].

  • Type: float, optional
  • Default: 0

extensions class-attribute instance-attribute 

extensions = tag(sync=True, **(widget_serialization))

A list of layer extension objects to add additional features to a layer.

highlight_color class-attribute instance-attribute 

highlight_color = VariableLengthTuple(
    Int(), default_value=None, minlen=3, maxlen=4
)

RGBA color to blend with the highlighted object (the hovered over object if auto_highlight=true). When the value is a 3 component (RGB) array, a default alpha of 255 is applied.

  • Type: List or Tuple of integers
  • Default: [0, 0, 128, 128]

image class-attribute instance-attribute 

image = tag(sync=True)

The URL to an image to display.

  • Type: str

opacity class-attribute instance-attribute 

opacity = tag(sync=True)

The opacity of the layer.

  • Type: float. Must range between 0 and 1.
  • Default: 1

pickable class-attribute instance-attribute 

pickable = tag(sync=True)

Whether the layer responds to mouse pointer picking events.

This must be set to True for tooltips and other interactive elements to be available. This can also be used to only allow picking on specific layers within a map instance.

Note that picking has some performance overhead in rendering. To get the absolute best rendering performance with large data (at the cost of removing interactivity), set this to False.

  • Type: bool
  • Default: True

selected_index class-attribute instance-attribute 

selected_index = tag(sync=True)

The positional index of the most-recently clicked on row of data.

You can use this to access the full row of data from a GeoDataFrame

gdf.iloc[layer.selected_index]

Setting a value here from Python will do nothing. This attribute only exists to be updated from JavaScript on a map click. Note that pickable must be True (the default) on this layer for the JavaScript onClick handler to work; if pickable is set to False, selected_index will never update.

Note that you can use observe to call a function whenever a new value is received from JavaScript. Refer here for an example.

tint_color class-attribute instance-attribute 

tint_color = VariableLengthTuple(
    Float(), default_value=None, allow_none=True, minlen=3, maxlen=4
)

The color to tint the bitmap by, in [r, g, b].

  • Type: List[float], optional
  • Default: [255, 255, 255]

transparent_color class-attribute instance-attribute 

transparent_color = VariableLengthTuple(
    Float(), default_value=None, allow_none=True, minlen=3, maxlen=4
)

The color to use for transparent pixels, in [r, g, b, a].

  • Type: List[float], optional
  • Default: [0, 0, 0, 0]

visible class-attribute instance-attribute 

visible = tag(sync=True)

Whether the layer is visible.

Under most circumstances, using the visible attribute to control the visibility of layers is recommended over removing/adding the layer from the Map.layers list.

In particular, toggling the visible attribute will persist the layer on the JavaScript side, while removing/adding the layer from the Map.layers list will re-download and re-render from scratch.

  • Type: bool
  • Default: True