Japan Clickable Map Free edition

Overview

The map is rendered as inline SVG on your own server. There is no external map service, no API key and no JavaScript library, and the plugin makes no outbound HTTP requests at all. The front end only ships a script when a map actually uses region popovers.

What it does

• Show all 47 prefectures, or only the prefectures you pick
• Set a color and a link target per prefecture, or per region
• Group prefectures into regions — Japan’s standard eight, or your own grouping
• Make a region link straight to a URL, or open a popover next to it
• Choose link targets by searching your site instead of typing URLs (posts, pages, custom post type entries, taxonomy terms)
• Draw prefecture and region names on the map
• Save color palettes as presets and reuse them across maps
• Check the finished map in a preview modal without leaving the editor

Requirements

The plugin runs on multisite. Note that in v1.0.1 the uninstall cleanup described below only covers the single site it runs on — it does not sweep the whole network.

Installing the plugin

1. Search for “Japan Clickable Map” under Plugins → Add New, or upload the zip so that it extracts to /wp-content/plugins/japan-clickable-map/.
2. Activate it on the Plugins screen.
3. A Clickable Maps menu appears in the admin sidebar.

Quick start

Three steps:

1. Go to Clickable Maps → Add New and give the map a title.
2. On the Prefecture selection / overrides tab, check the prefectures you want, fill in link targets if you need them, and publish.
3. Put [plg_jcm_map id="123"] into a post or page, or insert the Clickable Map of Japan block and pick your map.

The map editor

A map is configured through the eight tabs of the Map settings meta box plus the Output size box in the sidebar. Tabs that carry no meaning for the current mode are hidden, so you will not see all eight at once.

Saving a draft is enough for the preview to pick up your changes.

Mode

Everything from Grouping down appears only when the display mode is set to all of Japan. Grouping by region merges the clickable areas so that a click targets a region rather than a single prefecture. The standard eight regions are Hokkaido, Tohoku, Kanto, Chubu, Kinki, Chugoku, Shikoku and Kyushu.

A popover shows a card — title, body text and links — next to the region. On touch devices, the hover setting is handled as a tap automatically.

Colors

Set the fill for the whole map and, optionally, a color per region. The order of precedence is:

per-prefecture override > region color > default color

• Default color — the fill for the whole map. Defaults to #dddddd
• Color per region — one color per region. Regions left blank use the default color. Shown only for all-of-Japan + by region + standard eight regions

Colors for custom areas are set on the Custom areas tab instead. Your saved presets appear as swatches next to every color picker.

Display options

• Show prefecture names — draw prefecture names on the map (default: off)
• Show region names — draw region names (default: off). Shown only for all-of-Japan + by region
• Draw the outlying islands as well — default: on. Shown only when you are picking prefectures yourself

Custom areas

Build your own grouping — something like “Tokai (Aichi / Gifu / Mie)” — instead of the standard eight. The tab appears when you choose all of Japan → by region → Custom areas.

Prefectures that belong to no area are drawn in the default color and are not clickable. The Unassigned prefectures list at the bottom of the tab shows which ones those are.

Popover

Shown for standard eight regions + popover. Set a heading, body text and link items per region. Empty fields are not shown.

A region becomes clickable when it has a title, body text, link or link item, or when any prefecture inside it has a link. A region with neither is not clickable.

• Title — the region name is used if you leave it blank
• Body text — opening hours, an address, and so on. Line breaks are allowed
• Link items — as soon as you add one item, the popover lists those items. With none, it falls back to the per-prefecture URLs from the Prefecture selection / overrides tab (only prefectures that have a link are listed, and each item is labelled with its label override, or the prefecture name if there is none)

Region links

Shown for standard eight regions + direct link. Enter the URL each region links to. Regions left blank are not clickable.

Exclusions

Shown for all-of-Japan only. Prefectures you check here are left out of the drawing entirely, and the space they took is closed up.

• Zoom to fit the remaining area (default: on) — the prefectures left after exclusion are zoomed to fill the display area. With it off, the position and scale of the whole country are kept and the excluded parts become blank space

Prefecture selection / overrides

The 47 prefectures are listed in eight collapsible groups, one row each.

When you are picking prefectures yourself, each group also offers Select all in this region and Clear this region.

Whether these overrides actually apply depends on the mode you are in. Note in particular that link overrides are ignored when you use custom areas.

Output size

This box sits in the editor sidebar.

Map detail offers four levels of outline accuracy. Higher detail means a finer coastline and a larger SVG. The default is high.

Maximum width takes a number and a unit (px or %). Blank or 0 means no limit and the map fills its parent element. Values are capped at 5000 px and 100 %.

Setting link targets

You can type a URL into any link field, or search your site and pick a target instead. The search covers public post types and public taxonomies, so posts, pages, custom post type entries and taxonomy terms are all available.

• A search returns at most 20 results. Add keywords if what you want is not listed
• Labels on popover link items are truncated to 60 characters
• Media attachments and the plugin’s own map post type are excluded from the search

Placing a map on a page

Two ways, producing identical HTML.

Shortcode

[plg_jcm_map id="123"]

[plg_jcm_map id="123" level="mid" class="my-map"]

Block

Insert the Clickable Map of Japan block and choose your map under Map to display in the sidebar.

The block stores only the map ID and renders on the server, so editing a map updates every place it is embedded.

Checking the result

The map editor adds a floating preview button. Clicking it opens a modal that renders the map from what is currently saved.

Color presets and duplicating maps

Color presets

Clickable Maps → Preset colors edits the swatches shown next to the color picker on every map edit screen.

• Up to 24 colors can be saved
• Drag the ⠿ handle to reorder
• Reset restores the built-in default palette of eight colors
• Saving an empty list also falls back to the built-in palette

This screen requires administrator capabilities (manage_options).

Duplicating a map

Hovering a row in the map list reveals Duplicate. It copies the whole configuration into a new map and appends (copy) to the title — useful when you need several maps that share a palette or link structure.

Styling with CSS

A map is output like this:

<div class="jcm-map">
  <svg …>
    <path id="pref-13" data-pref-code="13" data-pref-name="Tokyo" fill="…" aria-label="Tokyo" />
    …
  </svg>
</div>

Add your own class with the shortcode’s class attribute, then target these selectors from your theme’s CSS.

For example, to change the hover fill of one prefecture:

.my-map path[data-pref-code="13"]:hover {
	fill: #4f46e5;
}

Accessibility

• Clickable areas are real <a> links carrying an aria-label with the prefecture or region name
• A label override replaces what a screen reader announces
• Prefectures without a link are inert and are not focusable, and the cursor does not change — nothing looks clickable when it is not
• Regions that open a popover carry role="button" and aria-expanded

Settings and uninstalling

Clickable Maps → Settings holds exactly one setting: Delete all data for this plugin on uninstall, off by default.

Delete the plugin with it off and your maps and settings stay in the database — reinstalling picks up exactly where you left off.

Delete it with the setting on and the following is removed permanently:

• Prefecture maps (the custom post type) and their metadata
• Every setting for this plugin (options starting with plg_jcm_)

Map data and attribution

The bundled maps are derived from the National Land Numerical Information (Administrative Zones Data, N03) published by Japan’s Ministry of Land, Infrastructure, Transport and Tourism, using data as of 1 January 2024.

The terms are the Japanese Government Standard Terms of Use (version 2.0), which are compatible with CC BY 4.0. Modification, redistribution and commercial use are permitted as long as the source is credited.

「国土数値情報（行政区域データ）」（国土交通省）
（https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v3_1.html）を加工して作成

The credit is conventionally given in Japanese, as above. Processing applied to the original data: administrative polygons dissolved into prefecture outlines, reprojection to Web Mercator (EPSG:3857), Okinawa moved into an inset, vertex simplification, conversion to SVG, and the addition of identifying attributes.

Troubleshooting

The shortcode outputs nothing

If no map exists with the given id, the shortcode outputs nothing rather than raising an error. Check the number against post= in the map’s edit screen URL. Draft maps render only for users who can edit that map.

A prefecture is not clickable

Prefectures with no link target are deliberately rendered inert. If you are grouping by region, remember that a region’s link takes priority over the per-prefecture links inside it.

A prefecture is missing from a custom area

A prefecture can only belong to one area, and the area added first wins. Also note that an area row saved with an empty name is discarded entirely.

The map is too wide or too narrow on mobile

The SVG scales to its parent element. Set Maximum width on the map, or add a class with the class attribute and size it in your theme’s CSS.

Still stuck

Please use the WordPress.org support forum, linked at the top of this page.

Free edition vs paid edition

Everything documented on this page is available in the free edition, and there is no limit on how many maps you can build.

If you need clickable areas at city, town and ward level, look at the paid edition. There is also a Clickable Maps → Upgrade to Pro screen in the admin.