Interactive US Maps Development
VIDEO TRANSCRIPT | Recorded: 2022-01-27 | Verify against current system state
Abstract¶
Training session on building interactive US maps for the AANP website using SimpleMaps tool. Covers the complete workflow: checking existing map library on SharePoint, using Excel template for configuration, building map in SimpleMaps online editor, saving with AANP license, registering to library, and submitting helpdesk request for website publishing. Emphasizes consistent color standards across all maps. Maps are responsive and work on all devices.
Key Procedures¶
- Check SharePoint library for existing maps before creating new
- Use Excel template with AANP standard colors
- Create map in SimpleMaps online editor (simplemaps.com/custom/us)
- Save map immediately to get unique URL (bookmark required)
- Register map with AANP license number
- Configure state colors, hover colors, descriptions, URLs
- Hide non-US territories (military bases, etc.)
- Disable zoom for states with no additional info
- Add completed map to SharePoint library with metadata
- Submit helpdesk request with SimpleMaps URL for publishing
- Developer downloads mapdata.js and embeds in Craft CMS
- Add legend table below map with matching colors
Notable Statements¶
- 0:01:06 "When you first decide, hey, I want to build a map, the first thing you should do is look, does somebody else already build this map?"
- 0:01:53 "There's no log into an AANP account and then start working. It's just open."
- 0:02:18 "Once you click Save, then a little URL changes. You need to bookmark that URL."
- 0:09:01 "We've tried to set up standard colors to use for maps. That means that the maps on our site will have a consistent look and feel."
- 0:27:04 "Once you send it to HelpDesk, a developer will come in, they're going to download the mapdata.js file."
- 0:31:41 "The great thing about this is it looks good on any kind of device that you're using."
Systems & Configurations¶
Systems Mentioned¶
- SimpleMaps (simplemaps.com/custom/us)
- SharePoint (map library on intranet)
- Craft CMS (website embedding)
- storage.aanp.org (file hosting)
Specific Configurations¶
| Item | Value/Setting | Timestamp | Notes |
|---|---|---|---|
| License | In SharePoint doc | 0:07:27 | Register for recovery |
| Map File | mapdata.js | 0:27:44 | Required filename |
| Storage Path | storage.aanp.org/www/documents | 0:29:29 | Upload location |
| Color Scheme | Blue, Yellow, Gray standard | 0:09:01 | AANP standard colors |
| Hover Colors | Lighter shade of main | 0:12:06 | Consistent percentage |
Credentials/Access Mentioned¶
- SimpleMaps license number (in SharePoint)
- SharePoint intranet access for library
- Craft CMS access for developers
- HelpDesk for publishing requests
Errors & Troubleshooting¶
- Issue: Lost bookmark to map
- Cause: No login system, URL is only access method
- Resolution: Register with AANP license to enable recovery
-
Timestamp: 0:07:33
-
Issue: Colors not appearing on map
- Cause: Missing pound sign (#) in hex color code
- Resolution: Include # before hex values
-
Timestamp: 0:19:58
-
Issue: Blue dots appearing on default map
- Cause: Default SimpleMaps city location markers
- Resolution: Delete entries in Locations tab
-
Timestamp: 0:18:36
-
Issue: Map changes not appearing on website
- Cause: Website uses downloaded snapshot, not live SimpleMaps
- Resolution: Re-submit to helpdesk for new mapdata.js download
- Timestamp: 0:27:04
Transcript Gaps & Quality Notes¶
- Hands-on training with staff creating their own maps
- Exercise: map states lived in vs visited
- Julia mentioned as having maps in progress
- Color consistency emphasized for brand standards
- Mobile responsiveness demonstrated
- Example shown: disability placard authorization map
- Two-column layout automatically applied when >7 menu items
- Intranet documentation location: IT > Web Application and Configuration Steps