This interactive United States map can be deployed to your web site in minutes and can be viewed by anyone with an HTML5 compliant browser, no plugins needed! All colors and text are easily configured via JavaScript, and you can quickly add your own click-callbacks.


Verified In
       


Current Users! See the changelog for important updates.

Overview

This US map features all fifty states and the District of Columbia. Hovering the mouse pointer over a state, or touch events on mobile devices, will trigger a highlight of the state and display an optional informational text box containing your custom text.

The base color of each state, and the highlighted color of each state can be individually controlled as well as the base border color and highlighted border color. The size, position, and content of the info-text box for each state can also be controlled, as well as its border and text colors.

If you'd like to jump directly into an example, just have a look at the code behind this example. You can jump right to the customization JavaScript in MapConfig.js

Put these files on your server

    Map.js
    MapConfig.js

You can either click on those links and use your browser to save the files individually via the File->Save... menu, or you can right click and save the files to your machine via the right-click menu. Alternatively you can download and extract this TAR format archive file.

Edit your HTML document

The HTML file that will actually display your map must include the two JavaScript files that you downloaded an put on your server. This is done in the <head> section of your document, like this:

      <script type="text/javascript" src="MapConfig.js"> </script>
<script type="text/javascript" src="Map.js"> </script>

Your HTML file must declare a canvas object with id set to "map_canvas". The minimum dimensions to use for the canvas are 800x480. You may need to increse these dimensions slightly depending on how your CSS is set up. If you can't see the whole map, try bumping each dimension by five pixels. Note that the canvas MUST be declared with relative position in its CSS style. The canvas should be declared within the <body> section of your document. The following line demonstrates how to declare the canvas:

<canvas id="map_canvas" width="800" height="480" style="position:relative;" ></canvas>

After your page has loaded and the canvas is ready, you have to call the function map_main(). A convenient place to do this, which is guaranteed to work, is in the onload event of the <body> of your document. This can be done by simply adding some inline JavaScript to the <body> declaration in your document:

<body onload="map_main();" >

That's it! At this point you should be able to see the map on your web page. You can now begin customizing your map.

Customize your map

It's time to start customizing your configuration, and to do that you will need to edit MapConfig.js. Virtually everything you would want to do with the map can be accomplished by editing MapConfig.js. At this point you'll need a very basic understanding of JavaScript to proceed. There's documentation available within the file itself, but you can also reference the following links:

Changing the default colors

Changing settings for individual states

Direct canvas access and click callbacks

Show off your application here!

If you use this map technology on your own site email contact@dougx.net and I will link to you, provided you did a good job! Check out these examples of the configurable US Map in action:

  • ElectoralMap.net - create and share your prediction of the 2012 Electoral Map.

Terms Of Use

This map may be used for any purpose on your web site or app. License and copyright text within the JavaScript source code must not be altered when copied to your site.

All source code and data is goverend by the following license. Any use of this code in part or in whole, including the raw polygon data used to generate the map, must include a citation of DougX.net. I am most grateful when you keep the "DX Maptech" link on the map! I appreciate the traffic.

Using the map without the "DX Maptech" logo

First, let me give a special thank you to everyone who donated to this map project! The number of donations that I've received for the map have allowed me to release the map for free without the "DX Maptech" watermark. Of course, I would prefer that you leave the logo there (or at least link to me somewhere on your site or app) but you are free to use the de-branded map.

If you would like to make a donation to support this project you can still do so here. This donation goes 100% toward my web hosting expenses. All donations are processed by DreamHost via Pay Pal. Thanks for helping me keep this page up and running.

Change Log

March 12, 2012

Important! There have been changes in WebKit as to how mouse coordinates are delivered. Chrome users will see warnings in their logs about depricated methods. This has been fixed in all current versions of Map.js. This applies to the commercial versions if you have purchased one. If you have not modified Map.js then you need only download the new version and put it on your server. Otherwise you will have to edit your Map.js by hand. Keep reading to find out how.

How to update your files manually.

Edit Map.js and find the functions called map_mousemove() and map_mousedown(). You will see a block of code in both functions that looks like this: 

   if (ev.layerX || ev.layerX == 0)
   {
     x = ev.layerX;
     y = ev.layerY;

   }
   else if (ev.offsetX || ev.offsetX == 0)
   {
     x = ev.offsetX;
     y = ev.offsetY;
   }


WebKit is deprecating the layerX and layerY properties and so the IF and ELSE blocks have to be reversed. Make it check for OFFSET before checking for LAYER. After you reverse the if/else statement your code should look like this: 

   if (ev.offsetX || ev.offsetX == 0)
   {
      x = ev.offsetX;
      y = ev.offsetY;
   }
   else if (ev.layerX || ev.layerX == 0)
   {
     x = ev.layerX;
     y = ev.layerY;
   }

Again, don't forget to do this change in both places in the code. The mousemove() and mousedown() functions both have to be changed. As of 3/12/12 the old methods still work, but the Chrome console will have warnings about the depricated methods.