[WIP] Replace leaflet with mapbox-gl

[gnestor]

trafficstars

Closes https://github.com/jupyterlab/jupyter-renderers/issues/116

[gnestor]

I ran into a Typescript block:

In the @types/mapbox-gl, we have:

declare namespace mapboxgl {
    var accessToken: string;
    ...
}

In the extension, we have:

mapboxgl.accessToken = ACCESS_TOKEN;

And the Typescript error is: Cannot assign to 'accessToken' because it is a constant or a read-only property.

@ian-r-rose @blink1073 Any ideas?

[ian-r-rose]

According to this issue, ES6 module imports are immutable, and so you can't change the access token (even though it is declared using let in the typings). The fix they suggest is to change the import statement to an ES5 style:

import mapboxgl = require('mapbox-gl');

I tried this, and it seemed to fix the compilation error.

[ryanbaumann]

Let me know if you want any 👀 on this when ready for review! I'm the maintainer of mapboxgl-jupyter.

[gnestor]

Thanks @ian-r-rose!

@ryanbaumann Excellent! Please take a look now. It's rendering but all of the maps are blank:

You can probably debug must quicker than I 👍

[gnestor]

@ryanbaumann I've made the changes that you suggested AFAIK, but the map still appears the same as before. It would be great if you could install this repo locally and make the remaining necessary changes to get it working. To do this:

• Follow the "Install" and "Linking" instructions in the README: https://github.com/jupyterlab/jupyter-renderers#contributing
• Run jlpm watch in the jupyter-renderers root directory
• In another tab, run JupyterLab with the following: jupyter lab --watch

This will allow you to test a locally installed geojson-extension, make changes, and automatically rebuild the extension and JupyterLab in response to those changes.

[gnestor]

Ok, made some progress:

Is there a convenient way to fit the bounds of the GeoJSON data?

[ryanbaumann]

Amazing @gnestor this is going to be great!

To fit the bounds of your map to a geojson feature, I recommend using a subpackage of turf.js to calculate the bounds. Then use map.fitBounds() to set the map camera viewport.

Install: npm install --save @turf/bbox npm install --save mapboxgl-js

Use:

import turfBbox = require('@turf/bbox');
import mapboxgl = require('mapboxgl-js');
...
// Run this in the same spot where you add the geojson source data to the map, right after map.getSource('my-soruce').setData(myGeojsonData);

var bbox = turfBbox(myGeojsonData);
map.fitBounds( bbox, { padding: 100 } );

[gnestor]

Some progress but this flyover animation is very unnecessary...

[ryanbaumann]

@gnestor nice, glad that worked! I'd recommend setting the map center and zoom to fit the bounding box of the data. Here's how I'd recommend initializing the map to the bounds instead of flying to the bounds:

https://github.com/mapbox/mapbox-gl-js/issues/1970#issuecomment-297465871

[gnestor]

Ok, looking much better:

Now, what if I want to map a point on Mars? This was possible using leaflet by providing a different tileset via the url_template argument. Does mapbox-gl support raster tilesets?

[ryanbaumann]

@gnestor loving that the primary use case is a map on mars ;)

Yes, Mapbox GL JS supports a ton of layers, everything from Raster Tiles, to Vector Tiles, to Geojson, to Images, Video, and WebGL Canvas layers. Here's an example using a Raster tilemap, which you can simply drop in the URL to your raster tile layer and go (while getting all of the rendering benefits of GL JS for adding GeoJSON data to the map for data visualization) -

https://www.mapbox.com/mapbox-gl-js/example/map-tiles/

As for how to handle accepting different base maps, I'd recommend allowing the user to set a style, which can be a link to a Mapbox GL Style Sheet, or a locally created style sheet. You're already doing this with the mapbox://styles/mapbox/light-v9?optimize=true URL specified today.

A user could swap the style out for any mapbox:// URL, or a custom style sheet that has - for example - raster tiles of mars.

See https://github.com/mapbox/mapboxgl-jupyter/blob/master/mapboxgl/viz.py#L27 for an example of what that looks like in Mapboxgl-Jupyter

[gnestor]

@ryanbaumann Do you have any cycles available to polish this? I'm pretty busy at the moment but I'd like to get this merged 👍

[ryanbaumann]

@gnestor, not this week, unfortunately - I'll revisit next week.

[davidbrochart]

I guess since Mapbox switched to a proprietary license, mapbox-gl is not an option anymore. I opened #276 which is based on MapLibre GL.