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
       

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 provided that the "DX MapTech" area remains clearly visible and unaltered at the top of the map, and provided that a user click in that area directs them to this page. License 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 both a citation of DougX.net and a visible and functioning link back to this page. Copyright notices in the source code must not be altered or removed.

Obtaining a de-branded license

If you would prefer to deploy the map without the "DX MapTech" watermark please make a $40 donation toward my web hosting. (PayPal/CC) After donating, you will be directed to a link where you can download a de-branded version of the map, which you may use for your own commercial purposes. Note that copyright notices at the top of the JavaScript files must still remain intact. Click here to donate and obtain a license. Any problems? Email contact@dougx.net

All donations are processed by DreamHost via Pay Pal. Donations go to fund my web hosting only...I can't cash them out! So, you are helping me keep this page up and running.