Linking a map with a table

Community Support
1

Hi,
How can I link a map with a table?
I mean;
when I select a province on a map, the name of the province at the table will be selected and highlighted

I will appreciate for your advice?

regards

2

Hi @ahmettemiz88,

I think much depends on how your data source is structured. Do you have a data source, and code that produces a map? A minimal example would provide a place to start for advice or ideas.

3

thank you

here are my code fragments:

def get_geodatasource(gdf):
“”“Get getjsondatasource from geopandas object”""
json_data = json.dumps(json.loads(gdf.to_json()))
return GeoJSONDataSource(geojson = json_data)

def bokeh_plot_map(gdf, column=None, title=’’):
“”“Plot bokeh map from GeoJSONDataSource “””
geosource = get_geodatasource(gdf)
…

p.patches('xs','ys', source=geosource, fill_alpha=1, line_width=0.5, line_color='black',  
          fill_color={'field' :column , 'transform': color_mapper})

...

when I select a polygon. corresponding polygon’s name should be highlighted on the table
regards

4

Hi @ahmettemiz88 please edit your post to use code formatting so that the code is intelligible (either with the </> icon on the editing toolbar, or triple backtick ``` fences around the code blocks)

5

@ahmettemiz88,

@Bryan is right-- formatting code (and having a minimal example that can be run start-to-finish) is essential to help other forum members identify your issue and provide ideas!

It sounds like what you need is a patches renderer (your p.patches above), a DataTable populated from the same ColumnDataSource, and a TapTool. I used the Texas counties example from the Bokeh gallery and changed a few things. I made notes in the comments about what I added to make it work:

from bokeh.io import show
from bokeh.models import LogColorMapper, ColumnDataSource, DataTable, TableColumn, TapTool
from bokeh.palettes import Viridis6 as palette
from bokeh.plotting import figure
from bokeh.sampledata.unemployment import data as unemployment
from bokeh.sampledata.us_counties import data as counties
from bokeh.layouts import Row

palette = tuple(reversed(palette))

counties = {
    code: county for code, county in counties.items() if county["state"] == "tx"
}

county_xs = [county["lons"] for county in counties.values()]
county_ys = [county["lats"] for county in counties.values()]

county_names = [county['name'] for county in counties.values()]
county_rates = [unemployment[county_id] for county_id in counties]
color_mapper = LogColorMapper(palette=palette)

data = dict(
    x=county_xs,
    y=county_ys,
    name=county_names,
    rate=county_rates,
)

# I changed the data dict to a ColumnDataSource to be the DataTable's data,
# and defined TableColumns for the subset of columns I want to show.
cds = ColumnDataSource(data)
columns = [
    TableColumn(field='name', title='Name'),
    TableColumn(field='rate', title='Rate'),
]
data_table = DataTable(source=cds, columns=columns, width=300, height=450)

TOOLS = "pan,wheel_zoom,reset,hover,save"

p = figure(
    title="Texas Unemployment, 2009", tools=TOOLS,
    x_axis_location=None, y_axis_location=None,
    tooltips=[
        ("Name", "@name"), ("Unemployment rate", "@rate%"), ("(Long, Lat)", "($x, $y)")
    ])
p.grid.grid_line_color = None
p.hover.point_policy = "follow_mouse"

# I assigned the renderer to a variable so that I could connect a TapTool to it.
# I also changed the source to be the same ColumnDataSource as the DataTable.
patch_renderer = p.patches('x', 'y', source=cds,
                           fill_color={'field': 'rate', 'transform': color_mapper},
                           fill_alpha=0.7, line_color="white", line_width=0.5)

# I created the TapTool and added it to the plot.
tap_tool = TapTool(renderers=[patch_renderer])
p.add_tools(tap_tool)

# I used a row layout to have the plot and table side-by-side.
row = Row(children=[p, data_table])

show(row)

I think this is the behavior you’re looking for.