Image-map-creator NPM

Image Map Creator

This is a simple map creator tool made with the p5.js library. I want it to be easy to use for both the end user and the developper. This work is still in beta so a lot of things are about to change (including the save file's structure).

demo gif

Live demo

the live demo can be tried here : https://n-peugnet.github.io/image-map-creator/

Features

Here is the list of all the features of this app :

The checked ones are implemented, the others are the ones I plan to add in the future.

drag&drop on the canvas
- a picture
- a .map.json save file
zoom in & out by scrolling
pan with center click
show a menu by right-clicking on an area with these options :
- set url
- set title
- delete
- move forward
- move backwards
differents tools :
- rectangle mode
- circle mode
- polygon mode
- select mode :
  - move an area
  - move a point of an area
  - multiselect with shift
- delete mode
- test mode
differents drawing modes for rectangles :
- dram from edges
- draw from center (with alt)
- draw square (with shift)
differents drawing modes for circles :
- draw from edges
- draw from center (later with shift)
gui with these features :
- select tool mode
- undo
- redo
- export the result as a valid html map
- export the result as a usable svg map
- export the result as JSON
- import from JSON

Integration

There are multiple ways to get image-map-creator:

Download the bundles from the latest release.
Compile the bundles from sources (see development informations).

Get the package from npm:

npm install image-map-creator

// script.js
import "image-map-creator/dist/p5.image-map-creator.css";
import { imageMapCreator } from "image-map-creator";

Import p5.js, p5.dom.js and the css & javascript bundles from /dist :

<link rel="stylesheet" href="dist/image-map-creator.bundle.css" />
<script src="dist/image-map-creator.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>

Add a <div> with an id, then instantiate the p5 object like this :

let iMap = new imageMapCreator("div-id");

The contructor of imageMapCreator accepts these parameters :

new imageMapCreator(elementId [, width = 600 [, height = 450 ]]);

You can also see the detailled example in the /demos folder.

Development

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Git
Make
Nodejs & NPM

Install & Run

clone with --recurse-submodules option or download this repository and install git submodules :
```
git submodule init
git submodule update
```
install dependencies :
```
make node_modules
```
launch webpack in watch mode to build the dev bundle :
```
make watch
```
navigate to demos/index.html with you browser