Advanced Usage

This is a list of options that can be specified in the object passed as the second argument when creating an instance.

const mapnj = new('#your-mapnj', {
  activeAreaId: "foo",
  areaDefaultFillColors: {
    area1: "#123456",
    area2: "red"
  }
});

In addition to the basic parts, it is possible to define optional parts. Optional parts assign specific data attributes to HTML tag elements.

<!-- Click to make SVG active. -->
<button data-mapnj="selector" data-area-id="foo">Active Foo</button>

<!-- Click to make all SVGs default. -->
<button data-mapnj="reset-selector">Reset</button>

<!-- Appears when A is active. -->
<div data-mapnj="content" data-area-id="foo"></div>

<div>
  <svg id="mapnj-area-foo"></svg>
  <svg id="mapnj-area-bar"></svg>
</div>

By using the "on" method of the instance, it is possible to define functions that are executed at specific timings.

const mapnj = new('#your-mapnj');

mapnj.on('AREA_CHANGE', (mapnj) => {
  console.log('instance:', mapnj);
  console.log('actiev area is :', mapnj.state.activeAreaId);
})

Design classes are added to the HTML tag element specified as the first argument during instance creation, depending on the state. By utilizing these design classes, it is also possible to create custom design parts that work in conjunction with MapNJ.

MapNJ v1 exposes its selection state directly. You can select, reset, read, and subscribe from your own code.

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

// select / deselect from your own code
mapnj.selectArea('shibuya');
mapnj.reset();

// read the current state
console.log(mapnj.activeAreaId); // also: hoverAreaId, prevActiveAreaId
console.log(mapnj.getState()); // { activeAreaId, prevActiveAreaId, hoverAreaId }

// subscribe to any state change (returns an unsubscribe function)
const off = mapnj.subscribe((state) => {
  console.log('active:', state.activeAreaId);
});
off();

A React adapter ships as the subpath export mapnj/react (React 18+, optional peer dependency). The useMapNJ() hook creates the instance when the ref is attached, keeps the state in sync with React, and destroys the instance on unmount (StrictMode-safe).

import { useMapNJ } from 'mapnj/react';

function TouristMap() {
  const { ref, state, selectArea, reset } = useMapNJ({
    areaActiveFillColor: '#e8b4a0',
  });

  return (
    <div>
      <div ref={ref}>{/* inline SVG with mapnj-area-* ids */}</div>
      <p>Active area: {state.activeAreaId || 'none'}</p>
      <button onClick={() => selectArea('shibuya')}>Select Shibuya</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

In addition to the existing --mapnj-* classes, MapNJ v1 exposes the state as data attributes, which are easier to target with CSS attribute selectors.

/* container: which area is active / hovered */
#your-mapnj[data-mapnj-active-area='shibuya'] .legend-shibuya {
  font-weight: bold;
}

/* each area / label: current state */
#your-mapnj [data-mapnj-state='active'] {
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.3));
}

MapNJ v1 treats interaction quality as a default, not an option:

• Areas and clickable labels are focusable buttons (role="button", tabindex="0") and respond to Enter / Space.
• The active area exposes aria-pressed="true", so assistive technology can follow the selection.
• Hover uses Pointer Events. Touch devices no longer produce a stuck hover state.
• When the OS "reduce motion" setting is on, transitions and label entrance animations are skipped.

If you are upgrading from the 0.x line, here is what changed:

• The package is now ESM-first (ESM + CJS + IIFE). If you imported from mapnj/lib/..., switch to the package root import.
• The CDN file dist/MapNJ.min.js keeps its path — existing embeds continue to work.
• Hover events keep their names (AREA_MOUSEOVER etc.) but fire from Pointer Events; touch does not emit them.
• on() now returns an unsubscribe function, and invalid event names are rejected at compile time in TypeScript.