Interactive World Map

None

Interactive World Map
© Copyright by Art101

Features:

  • None: None
  • Html5: HTML5
  • Yes: Yes
  • Ie9, ie10, ie11, firefox, safari, opera, chrome: IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
  • Javascript js, html, css: JavaScript JS, HTML, CSS

Interactive World Map – Clickable Continents / Pins

This map 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. and it works on desktops along with mobile devices.

Map Features

  • It doesn’t require special plugins to work such as Flash player, So it works on different platforms including iPad and iPhone.
  • Add unlimited number of interactive cities anywhere on the map using very simple well organized javascript file. (No javascript knowledge required)
  • NEW! Each of the 6 continents is now clickable and can be linked to any webpage.
  • Activate/Deactivate any continent, and here is a list of the 6 clickable continents.
  • Control each city individually (position, colors, URL…etc).
  • 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.
  • NEW! A step by step guide to include the map in a WordPress page.

Map Parameters:

  • mapShadow: color of the shadow below the map.
  • shadowOpacity: shadow opacity, value, 0-100.
  • hoverShadow: color of the shadow below the hover popup.

Continents Options:

Each continent has the following parameters:

  • hover: hover description (text and images).
  • url: link it to any webpage.
  • target: open link in the “same window”, “new window”, or “none” for do nothing.
    Using “none” can be very useful in case you have enough content in the hover popup and don’t want to link this continent to other pages.
  • upColor: normal color of this continent.
  • overColor: hover color.
  • downColor: click color.
  • outLine: color of the border surrounding the continent.
  • countryLines: color of the inner borders inside this continent.
  • lakesColor: color of lake (if any).
  • lakesOutline: outline color of the lakes.
  • enable: enable/disable this continent.

Push Pins Options:

Each pin has the following parameters:

  • shape: circle or rectangle.
  • hover: hover description (text and images).
  • pos_X: position of the pin on the X axis. (see video)
  • pos_Y: position of the pin on the Y axis. (see video)
  • width: width the pin is rectangle.
  • height: height is the pin is rectangle.
  • diameter: diameter if the pin is circle.
  • outline: outline color of the pin.
  • thickness: thickness of the outline.
  • upColor: normal color of the pin.
  • overColor: hover color.
  • downColor: down color.
  • url: link it to any webpage.
  • target: open link in the “same window”, “new window”, or “none” for do nothing.
    Using “none” can be very useful in case you have enough content in the hover popup and don’t want to link this continent to other pages.
  • enable: enable/disable this pin.

Using all those options you have unlimited possibilities to customize the map to fit in your website style.