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

Drill-down World Map 2.6.2

Drill-down World Map 2.6.2 is JavaScript-powered interactive world map with two detail levels. The first level displays the global map of the world with continents, while a user can zoom in to the second level by clicking a certain continent. This is particularly useful for any online or offline business having world-wide and international reps, offices, distributors or official partners in certain countries. The map can display local contact info and provide customized landing pages for every country or region 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 world with clickable countries
  • Ideal for visually representing international reps, offices, agencies and official distributors in given countries
  • Works on iOS/Android devices
  • Easy colors customization
  • Adjustable and clickable popup balloons
  • Powered by JavaScript technology

Map Package Contents

The package of the map includes the following files:

map.js – the main application executable
settings.js – configuration parameters of the map
/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 country data. You can edit files in this folder to adjust a country's popup settings or specify a landing page URL (see below).
/lib – the folder holds necessary JS library files. /docs – documentation and API reference.

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>
<script type="text/javascript" src="settings.js"></script>
<div id="map_container"></div>
<script>
   var map = new FlaMap(map_cfg);
   map.drawOnDomReady('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="/directory/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>
<script type="text/javascript" src="/directory/settings.js"></script>
<div id="map_container"></div>
<script>
   var map = new FlaMap(map_cfg);
   map.drawOnDomReady('map_container');
</script>
<!-- end HTML5 Map -->
And in file settings.js 
...
pathToJSON: "/directory/data/", // path where all map data for sub regions is stored
...

Configuring the Map

You can find information about the map main settings here.

Configuring Regions, Landing Page URLs and Popup Balloons

Golden World and USA HTML5 Locator Map allows you to individually configure each state or region's colors, popups and images displayed in popup balloons. Individual country settings are located in the /data folder in the JSON files.

main.cfg.js – this file contains settings of the first (continental) level of the map. Other JSON files contain settings for each continent. Let's take the European continent as an 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 country or region in JSON files:

name – the name of a country or a region.
color – the color of a country.
color2 – the color of a country when the mouse cursor is over it
popup_type – this option sets the behavior of the popup window for this country:
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 country. Thus, links in the popup window become clickable too.
url – the landing page URL for this country. Note, you can also specify JS code here to display some information or perform additional actions when a user clicks the state: 
"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.0 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
$199
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