This repository holds the source code for http://youthmappers.org/chapters main version that uses Mapbox GL.js to display content from a Google Sheet, with particular columns.
To control the chapters shown, request access to the YouthMappers Google Sheet.
It can be live-edited using BlockBuilder.org once forked.
It relies on Amazon Web Services API Gateway resource to Google Sheets set up as shown below to download the CSV and share it onward as an API (avoid its proxy feature). It should be deployed to a stage:
Where the HTTP URL for the spreadsheet to use is: GET https://docs.google.com/spreadsheets/d/13yswnN49P0dsO5BS2FJYaVUIjsnuWbzA3UxvhcLUsYI/export?format=csv&id=13yswnN49P0dsO5BS2FJYaVUIjsnuWbzA3UxvhcLUsYI
-
Wherever possible, change
application/jsontotext/csv. -
Ensure Access-Control-Allow-Origin is set to
'*'for the "Integration Response">Header Mappingssection. -
Also use the "Enable CORS" action.
-
Place the URL offered in
stageinto theawsProxyUrlvariable inindex.html.
The fallback version of the site that uses basic Mapbox.js is at: https://gist.github.com/thadk/be6de2478c8aae7656a582895de8ff08 A version of this on Wix is hardlinked to by the application and displayed when e.g. there are no graphics drivers installed in Windows and the user is on Chrome.
The HTML template shown for each school is in the templatize() function.
Select-All of the index.html code in GitHub and paste into the iframe embed text area on the Chapter page of Wix to install a new version.
Mapbox GL acts differently in an iframe on mobile than it does running normally on this staging area server with BlockBuilder or Bl.ocks.org.
There are 2 small javascript files which are referenced by the index.html and hosted from this repository using rawgit.com -- including util.js and csv2json.js . These could be brought inline to the index.html if needed or re-hosted in a new repository if they need to be modified.
There is a raven tracking script which logs errors such as WebGL failures.