Japan Clickable Map

Japan Clickable Map turns a plain map of Japan into a navigation element. You build a map in the WordPress admin — pick which prefectures to show, give them colors and link targets — and then place it in any post, page or custom post type with a shortcode or a block. The map is rendered as inline SVG on the server. There is no external map service, no API key and no JavaScript library to load: the front end only ships a small script when a region popover is actually used. Building a map

• Map range — show all 47 prefectures (full), or only the prefectures you pick (range). Any combination of prefectures is allowed.
• Detail level — choose between low, low-smooth, mid and high outline accuracy, so you can trade file size for coastline detail. low-smooth keeps the simplified low outline but joins its points with curves for a softer coastline.
• Insets — Okinawa, the Northern Territories and the Ogasawara Islands are placed at fixed positions inside the map frame instead of stretching it.
• Grouping (full mode) — treat each prefecture as its own clickable area, or group prefectures into regions. Regions can follow Japan's standard eight regions, or you can define your own grouping per map.
• Region behavior — a region can link straight to a URL, or open a popover listing the destinations inside it (hover or click).
• Colors — set a default fill for the map and override it per prefecture.
• Links — set a link per prefecture or per region. A prefecture with no link is not clickable and does not change the cursor.
• Link targets — enter a URL by hand, or search your site and pick a post, page, custom post type entry or taxonomy term, so links keep working when permalinks change.
• Labels — prefecture and region names are drawn on the map and exposed to screen readers as aria-label. Any label can be overridden per prefecture.
• Color presets — save the palettes you use often and reuse them across maps.
• Preview — check the finished map in a modal without leaving the editor.

Placing a map Shortcode: [plg_jcm_map id="123"] Optional attributes: level (low / low-smooth / mid / high) to override the detail level saved on the map, and class to add your own CSS class. Or insert the Clickable Map of Japan block and choose which map to display. The block stores only the map ID and renders on the server, so editing a map updates every place it is embedded. Prefecture level, without limits Every option above is available here, and you can create as many prefecture maps as you like. What the paid edition adds is a different level of detail: maps at municipality level, where the clickable areas are cities, towns and wards rather than prefectures, and where those areas can be grouped across prefecture borders. Map data The bundled SVG maps in assets/svg/ are derived from the National Land Numerical Information (Administrative Zones Data, N03) published by the Ministry of Land, Infrastructure, Transport and Tourism of Japan (data as of 1 January 2024).

• Source: https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v3_1.html
• Terms: https://nlftp.mlit.go.jp/ksj/other/agreement_01.html — 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.

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. See assets/svg/japan/README.md for details. If you display these maps, please credit the source somewhere visible on the page (a footer or a caption is fine):

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

1. Upload the plugin to /wp-content/plugins/japan-clickable-map/, or install it from Plugins → Add New in your dashboard.
2. Activate it through the Plugins screen.
3. Go to Clickable Maps → Add New, choose the prefectures, colors and links, then publish.
4. Insert the Clickable Map of Japan block and pick your map from the list, or place the shortcode [plg_jcm_map id="123"] by hand — 123 is the map ID, which is the post= value in the address bar while you edit that map.

Building the block from source The editor script in block/build/ is compiled with @wordpress/scripts. The unminified sources ship in block/src/. To rebuild: npm install && npm run build:block

1.0.1

• Fixed: parts of the admin UI were shown in Japanese regardless of the site language. The preview button and modal, the region popover close button, the selected-prefecture counter, the unassigned list and the color preset controls are now translatable.
• Fixed: the prefecture counter next to each region heading was blank on non-Japanese sites.
• Fixed: the selected-prefecture counter switched language as soon as you ticked a checkbox, because the initial value and the live update came from different places.
• Changed: Plugin URI now points at the English documentation.
• Docs: corrected the installation steps (there is no shortcode to copy on the edit screen — the map ID is the post= value in the edit screen URL) and the list of detail levels (low-smooth was missing).

1.0.0

• First release.