Kamis, 13 Juni 2013

Interactive World Map




Description

Interactive World Maps – Package

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.
  • Add unlimited number of interactive cities anywhere on the map using very simple well organized javascript file. (No javascript knowledge is required)
  • 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.
  • Easily integrated with WordPress using simple iFrame code.

Map Parameters:

  • landcolor: color of the land areas.
  • bordercolor: borders between countries.
  • shadowcolor: shadow color below the points.
  • shadowOpacity: shadow opacity, value, 0-100.
  • namesShadowColor: tooltip shadow color.

Per City Parameters:

This is what you can modify for each interactive point:
  • shape: choose the shape of the dot; circle or rectangle.
  • name: the name which appears in the tooltip when hover.
  • pos_X: location of the dot on X axis.(How?)
  • pos_Y: location of the dot on Y axis.(How?)
  • width: width of the rectangle.
  • height: height of the rectangle.
  • diameter: diameter of the circle.
  • outline: outline color of the point.
  • thickness: thickness of the line.
  • upcolor: color of the dot when map loads.
  • overcolor: color of the dot when mouse hover.
  • downcolor: color of the dot when clicked.
  • url: URL of this dot.
  • target: _blank or _self.
  • enable: true/false to enable/disable this dot.

Examples of the maps that you can create yourself:

How to get X, Y coordinates?

The purchased files include an easy to use interactive guide to help you to find the coordinate of any point of interest, kindly have a look at this video:See Also:


Category : Scripts, html5, charts-and-graphs | Rating: 5.0 out of 5.