• Home
  • About
  • Royalty Free Terms
  • How to customize
  • FAQs
  • Blog
  • Contact
  • 0 items

Maproom

Editable base maps · Vector art · Interactive mapping

  • UK and Ireland maps
    • British Isles maps
    • UK
    • England
    • Scotland
    • Wales
    • Ireland maps
    • Northern Ireland
  • City and Street Maps
    • London maps
    • Maps of New York & environs
    • Manchester Street Map
    • Brighton & Hove Street Map
  • Administrative maps
    • Postcode maps
    • Political maps
    • County maps
    • Map of EU countries
  • World Maps
    • World Maps
    • Europe maps
    • Map of EU countries 2018
    • Maps of France
    • Maps of Germany
    • Maps of New York and environs
  • Animated Web Maps

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,

<div id=”iframe-container” style=”position:relative;padding-bottom:100%; height:0;overflow:hidden;”><iframe src=”/pathtoyourmap.html/” frameborder=”0″ style=”position:absolute; top:0; left:0; width:100%; height:100%;”></iframe></div>

iframedemo

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

 

General Advice

  • How to customize
  • Editing colours
  • Dealing with text
  • Outputting for websites or apps
  • Outputting for print
  • How to use animated web maps

Illustrator Tutorials

  • Understanding the map layers
  • Special option layers
  • Advanced editing of strokes in Illustrator
  • Video – How to use the map layers in Illustrator
  • Video – how to change map colours in Illustrator

Customization service

If you don't have the time or inclination to customize your map, we may be able to help. Our rates are competitive and we will waive the price of the base map itself if you have already purchased one.

All content © Maproom at Thameside Media · Award winning media projects

  • About us
  • Pricing, delivery & refund policy
  • Privacy & cookies policy
MENU
  • Home
  • About our maps
  • Maps of Britain / British Isles
  • Maps of the UK
  • Maps of Ireland
  • Maps of London
  • Postcode maps
  • County maps
  • Maps of Europe
  • Animated web maps
  • Royalty Free Terms
  • How to customize
  • FAQs
  • Contact us
This site uses cookies: LEARN MORE