Home

Erudit Maps Wiki Home

Welcome to the home of the Erudit Maps project, here you fill in-depth resources related to the internals of this project.

Summary

Built With

• NPM - Package Manager
• NodeJS - The web framework / packaging system used
• SASS - CSS Extension
• GulpJS - Workflow automation tool
• Bootstrap - Front-end component library
• D3 - Visualization Library
• Docker - Container / Dependency management

Debugging

Several GulpJS functions have been pre-made in order to optimize the workflow.

Here is a list of available tasks:

• gulp vendor - Copy third-party libraries from node_modules to client folder
• gulp js - Concatenate and minify javascript files
• gulp css - Compile SASS, concatenate and minify CSS
• gulp dev - Run js, css task and sync files to browser to automatically detect saved changes
• gulp - Run vendor, js, and css tasks

Versioning

This project is being developed using an iterative approach. Therefore, now releases have yet been made and the project will be subject to drastic changes. No versioning practices will be followed until release. To see a history of changes made to this project, see commit history.

Key Features

Google Map API

• uses google map API both for the actual map but also to draw the bubblesets on the map
• this converts latitude/longitude for us. makes images tiles, eases rendering load.

Bubblesets workers

• bubblesets are rendered using webworkers to leverage multiple cores. These workers return their results to the google api for rendering.
• must be re-rendered on map zoom or move - changes the coordinate space and therefore the bubbleset shapes

Filtering/Searching

• Implemented entirely clientside
• all data is loaded at the start, client filters through that.

Bubbleset Thumbnail Selection/Filtering

• Implemented on top of the already finished Erudit maps (may be a bit hacky)
• The general idea is there are 6 miniature google maps at the bottom of the page *

---

Project Structure

/ - Root

• **example.py **- Example of a python file in the project root
• app.js - Entrypoint for node app
• run.sh - Entrypoint for docker container (runs app.js)
• gulpfile and other npm files - packaging and dependencies

/server

• routes.js - only file in use, returns index.html as well as erudit json data.
• queries.js - not yet in-use dimensions.ai queries

/scss

Sass files compiled to css when gulp css is ran.

/client

Client side code (bulk of project)

• index.html the only html page, loads the maps and js.

/client/js

• bubblesets.js, worker.js & asyncMap.js - All work together to distribute computation of bubblesets across workers. erudit-maps.js uses these to get the bubblesets final shape.
• erudit-maps.js - All the visual work for the actual maps and bubbleset display as well as filtering, searching etc.
• journal.js - Further journal searching, sorting and filtering
• main.js - Jquery entrypoint, starts everything else,
• nouislider.js - number slider
• wNumb.js - user input validator.