How to use animated web maps

Maproom interactive web maps can be implemented by someone with a basic understanding of HTML.

Viewing and testing the map

To quickly view and test the map, open the HTML file in Firefox.

To test the map in Chrome, Safari, IE and other browsers, upload the files to a remote or local server first. (These browsers will not apply the tooltip action until the files are on a server.)

Editing the captions

To edit the tooltip captions for each area, open the HTML file in a text editor. Locate the default tooltip captions under “MR-tooltip-container” and replace them with your own captions.

Changing the colours

To change the map colour, open the CSS file in a text editor. Locate the “default map colour” hexadecimal colour code and replace it with any other hexadecimal colour code.

To change the hover colour, locate the “default hover colour” and replace the hexadecimal colour code.

If you have more advanced CSS skills, you can change the colour of individual areas by targeting the path id, e.g. path#E1 { fill: #ff0000; }

To change the caption colours, change the hexadecimal colour codes for “tooltip heading” and “tooltip content”.

Adding the map to your website

Method 1: Standalone page

The easiest way to include this map on your website is simply to upload the files to your website directory and put in a link to the HTML page. You can add your logo and a backlink to the rest of your website if wanted.

Method 2: Integrating with other content

To embed the map within an existing page of your website, copy the stylesheet and script links, and all the body content of the HTML file into your existing web page.

Method 3: Using an iframe

You can also use an iframe to integrate the map with other content on your website. Upload the files to your website directory, then add an iframe within the content where you want your map to appear. For example,

iframedemo

Using an iframe is an easy method if you are using a content management system like WordPress.