overlapmedia/imagemapper

Adds SVG drawing capability (rectangles, circles, ellipses and polygons) on top of your image to let you make image maps.

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

API Reference

Go to API documentation

imagemapper's Issues

Is it possible to add back a handle when drawing a polygon?

In the demo, as I'm editing an existing polygon, I can move and delete handles (vertices), but there doesn't seem to be a way to add handles. Is that possible?

off() event

Can you please give an example how to call the off() event? I need to call a function when someone deletes a shape and I've tried many different ways and none work.

Thanks,
Bryan

Warning from XState in browser console

Hello guys,

I'm getting this warning when instantiating the 'editor'

ImageMapperEditor.js:33 It is highly recommended to set predictableActionArguments to true when using createMachine. https://xstate.js.org/docs/guides/actions.html

Error when creating circle from JSON file

I'm creating interactive images in react.

Attempted to define a circle within the JSON file (tested and working with polygons):

{
  "id": "circle_1",
  "type": "circle",
  "data": [
    { "x": 60, "y": 60, "r": 60 }
  ]
}

I have also tried using the values { "cx": 60, "cy": 60, "r": 60 } and also replaced "r" with "width" and "height" attributes as I saw those referenced in the Circle definition.

No matter how I attempt to assign the values, when I reload the page and look at the console, I see the error messages:
Unexpected value undefined parsing cx attribute.
Unexpected value undefined parsing cy attribute.

What is the proper way to define a circle within the JSON file?

Import multiple polygons with different colors in the View mode

Hello again.

My use case for this library is to mark different land spaces in a map and each property has a status (sold, available, negotiation).
I need to import these polygons with different colors to show the status.

Please, how can I do that?

Any plans for Typescript support and examples?

Styles are applied on components during Editor.prototype.create<Shape> instead of Editor.prototype.setStyle

Unable to Zoom

Hi .. Is it possible to zoom image while using this Package.

dinamically update image

Hi,
I need to change image at runtime, I have a fileselector in my editor page, and I have to give the option to remove the image and upload another one. Is that possible?