Data does not show in JupyterLab from local geojson file resources

I tried to reproduce the example given in the README with an OpenMapTiles style but the data does not show, I only see the tiles. This is the result:

And this is the code:

import pandas as pd
import os

from mapboxgl.utils import *
from mapboxgl.viz import *

# Load data from sample csv
data_url = 'https://raw.githubusercontent.com/mapbox/mapboxgl-jupyter/master/examples/points.csv'
df = pd.read_csv(data_url)

# Create a geojson file export from a Pandas dataframe
df_to_geojson(df, filename='points.geojson',
              properties=['Avg Medicare Payments', 'Avg Covered Charges', 'date'],
              lat='lat', lon='lon', precision=3)

# Generate data breaks and color stops from colorBrewer
color_breaks = [0,10,100,1000,10000]
color_stops = create_color_stops(color_breaks, colors='YlGnBu')

# Create the viz from the dataframe
viz = CircleViz('points.geojson',
                height='400px',
                access_token='pk',
                color_property = "Avg Medicare Payments",
                color_stops = color_stops,
                center = (-95, 40),
                zoom = 3,
                #below_layer = 'waterway-label',
                style_url='https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json',
              )
viz.show()

I’m using mapboxgl 0.5.1 installed with pip 9.0.1 in Python 3.4 and latest JupyterLab.

[ryanbaumann]

@scwilkinson @Juanlu001 thanks for the bug report. The method we’re using in the example is to export data for visualization to a local file points.geojson, and then load the file from the local web server which Jupyter runs from the Python kernel (localhost:8888 normally). It looks like Jupyter Lab uses a different URL path to server local files than the root web server.

As a workaround, could you try exporting the dataframe to a python dict variable, and then creating the mapboxgl.viz.CircleViz from the python variable? The approach below should be the code you need:

# Create a geojson file export from a Pandas dataframe
data = df_to_geojson(df, properties=['Avg Medicare Payments', 'Avg Covered Charges', 'date'],
              lat='lat', lon='lon', precision=3)

# Generate data breaks and color stops from colorBrewer
color_breaks = [0,10,100,1000,10000]
color_stops = create_color_stops(color_breaks, colors='YlGnBu')

# Create the viz from the dataframe
viz = CircleViz(data, 
                height='400px',
                access_token='pk',
                color_property = "Avg Medicare Payments",
                color_stops = color_stops,
                center = (-95, 40),
                zoom = 3,
                #below_layer = 'waterway-label',
                style_url='https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json',
              )
viz.show()

[jasongrout]

Your rendermime extension that creates the visualization has access to this resolver, so it should be able to take a filename and convert it to a url it can use. It’s passed in the arguments: https://github.com/jupyterlab/jupyterlab/blob/d740dee4980557a1d58fe0371bc467166f6cd9ac/packages/rendermime-interfaces/src/index.ts#L284 You probably want to use the getDownloadUrl function of that object: https://github.com/jupyterlab/jupyterlab/blob/d740dee4980557a1d58fe0371bc467166f6cd9ac/packages/rendermime-interfaces/src/index.ts#L332