FAAS Projects Map
Produced At: FAAS Architecture
Timeline: June 2025 - September 2025
As the sole GIS Systems Designer & Analyst, I took ownership of this project end-to-end; proposing available viable technologies, managing and communicating scope and timelines, gathering and migrating content, design, prototyping, application development, and deployment.
Note: FAAS’ rebranding was done by Flipp Advertising in 2025, my contribution only lies with the FAAS Projects Map development and UI brand alignment.
See it Live
UI/UX Design & Prototyping;
GIS Web Application Development
Mapbox (basemap);
Mapbox GLJS (rendering engine)
Backend
Webflow CMS (database, content hosting);
Webflow API (CMS read access for Mapbox GLJS);
Cloudflare (security)
QGIS (initial geocoding);
Figma (design, prototyping);
Github Desktop;
VSCode
Spatialize FAAS Projects
Across Canada in an Engaging Way
With nearly 300 projects across Canada, the map needs to illustrate both the gravitas and extent of FAAS’ influence in an effective and engaging way.
Provide a Mobile-First
User Experience for Exploration
Users should be able to visit the site and immediately see if FAAS projects are within their vacinity.
Build a Low-Maintenance
Application for Longevity
Managing projects and their typologies, status’, clients, thumbnail handling, and more should be as easy as updating a spreadsheet. This is crucial for FAAS’ growing portfolio.
GOAL 1 Spatialize FAAS Projects Across Canada in an Engaging Way
The Project Map transforms FAAS’ previously static portfolio of nearly 300 projects across Canada into an engaging geographic experience.
The gravitas and extent of FAAS’ work is visualized using a combination of heatmap and cluster layers, with each project having custom HTML markers.
The interactive map features a synchronized filtering system driven by each project’s typology-code and status-code. Users can apply single or combined filters to isolate specific work. Every filter interaction instantly updates map markers, cluster points, heatmaps, section visibility, and list items with minimal latency, due to a short debounce delay to maintain high performance during rapid inputs from users. A live project count offers real-time feedback to users.
Users can seamlessly switch back and forth to the satellite view. The heatmap, cluster, and marker layers are all preserved and restored on every toggle.
Each project has a dedicated unique URL that dynamically updates and opens the project’s active state automatically, allowing users to easily share the project.
Try: www.faasgis.com/?project=1914-bankview
Provide a Mobile-First
User Experience for Exploration
The user experience is designed first to be intuitive on mobile breakpoints.
Panels behave like native apps, with draggable “pull handles” and snapping min-mid-max states for the projects list. A geolocation feature is available for users to easily find FAAS projects in the wild.
Build a Low-Maintenance
Application for Longevity
The app is designed to live without me.
Using Webflow’s Content Management System (CMS) allows for a user-friendly project management experience and a single source-of-truth.
Every project’s name, number, location, typology, and status lives in Webflow CMS that can be easily updated anyone on the team without having to touch the code. Documentation has been provided for the team
Error handling has been put in place to defend against user-error when entering records on Webflow.
- Entries with invalid required fields such as latitude, longitude, project name, typology, and status are skipped
- Slugs are unique and required by webflow
- Missing images are allowed
If the codebase requires updating, a private Github Repo has been setup to sync with Cloudflare for automatic redeployments and maintaining security.
A simple Cloudflare layer keeps credentials (hidden in a “tokens.js”) secure. Cross-Origin Resource Sharing (CORS) has been implemented to only allow specific origins (ie. faasgis.com) to interact with Webflow API endpoints.
Experiments & Work-In-Progress (Archived)
The following section is a small collection of experimental works and progress photos for this project that either got canceled or updated.
This scope was canceled due to timeline, as well as optimization and difficulty in building a maintainable Sketchup -> Mapbox pipeline.
The user interface prior to the rebrand had the filter and projects list under one container. It also incorporated custom icons for each typology inspired by existing FAAS Buildings.
Extensive prototyping with design systems were built and tested prior to the project development.
The original approach was to only use a standard cluster layer. The heatmap was later introduced in combination with the cluster layer’s pointer interaction and count features.
This could be improved, with major blocks coming from running JS and rendering Mapbox. Diagnostics suggest improvements could be made on “website files” delivery.
Top