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 :

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._

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

`html




`

Add a