Responsive UK Map - HTML5



Responsive UK Map – HTML5

This map is built in HTML5 code and runs with javascript based on the new technique of Scalable Vector Graphics (SVG), So it can be scaled to any size without losing its quality. Features:
  • It doesn’t require special plugins to work such as Flash player, So it works on different platforms including iPad and iPhone.
  • Each region has its own parameters so you can change upcolor, hover color and click color of each region also you can enable/disable the region. You can also add HTML formatted data for each region i.e you can change the font color, size, style, underline….etc
  • You can add clickable links such as websites or emails.
  • The scroll bar appears only with long content, i.e It’s autohide with short text. So you can add information as much as you want.
  • Responsive; it can fit in its available space without the need to scroll horizontally while preserving its quality.
  • Compatible with all major browsers including Google Chrome, Firefox IE9+, Safari and Opera.
  • Easily integrated with WordPress using simple iFrame code.
  • Map Parameters:

  • borderColor: inter-region borders.
  • shadowColor: shadow color below the map.
  • shadowOpacity: shadow opacity, value, 0-100.
  • namesShadowColor: tooltip shadow color.
  • msgTitle: default title text (advanced version).
  • msgData: default content text (advanced version).
  • Per Region Parameters:

    This is what you can modify for each region:
  • name: region name.
  • data: HTML formatted data appears in the text box when a user clicks this region (advanced version).
  • url: Goto URL (simple version).
  • target: open link in new window:_blank, open in current window:_self (simple version).
  • upcolor: region’s normal color.
  • overcolor: region’s color when mouse hover.
  • downcolor: region’s color when mouse clicks.
  • enable: true/false to enable/disable this region.
  • Last Update:

  • 23 July 2013: Fix IE10 bug in text box (advanced version), update the documentation files and enhance the tooltip style and use better naming of the files.
  • Based on my old XML Interactive UK Map

    You might be interested in: