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) を加工して作成