Client-side Image Map Generator - jQuery image-maps

File Size: 250 KB
Views Total: 7442
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 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=""></script>

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

<img src="1.jpg" class="example">
  isEditMode: true

4. Set the shape styles.

  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.


  // 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.


  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');
const allShapes = $('.example').getAllShapes();
  $.each(allShapes, function (index, item) {
      if (item.href) {
      if (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(
          viewImage.width() / widthRatio,
          viewImage.height() / heightRatio
      viewEl.addShape(newCoords, item.url, item.type);

11. Rmove shapes from the image.



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.