Client-side Image Map Generator - jQuery image-maps

A small and mobile-friendly image map generator that allows the user to add custom text, shapes, markers with links to an image using jQuery, SVG and CSS/CSS3.

How to use it:

1. Download and import the image-maps library after jQuery.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"></script>
<script type="module" src="index.js"></script>
<!-- OR -->
<script defer="defer" src="dist/index.umd.js"></script>

2. Load the @babel/polyfill for browser compatibility (OPTIONAL).

<script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.3/polyfill.min.js"></script>

3. Call the function imageMaps on the target image and activate the edit mode.

<img src="1.jpg" class="example">

$('.example').imageMaps({
  isEditMode: true
});

4. Set the shape styles.

$('.example').setShapeStyle({
  fill: '#000',
  stroke: '#000',
  stroke-width: 2,
  // more styles here
})

5. Add shapes to the image.

• coords: coordinate
• linkUrl: URL
• shapeType: RECT, CIRCLE, ELLIPSE

$('.example').addShape(coords, linkUrl, shapeType);

6. Add text to the image.

$('.example').setTextShape('Text To Display', {
  // style options here
}).addShape([null, null, size], link, 'text');

7. Add images to the image.

$('.example').setImageShape(imageUrl, styleOptions).addShape(null, link, 'image');

8. All default plugin options.

$('.example').imageMaps({

  // edit mode
  isEditMode: false,

  // ect, circle, text, image, poly
  shape: SHAPE.RECT,

  // text
  shapeText: 'press on link',

  // shape styles
  shapeStyle: {
    fill: '#ffffff',
    'fill-opacity': 0.2,
    stroke: '#ffffff',
    'stroke-width': 3
  },
  
});

9. Callback functions.

$('.example').imageMaps({

  onClick: function onClick() {},
  onMouseDown: function onMouseDown() {},
  onMouseMove: function onMouseMove() {},
  onMouseUp: function onMouseUp() {},
  onSelect: function onSelect() {}
  
});

10. Output the result.

<img src="1.jpg" class="result">

const viewEl = $('.result');
viewEl.imageMaps();
const allShapes = $('.example').getAllShapes();
  viewEl.removeAllShapes();
  $.each(allShapes, function (index, item) {
      viewEl.setShapeStyle(item.style);
      if (item.href) {
          viewEl.setImageShape(item.href);
      }
      if (item.text) {
          viewEl.setTextShape(item.text);
      }

      const originalImg = $('._imageMaps_area').find('img');
      const viewImage = $('._imageMaps_area_view').find('img');
      const widthRatio = originalImg.width();
      const heightRatio = originalImg.height();
      const newCoords = viewEl.getCoordsByRatio(
          item.coords,
          item.type,
          viewImage.width() / widthRatio,
          viewImage.height() / heightRatio
      );
      viewEl.addShape(newCoords, item.url, item.type);
});

11. Rmove shapes from the image.

$('.example').removeShape();
$('.example').removeAllShapes();

Changelog:

v1.0.1 (2019-04-22)

• Rebuild/Linting

---

This awesome jQuery plugin is developed by naver. For more Advanced Usages, please check the demo page or visit the official website.