Skip to content

Latest commit

 

History

History
154 lines (123 loc) · 4.85 KB

README.md

File metadata and controls

154 lines (123 loc) · 4.85 KB
Raw

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

Authors

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