A javascript tool to create image map that you can export in HTML or SVG
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).
the live demo can be tried here : https://n-peugnet.github.io/image-map-creator/
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.
.map.json
save fileThere are multiple ways to get image-map-creator:
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.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
--recurse-submodules
option or download this repository
and install git submodules :
git submodule init
git submodule update
make node_modules
make watch
demos/index.html
with you browserSee also the list of contributors who participated in this project.