Clientside webapp stuff for Mapping A Colony. The project is running two WordPress websites, one for English and one for Danish language. This webapp is generic across the language versions, and extends the functionality of the WordPress websites.
The clientside interacts with the middleware API, most importantly to pull data from storage. The division of labour is somewhat messy, and as it is currently, parsing of CSV to more structured data model is done by the client. In terms of lines, this is much of the clientside program. Primary storage format on the client side is GeoJSON, from which StoryMap format is generated, based on the narratives. The gallery is modelled in generated, D3 nested HTML, which Fancybox interprets for the gallery function.
A number of HTML elements trigger parts of the code, for rendeing UI elements. They are
#vifor U.S. Virgin Islands tilemap#cphfor Copenhagen tilemap#storymapA storymap interactive exploration thing#photoGalleryA photo gallery, with Fancybox#d3globalProjectionfor a small, 3D-lookalike map silhouette to give global context
Each one of which requires access to the various types of data in the project. The first three require the main map data items, parsed into GeoJSON by this program. The third one additionally requires the narratives. The fourth one requires access to the gallery data, and the last one is a project non-specific overview map, relying on a dataset of countries.
A couple of JavaScript libraries are used.
- Leaflet for tilemaps
- D3 for CSV parsing, global map etc.
- Knight Lab StoryMapsJS for the narratives story maps. This uses a legacy version of Leaflet, which is a hassle
- Fancybox Image gallery
- jQuery is required by Fancybox and others