FLA-SHOP.com - Interactive Maps with Greater Impact! |
|||||
HTML5 Multi-level Map of US 2.6.1The 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 /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. |
|||||
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> <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 MapYou can find information about the map main settings here |
|||||
Configuring Regions, Landing Page URLs and Popup BalloonsMulti-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 specificationVersion 2.2 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 |