Neovictorian Paisley Menswear
    Wondering what’s next for npm?Check out our public roadmap! »

    svg-japan

    1.1.2 • Public • Published


    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

    FeaturesQuick StartUsageSupported DevicesDocumentationDemonstrationCreatorsLicense

    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

    1. Include this plugin script into your HTML.
    <script src="/path/to/svg-japan.min.js"></script>
    1. Then mark up the element where you want to insert the map.
    <div id="my-map-container"></div>
    1. 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)

    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!

    Copyright and license

    Code and documentation copyright 2020 the ka2. Code released under the MIT License.

    Install

    npm i svg-japan

    DownloadsWeekly Downloads

    4

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    1.85 MB

    Total Files

    17

    Homepage

    ka2.org/

    Last publish

    Collaborators

    • avatar