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.

• 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

1. Git
2. Make
3. 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 :

   make node_modules
   

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

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