Japan Clickable Map Wordpress Plugin - Rating, Reviews, Demo & Download
Plugin Description
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,midandhighoutline 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 asaria-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 / 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) を加工して作成
Screenshots
A prefecture map on the front end. The 47 prefectures are grouped into Japan’s eight standard regions, each with its own fill.
Clicking a region opens a popover carrying its own heading, body text and links.
The map editor. Prefectures are listed by region, and colors and links can be overridden one prefecture at a time.
Colors: a default fill plus a color per region, with your saved presets next to every picker.
The preview modal inside the editor, so you can check a map without leaving the edit screen.
Placing a map with the block. The block stores only the map ID and renders on the server.
Saved color presets, reusable across maps.
