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

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.

• [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 bundle from the latest release.
• Compile the bundle from sources (see development informations).
• Get the package from npm:

  npm install image-map-creator
  

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

Import p5.js, p5.dom.js and the javascript bundle from /dist :

<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

1. Git
2. Nodejs & NPM

Install & Run

1. clone with --recurse-submodules option or download this repository and install git submodules :

   git submodule init
   git submodule update
   

2. install dependencies :

   npm install
   

3. launch webpack in watch mode to build the dev bundle :

   npm run watch
   

4. navigate to demos/index.html with you browser

Built with

• p5.js - easy canvas drawing library - website
• quicksettings - quick and easy settings creation library - website
• Undo Manager - light undo manager library
• contextmenu - light right-click menu creation library
• download.js - one liner function to download files client side - website

Authors

• Nicolas Peugnet - Initial work - Github - Website

See also the list of contributors who participated in this project.