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

USA Map Locator HTML5 1.6

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. Beginning from version 1.4 our maps became responsive that allows using it with responsive website designs.

HTML5 USA interactive map is perfect for any US-wide business to highlight local offices, dealers or support points.

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

  • Suitable for real-estate, dealer maps, branch offices location and any geographical-related information
  • Responsive/static size of interactive map
  • Popup window for additional information adding
  • Works with any mobile devices including iPhone and iPad
  • Wide customizing capabilities


What's new

Version 1.4
Added the capability of responsive/fixed map size using.

Version 1.3.7
Added an API for interaction with the map through JavaScript.

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
//mapWidth 530 Specifies the responsive 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
nameStroke true/false Enables / disables the stroke around the two-letter codes
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.

API specification

FSstateModify(state, fillColor, strokeColor)
* changes color properties of the state
- state name from settings.js ie. st1, st2, st10....
- fillColor, color to fill the state ie. #11AABB
- strokeColor, color to fill stroke ie. #000000
 
FSstateLabelModifyText(state, state_text)
* change label text of the state
- state name from settings.js ie. st1, st2, st10....
- state_text, text to go as label for that state
 
FSstateLabelModifyColor(state, fillColor, strokeColor)
* changes color properties of the state label
- state name from settings.js ie. st1, st2, st10....
- fillColor, color to fill the label ie. #11AABB
- strokeColor, color to fill stroke ie. #000000
 
FSfetchStateAttr(state, attrName)
* get attribut from settings.js for state
- state name from settings.js ie. st1, st2, st10....
- attrName, valid attributes (id, name, shortname, link, comment, image)
 
FSreloadMap()
* reloads the map
 
FSaddText(txt, x, y, fill, weight, size)
* adds the text to map
- x, y position of the text
- fill, fill color for the text
- weight (normal, bold, italic)
- size, text size in pixels, ie 14
 
FSstateHighlightOn(state)
* higlights the state as if the mouse is over
- state name from settings.js ie. st1, st2, st10....
 
FSstateHighlightOff(state)
* returns the state to normal default color
- state name from settings.js ie. st1, st2, st10....

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