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, mid and high outline accuracy, so you can trade file size for coastline detail.
• 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:

Optional attributes: level (low / 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) を加工して作成