I’ve been working on a javascript library to create interactive image maps on/off for a while now.

The demo can be found here: https://derbdale.github.io/Image-Interact-Demo/

Some basic instructions on using the demo can be found below:

  • Left-click to insert a point. Insert multiple points to define the outline of an area.

  • Right-click to remove a point.

  • Middle-click to toggle Panning mode.

  • Use the mouse wheel to zoom in/out on a point.

  • Left-click near an existing line on your polygon to add a point at that position (a “ghost” will show when you’re close to the line)

  • Click and drag in the middle of the polygon to move it around.

It’s still quite an early prototype, and the idea is to provide a library for creating polygons, points, etc. and leave the UI down to the developer. I will also be developing a default UI in the future too.

My next step is to provide a function which exports the info from the editor for use in the frontend.

Here is an example of how the frontend interactive map may look:

Post image

Source link

Write A Comment