README

SVG Japan

A native JavaScript-built plugin that generates an interactive SVG-formatted map of Japan.

GitHub package.json version GitHub top language npm GitHub code size in bytes GitHub

Features • Quick Start • Usage • Supported Devices • Documentation • Demonstration • Creators • License

screenshot

Features

Multiple types of Japanese maps can be generated.
The presence or absence of a map border can be switch.
Regions can be defined by freely grouping prefectures.
All prefectures can be unified in one color.
Normal and active colors can be set for each prefecture and region.
The tip helper can be pop up when on mouse over.
You can get the event fired on JavaScript when the prefecture is clicked.

Quick Start

Several quick start options are available:

Clone this repository

git clone https://github.com/ka215/svg-japan.git

Install from npm

npm install svg-japan

Download an archive file of latest release Letest Release
Retrieve via CDN into your HTML

<script src="https://cdn.jsdelivr.net/gh/ka215/svg-japan@main/dist/svg-japan.min.js"></script>

Usage

Include this plugin script into your HTML.

<script src="/path/to/svg-japan.min.js"></script>

Then mark up the element where you want to insert the map.

<div id="my-map-container"></div>

Finally, instantiate the plugin class in your script.

svgJapan({ element: "#my-map-container" })

Alternatively, you can create the container element in JavaScript.

var map = svgJapan()

document.body.appendChild( map.map_container )

It is desirable to execute the dispatcher function after the files of this plugin are completely loaded. To do this, a structure that waits for the DOM content to finish loading, such as:

document.addEventListener( 'DOMContentLoaded', function() {

  svgJapan()

}, false)

Supported Devices

Please refer to the target device definition of JS transpiling (excerpt from "babel.config.js" below):

targets: {
  chrome: "67",
  edge: "17",
  firefox: "60",
  ie: "11",
  safari: "11.1",
},

Documentation

Refer to the following page for the options that can be set and the method description.

Interactive Japan Map Generation Plugin

Demonstration

The shortcut is to use it for the time being.

DEMO

Creators

ka2 (Katsuhiko Maeno)

https://ka2.org/

If you liked using this app or it has helped you in any way, I'd like you send me an email at ka2@ka2.org about anything you'd want to say about this software. I'd really appreciate it!

svg-japan

Usage no npm install needed!