Display map with localtileserver and dcc.Graph

Dash Python
1

Hi folks,

I am trying to visualize georeferenced tiff image with dash.

First, I built local tileserver:

from localtileserver import TileClient, get_leaflet_tile_layer

# Map layer
wsi_client = TileClient('../output.tiff')
wsi_tile_layer = get_leaflet_tile_layer(wsi_client)

Then, I used dash_leaflet:

import dash_leaflet as dl

dl.Map(
    id='wsi-map',
    center=wsi_client.center(),
    children=[
        dl.TileLayer(url=wsi_tile_layer.url),
    ],
    style={
        'width': '500pt',
        'height': '500pt',
        'margin': 'auto',
    },
),

The image was sucessfully displayed. However, I do NOT want to use dash_leaflet because it does not have the functionality (lots of hovering options) of dcc.Graph. As suggested in this official post, I tried dcc.Graph and mapbox by the following:

from dash import dcc

dcc.Graph(
    id='wsi-map-dcc',
    figure=dict(
        layout={
            'mapbox_style': 'white-bg',
            'mapbox_layers': {
                'below': 'traces',
                'source': [
                    wsi_tile_layer.url,
                ],
                'sourcetype': 'image',
            }
        }
    )
),

It only shows me blank area. Anyone has a suggestion? I really appreciate any help from you.

Screenshot 2023-08-16 at 5.41.21 PM
Screenshot 2023-08-16 at 5.41.21 PM1348×828 4.37 KB

2

Could you elaborate on what hover options that you are missing in dash-leaflet?

3

Hi Emil. Thank you so much for your reply. Here is a sample figure produced by dcc.Graph. There are some tools on the top of the image. It allows lasso selection, box selection, auto scale, reset axis, etc.

So my current plan is either adding those hover options to dash_leaflet, or trying to use dcc.Graph instead. Any kind of help is appreciated :slight_smile:

image
image902×898 37.8 KB

4

@zy45 or Emil, have we got a way to add dash leaflet as a layer to dcc.Graph so that we are able to use the tools from dcc.Graph as pointed by zy45 and also make use of some of the salient properties of dash_leaflet such as overlaying images on maps.

Any suggestions to use the dcc.Graph with dash_leaflet can be helpful.

P.S. I have tried overlaying images on vectorized maps before, however they didn’t seem to zoom on the geoJson map and the images well at the same time. I also wanted the lasso selection, box selection, zoom in, zoom out, reset option at the top of dcc.Graph as pointed out by @zy45.