Landing Page Details





Image Map Pro – WordPress Plugin

Version 4 – What’s New?

  • FontAwesome Icon Library (4.2)
  • Connected Shapes (4.1)
  • Run Script on Shape Click (4.1)
  • Automatic Updates & Activation
  • Zooming in the Editor
  • Custom Shape Titles
  • Fullscreen Capability
  • HTML-based API
  • Improved Performance

Top Features

  • Custom Polygon Shapes
  • Over 600 High Quality FontAwesome Icons
  • Super Advanced Backend Editor
  • Content Builder for Tooltips
  • Fully Responsive
  • JavaScript & HTML API
  • Click/Mouseover Actions
  • Custom Styles for Shapes
  • Image Map Import/Export
  • Undo/Redo Functionality
  • Zooming in the Editor
  • Fullscreen Capability
  • Rename & Reorder Shapes
  • Copy/Paste & Duplicate Shapes
  • Automatic Updates

1. Super Advanced Drag-and-drop Editor

Image Map Pro is so much more than just another image map plugin. Place locations, add text, yeah sure – that’s true. But that’s where the ordinary stops. Image Map Pro comes with its own feature rich web app, so you can quickly and easily create the most comprehensive selection of custom image maps, pins and custom shapes, and immediately export them to your website.

The User Interface is instantly-familiar-Drag & Drop with self explanatory steps, icons and shape tools at your disposal - it couldn’t be any easier. Just to be sure though, we’ve also included a super sharp step-by-step video guide in case you need your hand held lovingly, along the way. Check it out now by trying out the Editor live!

Try the Editor!

2. Add Anything to the Tooltips with a Content Builder

Image Map Pro comes with Squares – our bespoke content builder that lets you add rich content to the tooltips of your image map. Add Video, YouTube content, Images or Buttons and of course Text with styles to boot. You can even arrange your content in a 12 column Bootstrap style grid. Go nuts, you’re welcome.

3. Draw Your Own Custom Shapes

Image Map Pro is the only plugin that allows you to draw custom polygon shapes. You can even zoom in for maximum precision! Of course you can still draw the good old-fasioned circles and rectangles, but that is so 2007…

Try the Editor!

4. Over 600 High Quality FontAwesome Icons

In the Editor you will find a library of over 600 high quality FontAwesome SVG icons included for FREE. You can change their size and color and they will scale perfectly. Need to use your own icon? You can do that too!

5. Endless Combinations of Styles and Animations

With the Editor you can customize properties like opacity, fill, stroke and corner radius to match the design of your site. You can also have separate styles on mouseover, or make the shapes completely invisible.

6. Looking for Even More Features?

Responsive

Image Map Pro will scale beautifully on every kind of device, and if you have tooltips that need to display a lot of information you can even make them full screen with the flick of a button.

JavaScript and HTML API

Run JavaScript when a user clicks a shape or trigger a tooltip to appear by adding an HTML attribute to any element on your page.

Custom Actions

Tooltips can be made to appear on mouseover or click – purpose driven to suit your. Of course that might mean turning them off altogether, also an option with IMP. Or you can make them links. It’s up to you!

Free Customer Support for 6 Months

We are here to help! If you have any issues installing or using our product, please send us a ticket and we will respond as soon as possible!

Submit Ticket

Change Log

4.4.5 - Jul 14, 2018
    - Fixed a bug related to multiple tooltips containing YouTube video elements
4.4.4 - Jul 6, 2018:
    - Minor bug fixes
4.4.3 - Jul 5, 2018:
    - Fixed a bug that caused layers not to load their own image
    - Fixed a bug that prevented layers from functioning properly when a layer has been deleted
    - Fixed a bug with mouseover styles on fontawesome icons
    - Floor select menu is now working as intended in Firefox
    - Videos will now stop playing when tooltip is closed
    - Other minor bug fixes
4.4.2 - May 9, 2018
    - Fixed several bugs when switching floors
    - All floor images are now being preloaded on page load
    - Added JavaScript API for switching floors
    - Added HTML API for switching floors
    - Added the new API functions to the documentation
4.4.1 - April 12, 2018
    - Minor bug fix

4.4.0 - April 10, 2018
    - New feature - multiple floors.
    - Minor bug fixes.

4.3.1 - February 15, 2018
    - Fixed a bug that would sometimes prevent scrolling when the mouse cursor is over the image map.

4.3.0 - February 6, 2018
    - Added zooming functionality
    - You can now draw static text on the image
    - Import SVGs from Illustrator to Image Map Pro

4.2.0 - January 17, 2018
    - Replaced the icon library with FontAwesome!

4.1.4 - December 14, 2017
    - Improved support for shortcodes.
    - Fixed a bug that would prevent fullscreen tooltips from displaying properly in certain conditions.

4.1.3 - December 8, 2017
    - New line characters will no longer be replaced with "br" HTML tags in custom JS/CSS fields, printed shortcodes and "run script" field. As a consequence, if you want to have a linebreak in the tooltip contents, you will need to manually insert a "br" tag.

4.1.2 - December 7, 2017
    - When tooltips are not open, they are now completely hidden, instead of "visually" hidden.
    - New lines in the text field for shape's run script on-click action no longer get printed as "br" HTML elements.
    - Fixed an issue where a certain function from the API would return the shape's ID, instead of its title.

4.1.1 - October 14, 2017
    - Added options to disable specific tooltips, by selecting a shape and going to Shape -> Tooltip Settings -> Enable Tooltip.
    - Added options to disable all tooltips, by going to Image Map -> Tooltip -> Enable Tooltips.

4.1.0 - September 18, 2017
    New Features

    - Connected Shapes. To connect shapes together, select a shape and open its General settings tab. From the "Connected To Shape" menu select another shape to serve as the "master" shape. Connect as many shapes as you wish to the "master" shape. Additionally, you can choose to use only the master's tooltip, or keep the original tooltip for each "slave" shape.
    - Multiple shape highlighting. More than one shape can be highlighted at the same time, using the plugin's API. Note that when a shape is highlighted with the API, it must also be unhighlighted using the API. An exception to this rule is when you highlight shapes using the HTML API.
    - Multiple tooltips can now be opened with the plugin's API. Note that when a tooltip is opened with the API, it must also be closed using the API. An exception to this rule is when you highlight shapes using the HTML API.
    - Added a "Run Script" click action.
    - Optimized front-end code.

    Bug Fixes and Minor Improvements

    - Fixed a crash that could occur when importing a map from the WP version of the plugin.
    - The Border Radius form control no longer shows for Ellipse shapes.
    - Removed the Late Initialization feature, since it has been obsolete since version 4.0.
    - Removed the "Mouseover" action trigger from the Actions settings tab.
    - Added an option in Image Map Settings -> Tooltips called "Show Tooltips On" to specify whether to show tooltips on mouseover or click.
    - Greatly improved the usability of non-sticky tooltips when they are attached to polygons, and there are other polygons next to it. The tooltips are smarter and should show and hide more intuitively. There is a new setting, called "buffer", which determines the size of the buffer space preventing the tooltip from hiding. This setting can be edited from image-map-pro-defaults.js (search for "buffer").

    API Changes

    - $.imageMapProHideTooltip now requires a parameter - shape title.
    - $.imageMapProUnhighlightShape now requires a parameter - shape title.
    - $.imageMapProEventClosedTooltip now returns an additional parameter - shape title.
    - JavaScript API - All shapes that have been highlighted using the JS API, must also be unhighlighted with the JS API.
    - JavaScript API - All tooltips that have been opened using the JS API, must also be closed with the JS API.
    - HTML API - Shapes highlighted with the on-mouseover HTML API, automatically become unhighlighted when you mouse out of the element.
    - HTML API - Tooltips opened with the on-mouseover HTML API, automatically close when you mouse out of the element.
    - HTML API - Shapes highlighted with the on-click HTML API, can become unhighlighted only if you click on another HTML element, using the on-click attribute to unhighlight a shape.
    - HTML API - Tooltips opened with the on-click HTML API, can close only if you click on another HTML element, using the on-click attribute to close a tooltip.

4.0.9 - August 1, 2017
    - Minor bug fixes related to the custom JS/CSS input fields.

4.0.8 - July 24, 2017
    - Added input fields in the editor for custom CSS and JS code.

4.0.7 - June 16, 2017
    - Fixed a bug in the API that would cause incorrect data to be sent.
    - Custom shape icons will now properly display with their custom size, instead of the default 44x44 pixels.

4.0.6 - June 14, 2017
    - Fixed a bug in the editor that would sometimes cause the editor to not work in Safari or Firefox.

4.0.5 - June 12, 2017
    - Fixed a bug related to shortcodes and HTML code in the tooltips.

4.0.4 - June 9, 2017
    - Made changes to the folder structure to allow easier debugging from the WP Dashboard.

4.0.3 - May 28, 2017
    - The image map will now properly go in fullscreen mode from the Preview mode in the Editor.
    - Fixed a bug related to activation.

4.0.2 - May 26, 2017
    - Minor bug fixes.

4.0.1 - May 25, 2017
    - Added an option to center the image map on the page.
    - When the image map is in "responsive" mode, it will no longer use the width and height previously set from the editor.
    - Fixed a bug with the "start in fullscreen" feature.
    - Added tooltips to display keyboard shortcuts for zooming.
    - Fixed a bug that could cause the wrong image to be displayed after updating.

4.0.0 - May 22, 2017
    New Features

    - Automatic Updates & Activation
    - Editor Zooming
    - While drawing a rect or oval, hold SHIFT to lock width/height
    - Rename list items
    - Fullscreen capability (front-end)
    - Default settings for shapes and tooltips (via external .js file)
    - HTML-based API
    - Added an option to retain original image size, along with responsiveness
    - The plugin now uses PHP sessions to load only included image maps on a page
    - Improved documentation

    Bug Fixes

    - Tour doesn't show anymore if there is an already created image map
    - (Improvement) Added notification to click the first point when drawing a polygon
    - Full support for shortcodes in tooltip content
    - Full support for HTML code in tooltip content
    - Special characters in the name of an image map no longer prevent the list of saved maps from loading
    - Fixed minor issues on mobile devices
    - Improved the accuracy of the "ghost" point when editing a shape
    - The editor no longer uses random numbers for shape IDs
    - Spots now have a minimum size of 44x44 pixels
    - If a fullscreen tooltip is open, the website behind it can no longer be scrolled
    - Various minor fixes
  • trexya

    2017-10-05 20:08:42
    Purchased Reply

    With new Image Map I can't disable tooltips. I can only show it on click or on hover. Thanks

  • yanchev

    2017-10-05 23:20:34
    Purchased Reply

    In the released the latest version of the plugin (Version 4.1.0) there are some fundamental changes in the plugin and the functionality to "disable a tooltip" was accidentally missed because in the earlier version it was available. Until the end of the current week, there will be a new version of Image Map Pro. In that version, you will be able to choose whether the Tooltips to appear or not appear. We apologize for the inconvenience!

  • trexya

    2017-10-06 21:52:11
    Purchased Reply

    thank you

  • flyhead

    2017-10-09 21:25:26
    Purchased Reply

    Hello, very nice plugin! Before I am certain this is what I am looking for, I'd very much like to know if it is possible when mouseover different hotspots, the background image can change to a different picture, while the image map does not have to change.

  • yanchev

    2017-10-10 07:27:59
    Purchased Reply

    Hello, Yes, you could implement this action with the help of the API of the plugin. You can see how to do this from the documentation of the plugin - more specifically the example "A Simple Example 1 (JavaScript)" - https://webcraftplugins.com/image-map-pro/uploads/documentation/index.html

  • flyhead

    2017-10-10 12:07:52
    Purchased Reply

    That seems fun. Thank you. So I suppose if I have 5 different shapes in the image map, I shall have 5 times this code: if (shapeName == 'my-shape-1') { // This piece of code will execute only when my-shape-1 has been highlighted. // For the purposes of this example, we replace our image with a new one. $('#image-map-pro-1718').attr('src', 'img/image-2.jpg'); } // When the mouse moves away from the shape, revert back to the original image $.imageMapProEventUnhighlightedShape = function(imageMapName, shapeName) { // Check which shape has been unhighlighted if (shapeName == 'my-shape-1') { // Revert back to the original image $('#image-map-pro-1718').attr('src', 'img/image.jpg'); } } within your "boilerplate snippet", and with the respective changes in my-shape-1 and the hover image source. Or could I run each piece of code by pasting it under the "run script" admin window for each specific shape? Does that make any difference in page loading speed?

  • yanchev

    2017-10-12 08:48:44
    Purchased Reply

    It doesn't matter whether you will insert this Custom JS code by "Run Script" or "Image Map Settings" -> "Custom Code" -> the field "Custom JS". This doesn't affect the loading speed of the page.

  • flyhead

    2017-10-12 17:24:50
    Purchased Reply

    Thanks for the answer. I shall place the order now.

  • flyhead

    2017-10-12 21:03:02
    Purchased Reply

    It is not working. the variables are:

    • image-map-pro-1718 — this I replaced with the slug of my image map
    • my-shape-1 — this I replaced with the name of the shape in my image map
    • img/image-2.jpg — this I replaced with the url of the background image to appear when the shape is highlighted
    • img/image.jpg — this I replaced with the url of the original background image
    So the whole piece of snippet was pasted in “Image Map Settings” -> “Custom Code” -> “Custom JS” Did not work. Did I miss something?

  • yanchev

    2017-10-13 07:08:41
    Purchased Reply

    Hello, Could you please, submit a ticket with the help of our support system so that I can assist you: https://webcraftplugins.com/support/ In the content of the ticket, please add the Custom JS code and give me a link to your site, where you have posted your image-map.

  • carlos-palma

    2017-10-20 03:26:02
    Purchased Reply

    Hello! this plugin looks awesome, but before buying it I would like to know if it is possible to open links in lightbox mode, for example: to click on a link and open a youtube video. Thanks in advance!

  • yanchev

    2017-10-22 00:22:18
    Purchased Reply

    Hello, Yes, it is possible. You can add youtube videos in the content of the Tooltips. After clicking on some shape in the image-map will be visualized the corresponding Tooltip's content with a youtube video, if it added earlier.

  • Wisioor

    2017-09-16 05:50:02
    Purchased Reply

    Hello! I need a plug in arch plans. Is it possible to place a building plan and when to click on a new floor plan without loading the page? I do not know how to explain it...

  • yanchev

    2017-09-17 00:55:52
    Purchased Reply

    Hello! As far as I understand you want, when someone click over some floor of a plan of some building, to be visualized the specific plan of the floor. Did you mean that? If I haven't understood you, could you please, explain me in more details your idea?

  • idylliq

    2017-05-28 00:22:56
    Purchased Reply

    Hi! Quick question: on your example page (https://webcraftplugins.com/image-map-pro-wordpress-plugin/) on load of the page, there is an animation of all the image hotspots (to show where they are). How did you achieve that?

  • nickys

    2017-05-28 03:36:08
    Purchased Reply

    Hi, This was achieved using the plugin's JavaScript API, which is documented and with examples.

  • ledovskij

    2013-05-25 02:52:04
    Purchased Reply

    What if site and image is responsive? This plug-in will work well?

  • Xandru88

    2012-08-19 04:17:50
    Purchased Reply

    Hi there, You managed to create a gorgeous plugin. Congratulations! I did not have enough time to play with the plugin, but I have only one question. What is the limit of hotspots on a single image?

  • nickys

    2012-08-20 04:23:24
    Purchased Reply

    There is no limit for the number of spots :)

  • GamePay

    2012-08-19 03:15:27
    Purchased Reply

    Hi Nickys I see TEEKID mentioned "will this work with sliders" now i have a block of post images which are set as slideshow what could i do to get this HotSpot Map to work with each image because at the moment it can only get it to work with 1. Do you have anytime or do you even do a custom fix i will pay per hour up to $20-30 per hour if you can fix this. I have a guy on Elance but he only good for little website fixes etc. Speak soon Mark.

  • nickys

    2012-08-19 03:23:33
    Purchased Reply

    Please send me an email with the full description of what you need done, because I'm not sure I understand what you are looking for. You can also include some links or screenshots. Cheers

  • GamePay

    2012-08-19 22:20:26
    Purchased Reply

    Hi Nickys I have sent over details to your email ....the email addy that was in the doc file of the purchased hot spot plugin. Speak soon Mark

  • echo1

    2012-09-04 00:23:46
    Purchased Reply

    Work as expected...easy instal and easy to use. 5*****

  • AdamKnade

    2012-08-31 16:03:51
    Purchased Reply

    Not sure if I undestood robgam1234's comment. Can this be responsive or was he saying you were responsive? If it can be, this is exactly what I need...

  • nickys

    2012-09-01 00:44:27
    Purchased Reply

    It's not responsive here, I just modified it for him. I will consider to do an update, maybe ask him first.

  • introcrea

    2013-11-08 08:02:56
    Purchased Reply

    this product does not work I am in wordpres version 3.6 and the short code used please fix this or return the money thanks :(

  • introcrea

    2013-11-08 08:10:21
    Purchased Reply

    It was a problem was solved by updating thanks for creating this product :)

  • sasanomad

    2014-06-30 06:41:31
    Purchased Reply

    Have you already (or planning to) abandon support for this plugin - as you did with some others?

  • sam_trademe38

    2014-04-18 01:50:07
    Purchased Reply

    Hi there, Can you adjust the colour and the size of the clickable point? Thanks :-)

  • vyruz85

    2014-05-12 21:13:33
    Purchased Reply

    Hi guys, this plugin looks good but I have a question before buy it. Are there more areas shapes besides circle and rectangle, for example polygon...? I need it for some regions on the map. Tanks in advance !

  • nickys

    2014-06-09 19:02:23
    Purchased Reply

    No, there aren't any other shapes unfortunately.

  • Bestigorek

    2016-11-19 00:48:14
    Purchased Reply

    Hi there, Can WooCommerce products be showed with a Buy button, when we hover a selected area? Do you have live demos? We will show to clients. Regards, Igor

  • nickys

    2016-11-22 20:17:26
    Purchased Reply

    Hi, If you are asking to insert a shortcode in a tooltip to display a woocommerce product, then yes - it is possible. I don't have a demo for that unfortunately. Regards

  • hollywoodmu

    2016-01-18 15:04:29
    Purchased Reply

    Hi Nickys, I am currently using your plugin and am having a really hard time selecting the right areas of my image map. Is there a way to zoom in using edit mode? Right now the image only scales if I change the size of the borrower, but it's still not big enough. Also, is there a way to rename the shapes so the map list is easier to navigate? A video tutorial in the future would be amazing. (Just food for thought.) Thanks!

  • nickys

    2016-01-18 23:37:16
    Purchased Reply

    Hi, Unfortunately zooming is not possible, but renaming the shapes is something that I will implement in the future. Cheers

  • eemmzz

    2016-02-17 21:46:20
    Purchased Reply

    Do you have a documentatiuon how to use Image Map Pro for WordPress?

  • eemmzz

    2016-02-17 22:09:50
    Purchased Reply

    e.g. how to add an annotated image into my site?

  • nickys

    2016-02-18 04:08:17
    Purchased Reply

    Hi, You insert the map in a page by setting a shortcode from the editor and then using that shortcode. It's explained in the documentation. If you are still having issues, please send us a support ticket. Thanks!

  • eemmzz

    2016-02-18 04:27:40
    Purchased Reply

    Where do I find the documentation?

  • eemmzz

    2016-02-18 08:14:55
    Purchased Reply

    foind it

  • eemmzz

    2016-02-18 08:16:37
    Purchased Reply

    .. but it doesnt help! After I created a short code where and how can I insert it? Please make an example! Thanks

  • kjcheon

    2016-01-08 02:05:49
    Purchased Reply

    Is this plug-in only working in W.P? Not in a normal webpage?

  • meanrabbit

    2016-06-21 02:07:50
    Purchased Reply

    The new version of the plugin is not working for me, just see shortcodes on the pages, no image maps. I reinstalled the copy I had and it works again. I have issue where I can't see all the image maps in editor since there are too many and the list does not scroll. Can I get the previous update version please? Thanks

  • nickys

    2016-06-21 02:13:14
    Purchased Reply

    Hi, Please send a support ticket and I will help you migrate your old image maps to the new version. Please include wp-admin and FTP details so I can see what's going wrong when updating. Cheers

  • meanrabbit

    2016-06-21 03:06:34
    Purchased Reply

    Thanks, will do now.

  • meanrabbit

    2016-06-21 03:24:58
    Purchased Reply

    Created support ticket

  • mohammed_burhani

    2016-04-24 17:50:39
    Purchased Reply

    Hi, Quick presales question. I am trying to create a 'project footprint' map for a solar energy company. They want to showcase their global projects via a map. Can you please let me know if the below requirements can be met by your plugin? 1) The map would have small pins that upon mouseover/click would slide out the project details (plz see http://www.solarreserve.com/en/global-projects) 2) They want an infographic summary image with mouseover pins similar to http://www.solarreserve.com/en (plz see colorful circle with title 'INNOVATION IN ACTION') Plz advise since i need to purchase right away if my reqmts are met successfully. Thanks

  • nickys

    2016-04-26 01:07:08
    Purchased Reply

    Hello, Answers: 1) You can have any content appear in the tooltips, they support HTML code. However if you want to do something else, like change something on the page when the user clicks a shape, you will have to add an event listener for that in some JS file. 2) Yes, you can do that, and even better. No need for pins, you can have shapes that match exactly the pie chart. Cheers

  • mohammed_burhani

    2016-04-26 02:21:21
    Purchased Reply

    Thanks. I will try this out

  • mohammed_burhani

    2016-04-26 23:42:48
    Purchased Reply

    Hi, I purchased the plugin and have setup custom html in the tooltip content area. In the Tool tip Style setting, the width and height is set to 'auto', however, the tooltip is not responsive in mobile mode. Plz refer to screenshot at http://cl.ly/472v3643071P and advise. Thanks

  • mohammed_burhani

    2016-04-27 00:14:33
    Purchased Reply

    Also, is there a way to make the tooltip to appear upon click and not on mouseover? Plz revert.

  • mohammed_burhani

    2016-04-27 04:38:07
    Purchased Reply

    Hi again, i managed to find the setting for the tooltip to appear on click as opposed to mouseover. I am trying to upload a gif image pin as a marker icon, however, the gif does not animate on the final map and shows as a static image. The image i was trying to use is https://goo.gl/p41aIZ Plz advise since an animated pin would be more visible than a static one. Thanks

  • nickys

    2016-04-27 08:24:06
    Purchased Reply

    Hi, I really can't say why the gif won't animate. Have you tried with a different one? Anyway, please send us a support ticket with your wp-admin login details and we will get back to you as soon as we can. Thanks