Here's the GitHub Repo for you to clone.
See the Pen oLGGNz by Daniel Marcus (@dmarcus) on CodePen.
Making an interactive and responsive map is much easier than you would think. In this tutorial we'll start with a plain SVG image of the United States. The goal is to make it so that hovering over a state will display the name of the state, along with its capital. Additionally, it will be able to adapt to any screen size.
By the end of this tutorial you'll be able to do this using any map you'd like. This is useful if you want to show interactive maps of the world, countries, or states. An excellent application of this is CNN's interactive primaries map.
You would normally start by searching on Google for a map of the United States in .svg format. For the sake of this tutorial, let's use the one from Wikipedia. A lot of people don't know this, but SVG files can be opened using any text editor. This is because SVG files are written in XML, which allows you to simply copy the code by viewing the page source. Do this and paste it into your favorite text editor.
Notice how there are a bunch of path tags with ids? Each path in the code corresponds to a state. Now create a CSS file and add the following code #FL { fill: orange !important }. You'll see that only Florida is orange. The other states have the color #D3D3D3 because that's what it's set to in the xml code. !important overrides that color.
Now delete the orange fill and go back to the SVG code. Change id="svg2" to a more semantic name, like id="us-map". Now we can refer to the SVG object as us-map and use #us-map as a CSS or jQuery selector.
If you change the viewport size, you'll notice that the map is not responsive. In order to fix that simply add the following code to your CSS file.
#us-map {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Now if you shrink the viewport, the SVG is responsive. The problem is that the map isn't aligned at the top. In the HTML, immediately after id="us-map" add preserveAspectRatio="xMinYMin meet". This forces the map to stay at the top when shrinking the viewport.
Next we want to make it so that hovering over a state causes it to change colors (let's use #002868 which is Old Glory Blue from the US flag). We'll take advantage of CSS hover to accomplish this. The cursor should be a pointer, and the outline (stroke) will also be blue.
path:hover, circle:hover {
stroke: #002868 !important;
stroke-width:2px;
stroke-linejoin: round;
fill: #002868 !important;
cursor: pointer;
}
Great! It's time to display the state name and capital on hover. Add <div id="info-box"></div> right above the XML in the HTML. This box will show state name and capital. Let's style it by using the code below. We'll use #BF0A30, which is Old Glory Red from the US flag, as the border color. To complete the trifecta of American flag colors, we'll use white for the background color. The z-index needs to be set to 1 to make the box appear in front of the map. We set display to none so that the box is not visible unless a state is hovered.
#info-box {
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background-color: #ffffff;
border: 2px solid #BF0A30;
border-radius: 5px;
padding: 5px;
font-family: arial;
}
We're almost done. Add the following code to the HTML file, right after id="HI", like so data-info="<div>State: Hawaii</div><div>Capital: Honolulu</div>". Repeat this for all of the states. You can now intuitively add extra information in order to customize this even more.
The final step is to add the following jQuery code so that hovering shows the information box with state name and capital.
$("path, circle").hover(function(e) {
$('#info-box').css('display','block');
$('#info-box').html($(this).data('info'));
});
$("path, circle").mouseleave(function(e) {
$('#info-box').css('display','none');
});
$(document).mousemove(function(e) {
$('#info-box').css('top',e.pageY-$('#info-box').height()-30);
$('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();
The selector for path selects a state. The circle represents Washington DC. As you can see in the code, hovering over path or circle causes the info box to become visible. Moving the mouse away from the map causes the info box to disappear. The mousemove() method makes the info box appear above the mouse. That's all of the code! Feel free to copy this code and use it for your next project.