The Labor Day Map

Last Updated: July 24, 2025 @ 10:08am

Now that the Labor Day site has existed for a while and the map is being updated to v5, I wanted to document how to update the map since it’s….arduous.

Note: Map versions don’t follow semver, so it just gets bumped a version every time a new file is given from a designer.

File Organization

This feature uses 4 primary folders:

/images/map-v*,
/inc/theme/map/,
/src/js/map/, and
/src/styles/components/map (there is also a /src/styles/pages/map.scss file, but it mostly sets up some page layout styles).

Illustrator File Organization

The Illustrator file should be created with semantically named layers.

Updating The Map

Export the Assets from Illustrator

Export Settings (Export -> Export As). Each item (listed in the “Export Order” list) should get exported separately, with all other layers invisible. Be sure to use Artboard size so all the SVGs get scaled and clipped appropriately!

Images export settings:
- webp,
- 75 quality,
- lossy.
- Transparency: for buildings
SVGs:
- Styling: Internal CSS
- Font: SVG
- Images: Preserve
- Object IDs: Layer Names
- Decimal: 2
- Responsive: checked

Export Order & Info

Base as “base.webp”
Zones to “/svg/zones.svg”
Layer 7 (misc. buildings) as “misc-buildings.webp”
Street Labels, Icons, Parking Stations and Areas as “svgs/icons-areas-labels.svg”
Buildings each get exported as their own webp to “/buildings/building-name.webp” where the building names are lowercase-kebab-case.
- Exceptions are:
  - “5k start” exported as “5k”
  - “Arts & Crafts” exported as “arts-and-crafts”
  - “Snowcone Stand” exported as “snow-cone-stand”

Process and Import the Assets

Handle SVG ids

zones.svg should get an id of zones and every clipPath id should be prefixed with zones (e.g. <clipPath id="zones-clippath-*">. Similarly, the icons-areas-labels.svg should get an id of icons-areas-labels and all clip path ids should be prefixed with ial-.

Migrate Internal CSS

To prevent css conflicts, all internal css should be migrated to _zones.scss or _map-svg-styles.scss and nested under the id set in the previous step. Remember to update all clippath urls to include their prefix as well!