“Responsive USA Map - HTML5” Documentation by “Art101”


“Responsive USA Map - HTML5”

Updated on: May 2014
Map Rating:

Please don't forget to rate the work

Thank you for purchasing my work. If you have any questions that are beyond the scope of this help file, please feel free to email me directly through the contact form here. Thanks so much!


Table of Contents

  1. General overview
  2. Installation
  3. Customization of the simple version
  4. Customization of the advanced version
  5. Tips and tricks
  6. How to integrate the map into WordPress site?
  7. Other maps

General overview - top

This is an interactive USA map template coded in HTML5 and javascript using Scalable Vector Graphics (SVG). So it can be scaled to any size without losing its quality. Also it can be customized through easy to use Javascript file.

Installation - top

To insert the map to your website, please follow these steps:

  1. Open the "map.html" file using any text editor such as Sublime, Adobe Dreamweaver, or Notepad.
  2. Copy the code from the head tag and paste it before the closing head tag of your page
  3. Upload the CSS file and the 3 JS files to your site. If you want to put them in another directory, please make sure that the relative path is correct or use their absolute path such as
    <script src="http://www.yoursite.com/map/map-config.js" type="text/javascript"></script>
  4. Copy the code from the body tag and paste it where you want to insert the map in your page
  5. Save and start the map customization.

Customization of the simple version - top

The simple version is used to link each state to a URL. To customize the map and add the links, please open "map-config.js" file and modify these parameters as required:

Global Parameters:

  • 'bordercolor':'#9CA8B6', //inter-state borders
  • 'lakescolor':'#66CCFF', //lakes color
  • 'shadowcolor':'#000000', //shadow color below the map
  • 'shadowOpacity':'50', //shadow opacity, value, 0-100
  • 'namescolor':'#666666', //color of the abbreviations
  • 'namesShadowColor':'#666666', //tooltip shadow color

Per State Parameters:

Each state has the following parameters, so you can customize each state separately.

Customization of the advanced version - top

The advanced version is used to show data in a text box. To customize the map and add the data, please open "map-config.js" file and modify these parameters as required:

Global Parameters:

Per State Parameters:

Each state has the following parameters, so you can customize each state separately.

Tips and tricks - top

How to integrate the map into WordPress site - top

  1. Upload the map folder to your site using FTP client.
  2. Install either iframe or HTML Snippet plugin and follow the steps.
I recommend the HTML Snippet option for responsive sites, also with "simple" map version if you want to open links in the same window (because iframe opens links only in new window).

That's it :)

Once again, thank you so much for purchasing my work. As I said at the beginning, I'd be glad to help you if you have any questions relating to this file. No guarantees, but I'll do my best to assist. If you need a special customization, please don't hesitate to contact me anytime directly via my profile page on CodeCanyon.


See also: top

Thank you