Client-side Image Map Generator - jQuery image-maps

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.

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.


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

  • Publication date: 14.04.2019
  • Source