Usage

To use MapNJ, you must first prepare your design materials as SVG data. Adobe Illustrator or Figma are ideal for creating these. This is because the name you assign to the design layer can be assigned to the id and data attributes of the svg when output.

MapNJ is a module that reads SVG data or ID attributes and manipulates the design.

Let's take a look at the 3 steps!

STEP1. Creating SVG illustrations

Create vector data for the entire map. Divide the map into areas.

1. 

   Use the color scheme of all areas that are selected (active).

2. 

   Although not required, create label elements as well.

3. 

   Define lines for the areas (and labels) if necessary.

Finally, outline all the elements and convert them into vector data.

Tips

※MapNJ is a script that manages the active and inactive states of map illustrations. During the design phase, all areas are created in an active state, and the design for the inactive state is defined using JavaScript

※When using lines in Illustrator, always select "Center" for the stroke alignment. If you choose "Inside" or "Outside," it will result in an unintended output, treating the element as having two different fill colors.

STEP2. Naming design nodes

In the design app's layer panel, name each part according to the following rules:

mapnj-[typeName]-[AreaId]-[FreeText]

Tips

※Use alphanumeric characters for naming.

※Currently, only "area" and "label" are recognized as "type name".

※Assign the same "AreaId" to both the area and the label you want to link together.

※"Free text" is usually not necessary to use; it is a reserved area.

Area

役割 : クリックするとアクティブ化します。また、その他のエリアを非アクティブ化します。

命名例 : mapnj-area-osaka

ラベル / Label

役割 : クリックするとidに指定したエリアがアクティブ化します。また、その他のエリアを非アクティブ化します。

命名例 : mapnj-label-osaka

Tips

複数の要素をグループ化したものが対象である場合、そのグループに対し、この命名を適用してください。

STEP3-1. Exporting SVG with Illustrator

1. Select "File > Export > Export for Screens..." from the menu
2. In the SVG export settings screen, set the file format to "SVG"
3. Check "Use Artboard" if you want to export based on artboards (optional)
4. Click "Export"
5. Set the style to "Internal CSS"
6. Set the font to "SVG"
7. [IMPORTANT] For "Object ID": Set to "Layer Names" if you want to output information to the ID attribute. / Set to "Unique" (or "Minimal") if you want to output to the data-name attribute. ※1
8. Export the file.

Tips

※1MapNJ normally reads the ID attribute of the SVG part, there is an option to change this to the data-name. (attributeType)

STEP3-2. Exporting SVG with Figma

1. Select "SVG" from the Export settings
2. Open the advanced settings screen
3. Select "Ignore Overlapping Layers" (optional) ※1
4. Select "Include id attribute" ※2
5. Export the file.

Tips

※1 If you don't check this option, an additional rect element with the color of the upper frame will be output.

※2 If you don't check this, text information won't be output. When output, it will be as an id attribute.

Open the created svg design file directly in a code editor and place it.
If there is an <?xml...?> tag output on the first line, delete it.
Also, wrap the SVG tag in any tag you give it an ID (or class).

<div id="your-mapnj">
  <svg>
    <defs>
      <style></style>
    </defs>

    <!-- 通常ノードへマッピングした場合の出力例 -->
    <!-- ※ 注意: Illustratorの設定次第ではidではなくdata-nameにマッピングされています -->
    <path id="mapnj-area-xxx" d="" />
    <path id="mapnj-label-xxx" d="" />

    <!-- グループ化した要素にマッピングした場合の出力例 -->
    <!-- ※ 注意: Illustratorの設定次第ではidではなくdata-nameにマッピングされています -->
    <g id="mapnj-area-xxx"><path d="" /><path d="" /></g>
    <g id="mapnj-label-xxx"><path d="" /><path d="" /></g>
  <svg>
</div>

When using a Node module, import MapNJ.
Instantiate it by passing the selector of the element wrapping the SVG as an argument.

import MapNJ from 'mapnj';
const mapnj = new MapNJ('#your-mapnj');

The same applies when using the pre-built file directly.

<script src="path/to/MapNJ.js"></script>
<script>
  const mapnj = new MapNJ('#your-mapnj');
</script>

The constructor of MapNJ accepts a CSS selector string or an Element object as its first argument. The constructor determines the type of the argument and processes it accordingly, so you can instantiate it using either of the following methods.

new MapNJ('.foo'); 
new MapNJ(document.querySelector('.foo'));