FLA-SHOP.com - Interactive Maps with Greater Impact! |
|||||
Drill-down World Map 2.6.2The 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
|
|||||
Map Package ContentsThe 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. |
|||||
InstallationIn 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 MapYou can find information about the map main settings here. |
|||||
Configuring Regions, Landing Page URLs and Popup BalloonsGolden 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 specificationVersion 2.0 and above use new API with improved functions, you can find API description by following this link |
|||||
Fla-shop.com Licensing Information
|
|||||
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 |