WP Manifestindependent plugin directory
manifest / content / canada-province-plugin

Canada Province Map

Interactive SVG map of Canada via shortcode. Each province has a hover tooltip with its name and is wrapped in a configurable link. Shortcode-only.

by BabyBrands · github.com/cjbodullo/canada-province-plugin

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/cjbodullo/canada-province-plugin/archive/refs/heads/master.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/cjbodullo/canada-province-plugin ↗

Interactive WordPress shortcode that renders an SVG map of Canada. Hovering a province pops up its name; clicking opens whatever link you configure for that province in Settings → Canada Province Map.

Text domain: canada-province-plugin Version: 1.0.0 (CPP_VERSION in the main plugin file).

Requirements

  • WordPress 5.x or newer.
  • PHP 7.4+.

Installation

  1. Copy the canada-province-plugin folder into wp-content/plugins/.
  2. In Plugins, activate Canada Province Map.
  3. Open Settings → Canada Province Map and paste a URL for each province you want clickable (you can leave any of them empty — non-clickable provinces just display, hover-only).
  4. Drop the shortcode [canada_provinces] into any page or post.

Shortcode

[canada_provinces]

Attributes (all optional)

Attribute Default Purpose
max_width 760px Outer max width of the map (any single CSS length: px, %, rem, em, vw).
bg (transparent) Background colour of the wrapper. When set, the wrapper gets card padding + rounded corners; when empty (default), the SVG sits flush on the page with no background. Accepts a hex value or a CSS named colour.
new_tab (inherits) yes / no — overrides the global "open in new tab" toggle.
rel empty Extra rel tokens applied to every link (e.g. nofollow sponsored).

Example

[canada_provinces max_width="640px" bg="#ffffff" new_tab="yes" rel="nofollow"]

What you get

  • Hover → a styled tooltip with the province name floats next to the cursor.
  • Keyboard focus → same tooltip is anchored to the focused province (each path is tabindex="0").
  • Click → navigates to that province's configured URL. Provinces without a URL stay non-clickable (no <a> wrapper at all, so they don't look interactive when they aren't).
  • Hover dimming → siblings dim slightly so the hovered province pops out, matching the reference look.
  • Native a11y → each path also exposes an aria-label with the province name.

Province IDs

The SVG uses ISO 3166-2 lowercase IDs, so admin settings, CSS overrides, and the shortcode all use the same keys:

ID Province / Territory
ab Alberta
bc British Columbia
mb Manitoba
nb New Brunswick
nl Newfoundland and Labrador
ns Nova Scotia
nt Northwest Territories
nu Nunavut
on Ontario
pe Prince Edward Island
qc Quebec
sk Saskatchewan
yt Yukon

Customising colours

Each province is fillable via a CSS custom property under the .cpp-shell scope. Override any of these in your theme to repaint a province:

.cpp-shell {
    --cpp-ab: #f4d8dd; /* Alberta */
    --cpp-bc: #b7e1d3; /* British Columbia */
    /* …etc, one variable per province (cpp-ab, cpp-bc, cpp-mb, cpp-nb, cpp-nl,
       cpp-ns, cpp-nt, cpp-nu, cpp-on, cpp-pe, cpp-qc, cpp-sk, cpp-yt) */
}

You can also target a province directly via its class:

.cpp-shell .cpp-on { fill: #888; }

Architecture

Piece Path
Plugin entry canada-province-plugin.php
Shortcode markup cpp_render_shortcode()
SVG inliner cpp_get_processed_svg() — reads assets/svg/canada.svg, adds classes / data-name / wraps in <a> when a link is configured
Front-end JS assets/js/canada-province.js
Styles assets/css/canada-province.css (all selectors scoped to .cpp-shell)
Admin settings Settings → Canada Province Map (options-general.php?page=canada-province-plugin)
SVG asset assets/svg/canada.svg

Credits / licence

The SVG of Canada is from @svg-maps/canada, based on MapSVG and licensed under CC BY 4.0. If you redistribute or modify the SVG, keep the attribution.