USA HTML5 Map 3.1
We introduce a brand new map powered by JavaScript. This interactive HTML5 map for websites is perfect for any business to visualize the geography of your business: display local offices, dealers, representative offices, warehouses, stores, support centers, etc., and direct customers to the appropriate landing page on your site.
The map is suitable for display in browsers on any mobile device, including iPhone, iPad, and Android devices, as well as all desktop browsers. The interactive map shows clickable areas* to which you can assign a landing page URL. Easily adjustable colors, links and popup balloons, and other settings allow you to tune the map view to your needs.
The term "area" means one of the following: region, state, country, province, county, or district, depending on the particular map.
Preview
Features
- Best for real-estate, dealer maps, branch offices location and any geographical-related information
- Responsive/static size of the interactive map
- Popup tooltips to display detailed information on mouse over
- Works with any mobile devices including iPhone, iPad, Android
- Shows pinpoint markers
- Easy visual adjustment of the map appearance
- Wide customizing capabilities
What's new
Version 3.0
Version 3.0 features a brand new online map editor. Now, you configure the map 100% visually and then just copy JSON code to the settings.js file or download ready-made settings.js.
Install HTML5 Map
To install the map on your site, add the following code to the HTML source of the page:
<!-- start Fla-shop.com HTML5 Map -->
<div id='map-container'></div>
<link href="map.css" rel="stylesheet">
<script src="raphael.min.js"></script>
<script src="settings.js"></script>
<script src="paths.js"></script>
<script src="map.js"></script>
<script>
var map = new FlaMap(map_cfg);
map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->
Note that you should upload all files to your server first. Make sure you have specified the full path to the files in the code including subfolders. For example
<!-- start Fla-shop.com HTML5 Map -->
<div id='map-container'></div>
<link href="/directory/map.css" rel="stylesheet">
<script src="/directory/raphael.min.js"></script>
<script src="/directory/settings.js"></script>
<script src="/directory/paths.js"></script>
<script src="/directory/map.js"></script>
<script>
var map = new FlaMap(map_cfg);
map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->
Step-by-step guides for installing a map in Drupal, Joomla, Shopify, Squarespace
Visual editor *
To change the map settings, you can use the online editor located at
After you set the map preferences, you can export the settings and download the settings.js file.
Don't forget to upload the updated settings.js back to your website.
(*) The visual editor is not available for all maps. In this case, you can use the editors included in the set (files states_editor.html and points_editor.html in the "tools" directory).
You can also edit the settings.js file manually using any third-party text editor. We advise you to use free Notepad++ for Windows, or Sublime Text 3 for Windows, Mac, Linux.
Certainly, you can use any other HTML and plaintext editors as well.
Settings
Here is the list of map parameters you can change. The "Basic map settings" section specifies parameters of the entire map. The "Areas settings" parameters allow you to tune the view and behavior of a specific area (country, state, county, district and other geographic units).
Basic map settings
Parameter name | Values | Description |
mapWidth | 400 | Map width in pixels. If 0 - map width will be 100% (responsive mode) |
mapHeight | 450 | Map height. If width = 0 - will be ignored |
shadowWidth | 2 | Shadow width |
shadowOpacity | 0.3 | Shadow opacity |
shadowColor | "black" | Shadow color. Can be in #rgb format |
shadowX | 1 | Shadow offset by X coordinate |
shadowY | 2 | Shadow offset by Y coordinate |
iPhoneLink | true/false | If 'true' - the URL is opened immediately. Useful if you don't need to display a popup window. If 'false' - the first tap displays a popup window for the selected area. The second tap opens the URL. |
isNewWindow | true/false | Whether to open new links in a new window or in the current one |
zoomEnable | true/false | Whether zoom capabilities are enabled or not |
zoomEnableControls | true/false | Whether zoom controls are available or not |
zoomMax | 2 | |
zoomStep | 0.2 | This setting is used by scroll zooming and zoomIn and zoomOut methods |
borderColor | Hex value | The color of region's borders |
borderColorOver | Hex value | Color of the border for active region |
nameColor | Hex value | Name colors (used with short name) |
nameFontSize | 11px | Short name font size |
nameFontWeight | bold/normal | Short name boldness. Can be "normal" or "bold" |
nameStroke | true/false | Whether short names should have stroke or not |
overDelay | secs | Animation duration in milliseconds |
Areas* settings
Parameter name | Values | Description |
id | number | The id of a region. Must not be changed |
name | text | The name of a region |
shortname | text | The abbreviated name of a region |
link | text | The landing page URL. May include JS code |
comment | HTML formatted text | The text of the popup window. May include HTML formatting |
image | text | The file name of the image to display in a popup |
color_map | Hex value | The color of a region. Default color #7798BA |
color_map_over | Hex value | The color of a region when the mouse cursor is over it. Default color #366CA3 |
The term "area" means one of the following: region, state, country, province, county or district, depending on the particular map
API specification
Version 2.0+ use new API with improved functions, you can find API description by following this link.
Fla-shop.com Licensing Information
- Single Site License
- from $49 /year
- Support included.
A lifetime license is also available. - 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