Map not displaying in VSCode Jupyter Notebook

[cpalazzi]

Hello, I am using lonboard 0.10.3 in my environment. I am unable to display a scatterplot in jupyter notebook in VSCode. It saves an HTML file correctly but then I cannot view in in the notebook even if I try importing it using IFrame. If I just use viz() I can display my data, like so:

However, using this code a scatterplot gives no output, though does save to HTML.

import pandas as pd
import geopandas as gpd
from shapely.geometry import Point
import lonboard as lb
from lonboard import Map, ScatterplotLayer
from palettable.colorbrewer.diverging import BrBG_10
from lonboard.colormap import apply_continuous_cmap
import numpy as np
from IPython.display import IFrame

# Read the CSV file into a DataFrame
file_path = 'heatmap_data.csv'
df = pd.read_csv(file_path)

# Create a geometry column from lat and lon
df['geometry'] = df.apply(lambda row: Point(row['lon'], row['lat']), axis=1)

# Convert the DataFrame to a GeoDataFrame and set the CRS
gdf = gpd.GeoDataFrame(df, geometry='geometry')
gdf.set_crs(epsg=4326, inplace=True)  # Set CRS to WGS84

# Clean all numeric columns to ensure no non-finite values
for column in gdf.select_dtypes(include=[np.number]).columns:
    gdf[column] = pd.to_numeric(gdf[column], errors='coerce')  # Coerce errors to NaN
    gdf[column] = gdf[column].replace([np.inf, -np.inf], np.nan).fillna(0)  # Replace inf and NaN with 0

# Normalize power_cost for colour scaling
min_bound = gdf['power_cost'].min()
max_bound = gdf['power_cost'].max()
normalized_power_cost = (gdf['power_cost'] - min_bound) / (max_bound - min_bound)

# Apply the colormap using lonboard's helper function
fill_colors = apply_continuous_cmap(normalized_power_cost, BrBG_10.mpl_colormap, alpha=0.7)

# Create a ScatterplotLayer with the color map applied to fill color
layer = ScatterplotLayer.from_geopandas(
    gdf,
    get_fill_color=fill_colors,  # Use the colormap for the color
    get_radius=5000,  # Adjust as needed
    opacity=0.8,
    pickable=True
)

# Initialize the Map with the layer
m = Map(layer)


# Save the map as an HTML file and display it in an iframe
# output_html = "lonboard_map_with_power_cost.html"
# m.to_html(output_html)

Any insights on why the code might not be displaying an output in this environment would be greatly appreciated.
There also seems to be a small bug with the notebook background turning white when in dark mode when running lonboard.

I searched for a similar discussion and found one from version 0.9.1, but I could not resolve it with those suggestions e.g. using option-cmd-I to open the notebook log as I think the VSCode Jupyter notebooks have changed significantly since then? Apologies if it's a simple mistake but not sure what else to try.

Thank you.

[kylebarron]

In the second snippet it looks like you're not displaying the Map. You're just storing it as a variable. You need to execute a "cell" with m as the last line, or call display(m) to see the map render.

[cpalazzi]

Unbelievable, so silly. Thought I'd tried with m.display() and various combinations, but apparently not display(m)! Seems to be working. Thank you so much.

Background turning white bug still there but merely aesthetic.