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.
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:When the page is rendered, the following javascript is executed which searches for any instance of a
map-markerclass 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.