Document Maplibre patterns

[derekeder]

Background

We've been using Leaflet.js and CARTO for our interactive maps for many years now. After working on a side project that leverages mapbox-gl and kepler.gl (https://ilsolarmap.com), I see there are some potentially big advantages to making maps with Mapbox-GL, including:

• renders data as vectors instead of tile images, yielding higher resolution and more programmatic control over the display of data
• GeoJSON data is converted into vector data, allowing for much larger files to be rendered (100+mb files in the browser)
• smooth zooming
• faster load times
• support for 3D visualizations

Our current pattern for rendering GeoJSON data has some pretty hard limits. Anything over 1mb or with over 1,000 features starts to get very slow in Leaflet. In this case, we have switched over to CARTO to render large files, but the switch can be awkward and the plan we are on has limited space and the latest plans are 10x more expensive. If Mapbox GL works out, we can potentially drop our dependence on CARTO and serve all of our map data directly in the browser.

Proposal

I'll create a test project using Mapbox-GL following their tutorials & documentation with some larger data: https://docs.mapbox.com/mapbox-gl-js/guides/

I will also try out a project using React Map GL, a React wrapper for Mapbox GL: https://visgl.github.io/react-map-gl/

Deliverables

I'll summarize my experience and findings and share them back on this thread along with a recommendation on next steps.

Timeline

Probably a day or so

[derekeder]

There is an alternative library that does mapping with vector tiles called MapLibre: https://maplibre.org/maplibre-gl-js/docs/

It looks to be a fork of mapbox-gl and has many of the same features. The biggest difference that I can tell so far is mapbox gives easier access to nice looking vector tile basemaps.

ArcGIS offers some vector tile basemaps of their own and have documentation on how to use them with maplibre: https://developers.arcgis.com/maplibre-gl-js/maps/change-the-basemap-style-v2/

[derekeder]

I have my first working map using Mapbox-GL: https://ilsolarmap.com/

The map code is here:

• HTML: https://github.com/chihacknight/il-solar-map/blob/main/index.html
• js: https://github.com/chihacknight/il-solar-map/blob/main/js/map.js

I implemented using plain javascript with bootstrap and jquery. The map features:

• toggling between 5 different geographic levels, two of them (tracts & places) over 2mb in size with over 2,000 features, which render and load just fine
• toggling between 5 different categories, each which dynamically change the shading in the map
• map hover interactivity with a tooltip and border outline

Things to note / differences with Leaflet:

• data sources are declared separately from layers
• layers have a slightly different structure for defining layout, source, type and paint for styling. Instead of using onEachFeature (which I imagine is pretty inefficient for larger data), we set the style based on attributes passed in to the layer directly: https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addlayer
• these layers can be modified dynamically using accessors like https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setlayoutproperty and https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setpaintproperty
• for hover interactivity to work, an id property needs to be added to each GeoJSON feature at the same level as properties. This ID must be a number (I tired unique strings but it didnt work)

[smcalilly]

Next steps:

• try out in a client project
• see how well it works with React

[smcalilly]

this blog post might be a good place to research mapbox + react? https://evilmartians.com/chronicles/how-to-build-a-better-react-map-with-pigeon-maps-and-mapbox

this tool was used in that post, seems kind of interesting: https://pigeon-maps.js.org/ from their docs:

Are you tired of waiting 3 seconds to parse 200kb of Google Maps JavaScript just to display a few tiles and a marker? 140kb of minified Leaflet too much?

Welcome to the club!

[fgregg]

you can use other basemaps, including raster ones:

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

[smcalilly]

@antidipyramid is doing this for a DPD project, has positive first impressions.