Custom Interactive US Map Builder

Overview

This WordPress plugin allows you to create fully customizable, interactive, clickable SVG maps of the United States. You can create multiple map instances via the admin dashboard, customize colors, set links for individual states, and embed them using shortcodes.

Features

• Custom Post Type: Each map is created as a "US Map" post.
• Global Stylings: Set default Inactive, Active, and Hover colors for the entire map.
• State-Level Customization:
  • Toggle individual states as "Active".
  • Set unique active colors per state.
  • Define custom URLs for each state.
  • Option to open links in a new tab.
• Dynamic VAA Tracking: Automatically captures and appends vaa URL parameters to state links for tracking purposes.

Folder Structure

• custom-interactive-us-map-builder.php: The main plugin file. Handles initialization and constants.
• admin/: Contains backend logic and UI.
  • class-map-admin.php: Registers the "US Map" post type and renders the settings metabox for colors and state data.
• public/: Contains frontend logic and assets.
  • class-map-public.php: Handles the shortcode rendering [custom_us_map].
  • js/map-script.js: Critical File. Handles the interactive map logic (hover effects, clicks, VAA code injection).
• assets/:
  • us-map.svg: The source SVG file for the US map. Note: Michigan (MI) is grouped to include both peninsulas.

Usage

1. Create a Map: Go to US Maps > Add New.
2. Configure: Set your desired colors and active states in the "Map Settings" box.
3. Embed: Copy the shortcode from the "Shortcode" column in the main US Maps list (e.g., [custom_us_map id="123"]) and paste it into any page or post.

Technical Details (Maintenance Reference)

Link Logic & VAA Handling

The plugin includes a robust system to track the vaa query parameter (e.g., your-site.com?vaa=123).

• Capture: When a user visits the site with ?vaa=CODE, the code is stored in both sessionStorage and localStorage.
• Appending: When a user clicks a state on the map:
  1. The script checks sessionStorage or localStorage for a stored VAA code.
  2. Fallback: It also checks the current URL for ?vaa=CODE in case the user landed directly on the map page without prior storage.
  3. If found, the vaa parameter is appended to the destination URL (e.g., target-site.com?vaa=123).

Shortcode Arguments

The shortcode [custom_us_map id="ID"] renders the map. The PHP class CIUMB_Public retrieves metadata (colors, state links) and passes it to the frontend via a data-config attribute on the map wrapper.

Versioning

Constants like CIUMB_VERSION in the main PHP file control script versioning. Update this version number when making changes to JS or CSS files to ensure browser caches are cleared.