Great plugin, easy to customize! I only wish there was a choice for ‘show tooltips always’, now it’s only ‘on click’ and ‘on mouseover’

Hi,

Can we add this map into squarespace.com platform’s website? Thanks.

Hello! Long time user here, glowing is a nice new feature (previously I hardcoded it myself to flash the spots and polygons even) but since the new version’s core files are so different compared to the ones I modified to cater my goals, I ask:

Would it be possible to basically “flash” the polygons when it is suppsoed to “glow”? (as the mouseover flash does it for a long time now) when you hover over it? So just connect the “mouseover” flashing to the rest of the “glow” related flashes and then everything pulsates properly and we don’t need to leave polygons out of the question. Moreover, the polygon flash can be set to the same color as the “glow” so it looks like it’s intended. Because you state that everything glows but polygons. This would make even polygons “glow”.

Could you make it in an update please? Also, it’d be nice to have a button to show/hide all the spots/polys, like a “reinitialization” with everything “appearing/falling to places” again, on a button click.

Hey this is a presale question :

I have seen the demo still curious before buying :

I can the render the map of any country right? I can read the file and update it on maps correct?

Please correct me if I am wrong?

Squarespace integration for Image Map Pro: I have previously posted here on how to use Image Map Pro with Squarespace. Here is an update on that using the current version (as of May 2019) with Squarespace; note that you’ll need access to Squarespace Code Injection. For details on how to use Image Map Pro editor follow the author’s guide.

1. Image Map Pro requires you to have your base image (map for example) on hosted Squarespace already. To do this, go to Design > Custom CSS. In case you have some CSS in this window, I suggest you setup a commented tag to hold your image path, otherwise it might get mixed up with your other CSS. Add something like this /* Image Map Pro source files… */. Leave the cursor input on the end of those trailing dots because you are about to paste an image image link in that exact spot. Below the CSS window, click Manage Custom Files. Upload your image, and once it’s uploaded, click once and the image path will be placed into your CSS (hopefully where you last left your cursor in that CSS window. If you even need to go back and grab the image path, it’s there in that handy commented tag. Now copy that image path and past it into Image Map Pro editor (as per the author’s user guide).

2. Icons in Image Map Pro use Font Awesome fonts. You need to upload these fonts to Custom CSS exactly the same way you just add that base image (above). Do this for each font, except the SVG version (you can’t add SVG’s this way; see step 4 below on how to do this using a page link).

3. Now that you have your fonts in Squarespace, you need to edit a copy of font-awesome.min.css to include the correct path for each font. Use any HTML or text editor to do this. I recommend you make a copy and rename it ‘font-awesomemin.css’ (so it has just one dot as Squarespace will do this anyway). You will edit the top of this CSS where it lists the @font-face for’FontAwesome’. Replace each path with the url path you created in Custom CSS (step 2). The last url path is for the SVG. In the next step, step 4, you will upload the SVG font, and that path will be shorter than the others; simply this: /s/fontawesome-webfont.svg

4. Image Map Pro has four files you need to include in Squarespace. The files are image-map-pro.min.js, image-map-pro.min.css, fontawesome-webfont.svg, and ‘font-awesomemin.css’ (edited copy and renamed). You cannot upload these files using the Custom CSS Manage Custom Files. Instead, create a blank Squarespace page and add four text ‘Image Map Pro JS’, ‘Image Map Pro CSS’, ‘Font Awesome SVG’ and ‘Font Awesome CSS’ (just so you know what each one is). Select the text and make each one a link, choosing to add/upload the file. When you upload your image-map-pro.min.js. Squarespace will amend the name to image-map-promin.js (you can only have one dot). Repeat this for each file. Copy each link from the page and paste them into some text document or even the same Squarespace page for easy access in the next steps.

5. Once you have built your map in the Image Map Pro editor, copy and add the code you generate in Image Map Pro to the footer of Squarespace Code Injection. Code Injection in Squarespace is found under Settings > Advanced > Code Injection. Add the JS script exactly as show in Image Map Pro with the script tags. Ignore the HTML tags (they are not required). The code generated in Image Map Pro also has the CSS and JS file path links. Copy those and paste them into the header of Squarespace Code Injection (we will change the actual path for the CSS and JS in the next step).

6. In the header of Squarespace Code Injection, add the CSS file paths you just made on that Squarespace page replacing the defaults you copied from the Image Map Pro editor. They’ll now probably look like this: <link href=”../s/font-awesomemin.css” rel=”stylesheet” type=”text/css”> <link href=”../s/image-map-promin.css” rel=”stylesheet” type=”text/css”> Note that you can just use this shorter path with the two dots (pointing to the root). The important part is the folder or directory name ’s’ and your file name. One extra thing: Add JQuery to your header too. It can go under your CSS links. You can get the latest JQuery from https://developers.google.com/speed/libraries/#jquery (select the latest version with its script tags).

7. In the footer of Squarespace Code Injection, add the JS file path you just made on that Squarespace page. Place it inside script tags of its own above the Image Map Pro js code. It’ll look something like this (with script tags around it): src=”../s/image-map-promin.js”

8. If your Squarespace template design uses Ajax Loading (under Design > Site Styles), turn it off. Ajax loading will prevent the JS script file running more than once (you would need to refresh the page to run it again).

9. Last step, add to your Squarespace page using the Squarespace Code Block. In edit mode you’ll need to refresh the page to see your new map display. Otherwise it should run as expected in preview.

Hi, few pre-sales Questions 1. I’m interested but saving local HTML storage is quite useless for me. If this could just send or load JSON from a remote source via URL it would be great.. I can code the php scripts and mysql etc.. i just need this product to connect w/ my PHP API. can it easily be done? will you tweak it a bit for me?

2. Is there a sort of share link i can give my users where they can view the document created but not edit them? in your demo there are only 2 states , the EDIT and PREvIEW both of which are contained within the IDE , not really for public view.

can this be used for multiple projects, I have a few projects this might work. and do you have a freelancer we can hire to do the mapping for us?

Hello,

How are you today. Please I will like to know or be sure of the following (do kindly answer each one):

1. So I can convert my jpeg map so that my exhibitors can click on the various stands/floor sections in the map.

2. When these exhibitors click on any of the stands in the map, a pop up similar to that here http://dev.niamul.me/peter/ will appear. This pop up will show the amount of the stand along with a button for payment/registration. Is this possible?

3. Is it possible for an exhibitor to click on multiple stands (two or more stands) and then the sum total of these multiple stands will appear in a single pop up with a payment/registration button?

4. When the exhibitor clicks on the payment button, I hope that he will be sent to the buttons URL.

Thanks and looking forward to your clarification.

Hi, Please help, when I clicked the Choose Image button nothing happens.

Nevermind, I found out that you need to paste the url directly.

Maybe you can fix that . Thx!

In the Firefox there are some bugs with the input fields. These are sometimes too long and go over the text (right side of the menu). Can you fix that?

are there any known solution to fix the cursor: pointer issue regarding imp-shape. It does work (cursor is able to visible when hover a element which has follow link type of action) on the editor but when I implement to a theme (based on bootstrap 4.2) the cursor is unable to load. I tried all possible ways. But unable to fix it.

Could I please request if you could add a birds eye feature so the user is able to zoom into the image.

Hi, I have issue on displaying the image map on mobile view. Check out the screenshot, https://content.screencast.com/users/cv2k10/folders/Jing/media/3b7d71b0-45bc-4e6a-b488-5180bf568adf/mobile-view-issue.png

The icon size is not responsive and its size show on mobile view is too large, how do counter this issue?

hi, i found something strange, after i download the demo folder through the FTP and upload to another folder, the files demo files don’t work anymore. demo-plugin.html show blank.

Hi, I’ve bought your prduct for few weeks and it works normally very well. One problem, what I now have, is that there s no ”-” tool for an anchor point. One I have start with it,I must close the form and undo for anchor point gives not. I have create a nice map and at least made one mistake and did not save my work one hour. I am affraid, that when I save it again, I cannnot use this map. I hope of your quick response.

Hi,

We are using your API for importing image maps by script https://monosnap.com/file/0QPjdFPnYzZOIvPmTRmw4zGa6LOsFa . But we have a problem with importing some Image Map items. Can you advise how we can do this in proper way?

Thanks!

Hello!

Is there a way to reinitialize somehow the editor after it’s opening in a modal window? Everything comes up nice, everything is clickable BUT I can’t move the spots or cant place new ones, it’s like the “clicks” are not registering if in bs3 modals…

I wonder why the “page load” animation does not trigger on overlays. I set z indexes properly but the spots just “appear” and not fade/grow as they should, has anyone ran into this?

Also, too bad the “cascading blinks” as the demo page has is not something that can be set after initialization. Like All the shapes/hotspots flash once or twice after initialization.

I wanted this thing to work so bad. Unfortunately, the code it outputs for you to plug and play doesn’t match the file directories/file names, so you end up with a white page. I think you guys should fix this.