Skip to content

Mapbox GL JS

andy.rothwell edited this page Feb 13, 2020 · 17 revisions

Adding Mapbox GL JS Components

From the Mapbox GJ JS site:

"Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles."

Reasons to Use Mapbox GL JS

  1. Future proofing the City of Philadelphia's webmapping system to be ready as the City of Philadelphia moves toward use of vector tiles. Here is an article about improved performance for vector tiles - http://kuanbutts.com/2019/08/31/mbgl-vs-leaflet/.

  2. Reduce reliance on externally developed leaflet plugins (which using Leaflet requires), which often have to be forked.

    Note, we might end up increasing reliance on mapbox gl plugins, like mapbox-gl-draw, but plugins like this are not actually externally developed, and that one is extremely up to date.

  3. Things WebGL allows, like tilting the map.

Example

An example site for development has been set up here (see in github).

As of this writing, it simply proves that the City of Philadelphia's raster tiles from ArcGIS Online work in Mapbox (and do not require a plugin like ESRI-Leaflet, the way Leaflet requires a plugin just to use ESRI raster tiles).

Mapbox' info on raster tiles is here.

Potential Strategy for using Mapbox GL JS

  1. A set of components could be added to phila-vue-mapping which would not replace the leaflet components outright. A very preliminary MbMap.vue file has been created. Components corresponding for many Mapbox GL JS elements would be created, as was done for Leaflet.

  2. Substitutes for these Forked Dependencies, used by mapboard, should be prioritized:

plugin mapbox gl substitute
leaflet-vector-icon icon example, generated icon example
leaflet-measure measure distances example
  1. As the components and plugin substitutes are tested and mature, a branch of mapboard could include a mapbox gl map instead of a leaflet map.

  2. Branches of pinboard and viewerboard could do the same.

  3. Property Data Explorer could be transitioned to mapbox if the following plugin was replaced:

plugin mapbox gl substitute
SDLeafletDraw mapbox-gl-draw, show drawn polygon example
  1. layerboard using a mapbox map would be the hardest, as a ton of work was already put into making the forked plugins L.esri.WebMap, some of its dependencies, and esri-leaflet-legend work for us.

  2. It may be possible to leave the frameworks the option of continuing to work with leaflet maps, which they work with mapbox gl maps - which kind of mapping tech could maybe be a parameter that a use puts in.