Dear All,
kindly please advise why map so slow for display in tabulator, for example the code
import pandas as pd
import panel as pn
from bokeh.plotting import figure
from bokeh.models import WMTSTileSource, Label
from pyproj import Transformer
from bokeh.models import ColumnDataSource
pn.extension('tabulator')
# Example airport data (replace with actual data)
data = {
'Airport Name': ['Los Angeles International', 'John F. Kennedy International', 'San Francisco International'],
'Latitude': [33.9416, 40.6413, 37.7749],
'Longitude': [-118.4085, -73.7781, -122.4194],
'Code': ['LAX', 'JFK', 'SFO']
}
# Create a DataFrame
df = pd.DataFrame(data)
# Define the Transformer to convert from EPSG:4326 (Lat/Lon) to EPSG:3857 (Web Mercator)
lonlat_to_webmercator = Transformer.from_crs("EPSG:4326", "EPSG:3857", always_xy=True)
# Function to generate Bokeh map for each airport
def generate_bokeh_map(lat, lon, label):
lat, lon = float(lat), float(lon)
# Convert latitude and longitude to Web Mercator coordinates
try:
x, y = lonlat_to_webmercator.transform(lon, lat)
except Exception as e:
print(f"Error during transformation: {e}")
return None
# Define the tile provider (Google Maps)
tile_provider = WMTSTileSource(url="http://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}")
# Create a Bokeh figure
p = figure(
x_range=(x - 5000, x + 5000),
y_range=(y - 5000, y + 5000),
x_axis_type="mercator",
y_axis_type="mercator",
width=400,
height=400,
title=f"Location: {label}"
)
# Add the tile layer
p.add_tile(tile_provider)
# Plot the location point
p.scatter(x=[x], y=[y], size=10, color='red', legend_label=label)
# Add a label
p.add_layout(Label(x=x, y=y, text=label, text_color='blue'))
return p
# Function to display details and map for a selected airport
def content_fn(row):
label = row['Airport Name']
lat = row['Latitude']
lon = row['Longitude']
# Generate Bokeh map for selected airport
map_pane = generate_bokeh_map(lat, lon, label)
# Layout with airport details and map
details = f"<b>Details:</b><br>Name: {label}<br>Code: {row['Code']}<br>Latitude: {lat}<br>Longitude: {lon}"
return pn.Row(
pn.pane.HTML(details, width=400),
pn.pane.Bokeh(map_pane, width=400, height=400)
)
# Create Tabulator widget with the airport data
tabulator = pn.widgets.Tabulator(df, row_content=content_fn)
# Display the Tabulator
tabulator.servable()
is that any workaround for better performance display the map.
thanks
