Update map to use mapbox-gl-js instead of mapbox.js

[mapsam]

The maps are using an old mapbox.js library and raster tiles. Let's move over to using mapbox-gl-js instead. This would be a good little hack project for anyone interested in learning about the website!

How are the maps made now?

Each layout includes a div with a special map id. Here's the example of a meeting page map element:

<div id="map"
  class="meeting-map map-marker"
  data-latitude="{{ page.lat }}"
  data-longitude="{{ page.lng }}"
  data-popup="{{ page.address }}"></div>

When the page is rendered, the following javascript is executed which searches for any instance of a map-marker class and builds it with the subsequent functions.

How to do this with mapbox-gl-js

Using GL JS should be relatively similar, with the key differences being how markers are created and added to the map context. Here's the marker documentation.