Tutorial

Interior Plans of a Building

Step 1 Create a new image map

To create a new image map, click New on the top-left of the editor, enter a name and click Create.

You can choose to have a responsive or fixed size of the image map. To change that, click Settings. From the menu on the left, choose General. The Responsive setting is automatically enabled. If you want to set a specific size, you should disable it and enter the desired width and height in pixels.

Keep in mind the real size of the image which you will set as a background in next step. If you set a different width/height ratio you can stretch the image and it will look bad. After setting an image in Step 2, you can always come back and click the Reset Size button.

Step 2 Set a background image

To set the background image click Settings, go to the Image section and click Choose Image to launch the WP Media Library.

If you are using the Standalone version, you have to paste the URL of the image.

Step 3 Draw shapes

Choose the Rectangle tool from the toolbar on the left and draw a rect for each floor of the building.

When you are done drawing shapes, choose the Select tool to avoid accidentally creating new shapes.

Additionally, you can rename each shape by clicking Rename.

Step 4 Shape styles

You can customize the styles of a shape both for its default state and mouseover state.

When you select a shape you can see its settings on the right side of the Editor. Look for the Default Style and Mouseover Style tabs.

In this tutorial we used the following settings (see below). You don’t have to copy them exactly, feel free to experiment!

  • Background Color: #0458CF
  • Background Opacity: 0
  • Border Width: 4
  • Border Style: Dashed
  • Border Color: #0458CF
  • Border Opacity: 0

For the mouseover styles we want to use the exact same settings, but with a few modifications.

Open the Mouseover Style, click Copy from Default Styles and change the Background Opacity to 0.3 and Border Opacity to 1.

Step 5 Second image map for the floors

We are done with the building and now it’s time to create a new image map, which will contain all eight floors.

Create a new image map and from the Floors settings tab, click Enable Floors. By default, the first floor is named “Main Floor”.

To rename the floor and set a background image, first select it and then click Edit. In the window that opens you can change the name of the floor and set its image.

To add another floor, press the + button on the left and a similar window will open.

To switch to the new floor (to add shapes to it for example) use the menu that has appeared just above the image map.

In this tutorial we will go over the steps to create just one of the floors of the building, and then the process is the same for the rest of the floors.

Step 6 Draw a shape for each room

The best tool to use for the job is the Polygon. Select it and draw a path around each room.

Tip: To finish drawing a path, simply press Enter or click the first point of the path.

Step 7 Shape styles

We are going to style the polygons that we made, similarly to how we did it in step 4. We used these settings:

Default Style:

  • Background Opacity: 0

Mouseover Style:

  • Background Opacity: 0.2
  • Background Color: #0158CF
  • Stroke Opacity: 1
  • Stroke Width: 4

When you style one of the polygons, you can copy/paste styles to the rest of the polygons to make things quick. Use the Copy Style and Paste Style buttons as shown on the image.

It will be best to do this after step 8. That way you will be copying the styles of the tooltips as well!

Step 8 Tooltip styles

You can customize the tooltips by changing background color, opacity, border radius, you can set fixed width or even place the tooltip exactly where you want it.

Select a shape, click the Tooltip Style button and change the Background Color to #0158CF and the Padding to 5.

If the Tooltip Style button is not easily accessible, you can click Edit Style from the Tooltip tab on the right.

Step 9 Tooltip content

To edit the content of the tooltip, click the Tooltip Content button above it.

When the new window opens, click the text in the tooltip to select it and the Settings tab will open automatically.

Since the default element in a tooltip is the Heading element, in the Heading tab you can edit the text.

Feel free to explore the different options for layout and style.

Step 10 Connect rooms with similar purpose

In Image Map Pro™ you can have shapes that are connected to each other. For example, when we mouseover over one of the bathrooms, we want the other one to be highlighted as well.

To make this work, select one of the bathrooms and from the Parent menu in the General tab, select the other bathroom. Also enable Use Parent’s Tooltip.

Step 11 Add a menu

With a few clicks you can add a menu to your image map. Open the General settings and the Shapes Menu tab. Enable the menu from there and also click Group by Floor and select Right for the Menu Position.

Step 12 Connecting both image maps

Our end goal is to click one of the floors on the first image map and show the corresponding floor on the second image map. This is where the JavaScript API comes in! Please keep in mind, this is a tutorial on Image Map Pro™, not on JavaScript. If you don’t understand any of the code below that is okay, you can still do lots of things with the Editor!

Here is the code:

(function($, window, document, undefined) {
    $(document).ready(function() {

        // Called when the user clicks on a shape
        $.imageMapProEventClickedShape = function(imageMapName, shapeName) {

            // First, check which image map and which shape triggered the event
            // We want to listen for events only from the image map “Building”
            if (imageMapName == 'Building' && shapeName == 'Floor 1') {

                // Switch to the corresponding floor on the second image map
                $.imageMapProGoToFloor('Floors', 'Floor 1');
            }

            // Repeat for each floor
            // …
        });
    });
})(jQuery, window, document);

Here are the two API functions that we use:

$.imageMapProEventClickedShape - Called when the user triggers clicks on (or taps) a shape.

$.imageMapProGoToFloor - When called, the specified image map will switch on the specified floor.

Check out the full documentation of the JavaScript and the HTML APIs.

Step 13 Include the code

To make the code work, we need to add it to your image map (duh). This process is different in the WordPress version and the Standalone version of the plugin.

WordPress - Open the Settings, go to the Custom Code tab and paste the code there.

Standalone - Paste the code in a <script> tag or in a separate .js file.

Step 14 Publish your image map

The final step left is to publish the image map on your site. Again, this process is different on WordPress and in the Standalone versions of the plugin.

For detailed instructions, please check out the Publishing Your Image Map section of the documentation.