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

USA Map Locator HTML5 1.3.4

We introduce a brand new map of the USA powered by HTML5. The map is suitable for displaying on any device including iPhone, iPad and obviously on all major desktop browsers. The interactive map shows clickable USA states which you can assign a landing page URL with. Easily adjustable colors, links and popup balloons and other settings allow you to tune the map view to your needs. HTML5 USA interactive map is perfect for any US-wide business to highlight local offices, dealers or support points.

HTML5 USA Locator Map can be used alone or in a bundle with the Flash map. In that case you can save $39 by purchasing a map bundle: FLASH + HTML5.

The map is powered by the Raphael JavaScript library providing the work in the following browsers: Chrome, Firefox, Safari, Opera, IE7, IE8, IE9 and IE10.

Table of Contents

Features

The interactive HTML5 map is designed to work as an addition to Flash USA Locator map, or as a replacement of it. The HTML5 technology provides flawless work of the map on various tablet PC devices including iPhone and iPad, and on all modern desktop browsers. Combining the HTML5 version of the map with the Flash map allows you to display the Flash map to desktop users and the HTML5 map to tablet PC users.

What's new

Version 1.3.2
Fixed work of map's scripts if other JS plugins are used on a page at the same time.

Version 1.2
  • You can adjust the map size now via the settings.js file
  • Highlighted states now cast a shadow (doesn't work in IE)
Version 1.1
Improved interaction under iPhone and iPad. You can select different actions executed on click.
The following settings are supported:
iPhoneLink = false,
- the first tap displays a popup window for the selected state. The second tap opens the URL.
iPhoneLink = true,
- the URL is opened immediately. Useful if you don't need to display a popup window.

General Settings

The HTML5 USA Locator Map is configured through 2 files: settings.js and map.css.

All adjustments and customizations should be made in the JS file. We advise you to use free Notepad++. Certainly, you can use any other HTML and plaintext editors as well.

The configurations and customizations can be made on your local computer. After customization you have to upload the edited files on your web server.

Customizing the file "settings.js"
The file settings.js you can define the properties of maps: the color of the states, borders, 2-letter codes, links and information for popup ballons.

The options are described below:
Parameter name Values Description
mapWidth 530 Specifies the width of the map
mapHeight 410 Specifies the height of the map
shadowWidth 2 Thickness of the shadow
shadowOpacity 0.3 Transparency of the shadow
shadowColor "black" Base color of the shadow
shadowX 1 Horizontal displacement of the shadow
shadowY 2 Vertical displacement of the shadow
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 state. The second tap opens the URL.
isNewWindow true/false If 'true' opens links in new windows
borderColor Hex value The color of state's borders
borderColorOver Hex value The color of state's borders while the mouse cursor is over it
nameColor Hex value The color of state's abbreviated name
nameFontSize Height in px The font size of state's abbreviated name
nameFontWeight bold/normal The font weight of state's abbreviated name
overDelay secs The delay before state selection animation
State settings
id number The id of a state. Must not be changed
name text The name of a state
shortname text The abbreviated name of a state
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 state. Default color #7798BA
color_map_over Hex value The color of a state when the mouse cursor is over it. Default color #366CA3


Example
id: 1,
name: "Alabama",
shortname: "AL",
link: "alabama_page.html",
comment: "Name Surname<br>Business Development Manager<br>Phone: (000) 123-4567",
image: "photo.jpg",
color_map: "#7798BA", 
color_map_over: "#366CA3"

Install HTML5 Map

In order 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 style="position: relative;">
    <link href="map.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="raphael-min.js"></script>
    <script type="text/javascript" src="settings.js"></script>
    <script type="text/javascript" src="map.js"></script>    
</div>
<!-- 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. 
<!-- start Fla-shop.com HTML5 Map -->
<div style="position: relative;">
    <link href="/directory/map.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/directory/raphael-min.js"></script>
    <script type="text/javascript" src="/directory/settings.js"></script>
    <script type="text/javascript" src="/directory/map.js"></script>
</div>
<!-- end HTML5 Map -->


Installing the non-Flash map to use along with USA Locator Map 3.0

The following example allows using HTML map along with USA Locator Map 3.0. Note that combined view requires usage of the SWFObject (http://code.google.com/p/swfobject/) method to insert the Flash map on a page.

Here is the installation code: 
<div style="width:530px;height:410px;" style="position: relative;">
<script type="text/javascript" src="swfobject.js"></script>       
<script type="text/javascript">
    var params = {
          menu: "false"
        };
    var flashvars = {
      xmlfile1: "usa_locator.xml"
        };    
    swfobject.embedSWF("usa_locator.swf", "usa_locator", "530", "410", "9.0.0", "", flashvars, params);
</script>
 <div id="usa_locator">
 
<!-- HTML code for the HTML5 map. -->
<!-- start HTML5 Map -->
    <link href="map.css" rel="stylesheet">
    <script src="raphael-min.js"></script>
    <script src="settings.js"></script>
    <script src="map.js"></script>
<!-- end HTML5 Map --> 

 </div>
</div>
Important! The path to SWF files (usa_locator.swf), XML files (usa_locator.xml) and JavaScript file (swfobject.js) may be different on your server, so you will need to adjust them accordingly. This allows you to put those files somewhere else (say in the "map" folder) and specify that path in the script source. Similarly, you need to specify a path to the map.js file in the code of the HTML map.

Installing the non-Flash map to use along with USA Locator Map 4.0

If you're using USA Locator Map 4.0 use the following code instead:
<div style="width:530px;height:410px;" style="position: relative;">
<script type="text/javascript" src="swfobject.js"></script>       
<script type="text/javascript">
    var params = {
          menu: "false"
        };
    var flashvars = {
      datafile: "data.swf",
      xmlfile1: "locator_map.xml"
        };    
    swfobject.embedSWF("locator_map.swf", "locator_map", "530", "410", "9.0.0", "", flashvars, params);
</script>
 <div id="locator_map">
 
<!-- HTML code for the HTML5 map. -->
<!-- start HTML5 Map -->
    <link href="map.css" rel="stylesheet">
    <script src="raphael-min.js"></script>
    <script src="settings.js"></script>
    <script src="map.js"></script>
<!-- end HTML5 Map --> 

 </div>
</div>
Important! The path to SWF files (data.swf, locator_map.swf), XML files (locator_map.xml) and JavaScript file (swfobject.js) may be different on your server, so you will need to adjust them accordingly. This allows you to put those files somewhere else (say in the "map" folder) and specify that path in the script source. Similarly, you need to specify a paths to the javascript files in the code of the HTML map.

Fla-shop.com Licensing Information

SINGLE SITE LICENSE
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