JavaScript / Node Module for Design
MapNJ is a script that adds small interactions to illustrations created with SVG.
This module divides SVG illustrations into parts (referred to as "areas") and manages their states, colors, and events. It is designed with use cases like map illustrations in mind. Additionally, it handles display rules for surrounding parts.
Click on an area to interact with it. ππ
Welcome to techsyn!!
MapNJ...
- Manipulates SVG illustrations.
- Manages the selection and deselection states of parts.
- Controls the fill and stroke colors of parts.
Additionally...
- Executes scripts at specific timings.
- Allows state manipulation from external parts.
- Displays content based on the selection state.
Features and Background of MapNJ
MapNJ was designed to separate the work areas of designers and engineers, enabling both to collaboratively manage the UI. As a result, there are critical tasks on the design software side that define the behavior of scripts. At first glance, these rules may seem cumbersome. However, imagine the repeated back-and-forth exchange of source files between the two parties without such rules. In this case, you might come to appreciate the structure provided by MapNJ's rules.
I have created many websites themed around tourist destinations. The UI frequently required in such cases called for scripts like MapNJ, and in a way, I developed it to improve my own workflow efficiency. While it is admittedly a niche tool, its simplicity allows it to be applied to entirely different ideas beyond its original purpose.