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