Create image maps. View image maps. Interact with image maps by event listeners. Touch events are supported.

imagemapper provides both drawing and view mode interaction capabilities letting you enable features of your image map adapted to the context of the user.

• Instantiated as an editor it adds SVG drawing capability (rectangles, circles, ellipses and polygons) on top of your image to let you make image maps. Shapes could be frozen (freeze method) to disallow deleting, resizing and moving.
• Instantiated as a view you can't draw new shapes or change imported shapes, but all other features (eg. importing and event handlers) are still available.

Getting started

Using npm and Node.js

$ npm install @overlapmedia/imagemapper

// Use imagemapper.editor or editor
import imagemapper, { editor, view } from '@overlapmedia/imagemapper';

// Editor
const myEditor = imagemapper.editor('editor', {
  width: 800,
  height: 400,
  selectModeHandler: () => console.log('Editor is now in select mode'),
  componentDrawnHandler: (component, componentId) => {
    // Disabling changes on new components. If you are making a design collaboration tool you probably want
    // to do this on components returned by the import function (meaning all existing components you are importing)
    // and let all other components drawn by the user respond to changes.
    component.freeze();

    console.log(
      `Disabled selecting, deleting, resizing and moving on component with id ${componentId}`,
    );
  },
});
myEditor.loadImage('image.svg', 700, 350);
myEditor.on('mouseup', (e) => console.log('mouseup event', e));
myEditor.polygon(); // Let user draw polygons

// View
const myView = view('view', {
  width: 800,
  height: 400,
  viewClickHandler: (e, id) => console.log('User clicked on', id),
});
myView.loadImage('image.png', 700, 350);
myView.import(
  '{"idCounter":4,"components":[{"id":"rect_1","type":"rect","data":{"x":66,"y":36,"width":253,"height":148}},{"id":"polygon_2","type":"polygon","data":[{"x":376,"y":172},{"x":498,"y":291},{"x":625,"y":174},{"x":500,"y":57}]},{"id":"polygon_3","type":"polygon","data":[{"x":54,"y":249},{"x":234,"y":246},{"x":236,"y":225},{"x":415,"y":270},{"x":237,"y":313},{"x":235,"y":294},{"x":54,"y":292}]}]}',
);

From browser

<script src="https://cdn.jsdelivr.net/gh/overlapmedia/[email protected]/dist/imagemapper.umd.js"></script>
<script>
    const { editor, view } = imagemapper;
    const myEditor = editor('editor-id');
    myEditor.rect(); // Let user draw rectangles
</script>

With React

If you want to use imagemapper in a React app, these examples might get you started.

Demo

Try out the demo of imagemapper here.

Backlog

• feat: Support rotating shapes
• feat: Import data with SVG attrs format (ref. https://github.com/overlapmedia/imagemapper/issues/1)

API Reference

Go to API documentation