USA Square Tile Map 3.1

Explore Fla-shop.com's diverse collection of HTML5 interactive maps designed specifically for websites, catering to various business needs in the digital landscape. Our selection includes maps of the USA, individual states, countries, and the World, providing an engaging way to showcase your company's geographical presence, such as local offices, dealerships, reps, or any other relevant locations.

Our interactive maps are perfect for creating captivating infographics, conveying complex information in a visually appealing and easily digestible format. Each map features customizable, clickable areas* that can be linked to specific landing pages, with a wide range of settings, such as colors, links, and popup balloons, to align with your brand identity and requirements.

Fla-shop.com's interactive maps are compatible with various devices, including iPhones, iPads, Android smartphones and tablets, and all major desktop browsers.




The term "area" refers to regions, states, countries, provinces, counties, or districts, depending on the specific map in use.

Preview

Features

  • Ideal for clickable maps with embedded links
  • Suitable for dealers, reps, and branch office locations
  • Interactive infographic capabilities for engaging visual presentations
  • Fully responsive design for various devices
  • Informative popup tooltips on mouseover
  • Mobile compatibility (iPhone, iPad, Android)
  • Customizable pinpoint markers
  • Extensive customization options
  • Easy setup for novice web developers
  • Developer-friendly API for advanced integration

Installing the HTML5 Map

To install the map on your website, insert the following code into 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="map.js"></script>
<script>
  var map = new FlaMap(map_cfg);
  map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->

Ensure you have uploaded 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/map.js"></script>
<script>
  var map = new FlaMap(map_cfg);
  map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->

Step-by-step guides for installing the map on various platforms:

Customizing Your Map

There are several ways to customize your map, including editing the static settings.js file, using the provided visual editors for state and point settings, dynamically generating settings with the API, generating settings from a database, and using the online visual editor for premium maps.

Editing the Static settings.js File:

You can manually edit the settings.js file using any third-party text editor. We recommend using free Notepad++ for Windows or Sublime Text for Windows, Mac, and Linux.

Using Visual Editors for State and Point Settings:

Within the ZIP file containing the HTML version of the map, you'll find the "Tools" directory with available visual settings editors. After adjusting the settings, click the "Export config" button and copy the auto-generated JavaScript code to the clipboard. Open the settings.js file from the package and replace its contents with the new config by pasting it from the clipboard. Remember to upload the updated settings.js back to your website.

Dynamically Generating Settings with the API:

You can use the API to dynamically generate map settings, providing flexibility and ease of use for advanced customizations.

Generating Settings from a Database:

If you prefer, you can generate map settings directly from your database, ensuring seamless integration with your existing data and infrastructure.


For premium maps, an online visual editor is available at https://www.fla-shop.com/editor/, offering a user-friendly interface to customize your map's appearance and functionality.

Settings

In this section, you will find a list of map parameters that you can modify. The "Basic Map Settings" section allows you to adjust parameters for the entire map, while the "Area Settings" section enables you to fine-tune the appearance and behavior of specific areas (countries, states, counties, districts, or 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" refers to regions, states, countries, provinces, counties, or districts, depending on the specific map in use.


 

API documentation

For detailed information on the API and its capabilities, please refer to our API documentation.

Fla-shop.com Licensing Information

  • License: Free
  • * Free for personal and commercial websites
    * Attribution required

Thank you for using our product. If you have any questions regarding our product, please feel free to contact us.

Find more maps and information on our website: Fla-shop.com