FLA-SHOP.com - Interactive Maps with Greater Impact!

HTML5 Multi-level Map of US 2.6.1

HTML5 Multi-level Map of US is HTML5-powered interactive map with two detail levels. The first level displays the map of the US with states, while a user can zoom in to the second level by clicking a certain state. This is particularly useful for any online or offline business having reps, offices, distributors or official partners in certain counties. The map can display local contact info and provide customized landing pages for every states or county on the map.

The map is powered by the jQuery JavaScript library providing the work in the following browsers: Chrome, Firefox, Safari, Opera, IE8+, Microsoft Edge.

Table of Contents

Features

  • Interactive drill-down map of the US
  • Ideal for visually representing international reps, offices, agencies and official distributors
  • Works on iOS/Android devices
  • Easy colors customization
  • Adjustable and clickable popup balloons
  • Powered by HTML5 technology (jQuery library)


Map Package Contents

The package of the map includes the following files:

map.js – the main application executable
/css – this folder contains the CSS file of the map. You can modify this file to better fit the map to your website.
/data – this folder includes state data. You can edit files in this folder to adjust a state/county's popup settings or specify a landing page URL (see below).
/lib – the folder holds necessary JS library files.

Installation

In order to install the map you should follow the below steps:

1. Upload all files to your website.
2. Insert the following HTML code into the page where the map is to be displayed: 
<!-- start Fla-shop.com HTML5 Map -->
<link rel="stylesheet" type="text/css" href="css/map.css" />
<script type="text/javascript" src="lib/jquery-1.7.min.js"></script>
<script type="text/javascript" src="lib/raphael.js"></script>
<script type="text/javascript" src="map.js"></script>
<div id="map_container"></div>
<script>
   var map = new FlaMap({
	mapWidth: 0,
   });
   map.draw('map_container');
</script>
<!-- end HTML5 Map -->
Note, the path may be different depending on where you have uploaded the files on the website, so don't forget to modify the path accordingly: 
<!-- start Fla-shop.com HTML5 Map -->
<link rel="stylesheet" type="text/css" href="css/map.css" />
<script type="text/javascript" src="/directory/lib/jquery-1.7.min.js"></script>
<script type="text/javascript" src="/directory/lib/raphael.js"></script>
<script type="text/javascript" src="/directory/map.js"></script>
<div id="map_container"></div>
<script>
   var map = new FlaMap({
	mapWidth: 0,
	pathToJSON: "/directory/data/",
   });
   map.draw('map_container');
</script>
<!-- end HTML5 Map -->

Configuring the Map

You can find information about the map main settings here

Configuring Regions, Landing Page URLs and Popup Balloons

Multi-level Map allows you to individually configure each region colors, popups and images displayed in popup balloons. Individual area settings are located in the /data folder in the JSON files.

main.cfg.js – this file contains settings of the first level of the map. Other JSON files contain settings for each second level maps. For example: 
{
"country1":
    {
    "name":"Albania", 
    "color":"#7798bb",
    "color2":"#366CA3", 
    "popup_type" : "1", 
    "url" : "http://www.google.com", 
    "target" : "", 
    "popup": "", 
    "image": ""    
    },
"country2":
    {
    "name":"Andorra", 
    "color":"#7798bb",
    "color2":"#366CA3", 
    "popup_type" : "2", 
    "url" : "#", 
    "target" : "", 
    "popup": "Test info for popup<br>Test info for popup", 
    "image": ""    
    },
...
Here is the list of settings you can use for every area in JSON files:

name – the name of a area.
color – the color of a area.
color2 – the color of a area when the mouse cursor is over it
popup_type – this option sets the behavior of the popup window for this area:
The value of 1 means the popup balloon is displayed when you move the mouse over the country, while the click opens the associated URL (see below). The value of 2 means the popup balloon "freezes" when a user clicks the area. Thus, links in the popup window become clickable too.
url – the landing page URL for this area. Note, you can also specify JS code here to display some information or perform additional actions when a user clicks the area: 
"url" : "http://www.google.com",
"url" : "javascript:alert('Hello, World!');",
target – open the URL in the new window ("_blank") or in the same window ("_top")
popup – HTML formatted text of the popup balloon
image – the path to the image displayed in the popup balloon

API specification

Version 2.2 and above use new API with improved functions, you can find API description by following this link

Fla-shop.com Licensing Information

SINGLE SITE LICENSE
$399 $599
BUY NOW!
Thank you for using our product. Please feel free to contact us with any questions regarding our product.

More maps and Information on website Fla-shop.com