GeoPortal migrated to Mapbox GL JS

My migration of GeoPortal from Leaflet to Mapbox GL JS is live (Github). I’m using a combination of OSM2VectorTiles, some vector tiles of our own data created with Tippecanoe, and a few WMS raster overlays here and there from GeoServer. I’ve passed five hours in the office without anybody flinging feces at me, which is my most reliable success metric.

I made this release even more React-y. The map is a single React component. This lends a couple of benefits. First, I could quite easily swap in a Leaflet React component with the same class methods and use it exactly the same way, no other code changes necessary. Second, the loose coupling lets me wipe the map off the board if WebGL isn’t supported and everything else keeps working. You can still look up your address and weep at your impervious footage and ugly house photo, you just don’t get a map.

Unit test for webgl, shame banner and remove component if not supported
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// load map if able to
try {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    // map in the House
    global.map = ReactDOM.render( < GLMap / > ,
        document.querySelector('.map-catcher')
    );
}
catch (e) {
    //hide map and show message
    let el = document.querySelector('body');
    let elChild = document.createElement('div');
    elChild.classList.add('oldie');
    elChild.innerHTML = 'You are using an outdated browser. <a href="http://whatbrowser.org/">Upgrade your browser today</a> to better experience this site.';
    el.insertBefore(elChild, el.firstChild);
    let elMap = document.querySelector('.mdl-card-map');
    elMap.parentNode.removeChild(elMap);
}

Based on Google Analytics, slightly less than 2% of my users are on IE<11, and that number is dropping pretty fast. My rule is you have to be 5% to justify ruining the party for everybody else. Or really loud and near my desk, but since we just moved office locations, nobody knows where I am.

ninja lolcat