Making an Interactive Map Of The USA

Share This:

Are you trying to create a website that has a dynamic map of a country? Maybe to collect data from users of the website. This can be done in several ways. But here is a way to do it with HTML and jQuery 2. Now jQuery 3
Update: This works with jQuery 2 as well as jQuery 3

Preperation

Before we get started you will need some things. The first thing you will need is an image of the country that you wish to make interactive. You can get this by simply doing a Google search. In my case I wanted a map of the USA. I also knew that a map with just a few colors would be easier to work with. And I found a map with blue states.

The next thing we will need is an image editor. I was using Linux when I did this so I installed GIMP.

I also needed a text editor, most computers have a text editor, but I used one I purchased.

We will also need jQuery 2.1.1 Now it is updated to jQuery 3.0.0.0

Modify The Images

My goal was to allow for the users to be able to hover their mouse over a certain state, and when they do the state will change color. I knew that the United States has 50 states and the map I used considered Washingtonn DC as a state. So I knew I needed to make 51 modifications to the image.

So I created a directory called images, placed the first image in the directory and copied it 51 times and named each copied version of the map after a certain state that would be highlighted.

Next using GIMP I opened up each image and changed the color of the state that was for that image. For example if the image I have opened up with GIMP is called New York then I will change the color of the state of NY on the map.

Example

Not Modified

Non modified image

Modified NY Map

Modified NY Map

 

 

 

 

 

 

I then do this for every image for each state.

Getting The Coordinates

Many people will claim that in order to get the coordinates to make an imagemap we will need an imagemap editor. I simply use GIMP. I do this by simply opening up just one of the images and hovering my cursor over different areas of the image will show me a set of coordianates at the bottom of the screen.

Gimp Coordinates

The above image is the coordinates for my mouse hovered over a spot near New York. In the case of New York which has an odd shape we will need several different coordinates and we will be using it as a polygon. For the circles on the map we will be using the circle shape, and for the states shaped like rectagles we will use the rect shape. Below is a code snippet for 3 different states.


<area shape="circle" id="VT" coords="499,64,20">
<area shape="rect" id="WA" coords="57,22,118,71">
<area shape="poly" id="HI" coords="110,278,26,238,26,338,70,341">

So for any circle that we need to get the coordinates for we will hover our mouse over the center of the circle and write down the coordinates. Then you determine the radius of the circle. For rectangle or square objects we hover our mouse over the top left of the square object write down the coordinates, then we hover our mouse over the bottom right of the object and write down the coordinates. For polygons you have to write down the coordinates of every side of an object.

Circle Rect Poly
X1,X2,R X1,X2,Y1,Y2 X1,X2,Y1,Y2,Z1,Z2 etc

Writing The HTML Code

Now it’s time to have some fun. First we will make a div and since this was a map of the United States I gave it an ID of USA.


<div id="USA">
</div>

Now inside of the DIV we will place our non modified image. Since this image will be part of an imagemap we will use the usemap attribute. I’ve named my usemap attribute #states.


<div id="USA">
<img src="US-default.png" alt="United States" usemap="#states" />
</div>

Now we will add our map tags and call the image that we are mapping. Since we named our usemap attribute #states we will call the map tag states.


<map name="states">
</map>

Now inside the map tags we will place our coordinates for each state.


<map name="states">
<area shape="circle" id="VT" href="http://somesite.com" coords="499,64,20">
<area shape="rect" id="WA" href="http://somesite.com" coords="57,22,118,71">
<area shape="poly" id="HI" href="http://somesite.com" coords="110,278,26,238,26,338,70,341">
<!-- Add more states here -->
</map>

That is pretty much it for the HTML portion of the interactive map. But it wont do much at this point. We will need to add some jQuery to it for it to be interactive.

Writing jQuery

Now to make the map change when a user hovers over a state we will need to write some jQuery code. We also want the image to become it’s default image when the user stops hovering over a certain state. To do this we will first need to add the jQuery Library that we have downloaded earlier. To do this we will write the following.


<script type="text/javascript" src="./jquery-2.1.1.min.js"></script>

Now lets write the jQuery code.


<script type="text/javascript">
$('#VT').hover(
function() {
$('#USA img').attr('src', 'US-VT.png');
},
function() {
$('#USA img').attr('src', 'US-default.png');
}
);
</script>

The above code is for the state of Vermont. In our HTML area code for Vermont we gave the id of VT. Like the following.


<area shape="circle" id="VT" href="http://somesite.com" coords="499,64,20">

If the id was NY then we would have jQuery code that looks like the following.


<script type="text/javascript">
$('#NY').hover(
function() {
$('#USA img').attr('src', 'US-VT.png');
},
function() {
$('#USA img').attr('src', 'US-default.png');
}
);
</script>

So we will need to repeat the above jQuery code for each state, and apply the correct image for each state in the code. We will also need to make sure we are using the correct id. The end result gives us the following.


United States
Vermont New Hampshire Massachusetts Rhode Island Connecticut New Jersey Delaware Maryland Washington DC Hawaii Alaska Washington Oregon California Idaho Nevada Utah Arizona New Mexico Colorado Wyoming Montana North Dekota South Dekota Nebraska Kansas Oklahoma Texas Louisiana Arkansas Missouri Iowa Minnesota Wisconsin Michigan Illinois Indiana Kentucky Tennessee Mississippi Alabama Florida Georgia South Carolina North Carolina Virginia West Virginia Ohio Pennsylvania Maine New York