mapboxgl-jupyter: 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:

screenshot-2018-2-26 jupyterlab

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.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 17 (5 by maintainers)

Most upvoted comments

@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()

ryanbaumann on Feb 27, 2018

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

jasongrout on May 1, 2018

agreed that in-memory object usage is better than storing temporary files.

Casyfill on Mar 11, 2018

Be careful that using the absolute url /files/filename.ext may not work if you have a url prefix (for example, I think in JupyterHub there is a prefix of the username?). It also is a bit tricky if you have a file not in the root directory of the server.

If you use a relative URL, the frontend has a URL resolver that takes the url and should be able to give you back a URL to get that file.

jasongrout on May 1, 2018

@ryanbaumann For example, I have a Dockerfile in my root directory when I open JupyterLab. If I go to http://localhost:8888/files/Dockerfile it will be downloaded.

If I change the example in the README to add /files/ to the filename, I think it appears to work for me in JupyterLab:

saulshanabrook on May 1, 2018

It works, and I actually prefer this to the file-based approach 😃 Thanks!

astrojuanlu on Feb 27, 2018