DEV Community

Cover image for Creating an Interactive Map of the US
Emmanuel
Emmanuel

Posted on

Creating an Interactive Map of the US

#html #css #javascript

In this tutorial, we'll be learning how to create an interactive map of the US using HTML, CSS, and Javascript.

The final result can be viewed here: https://codepen.io/codecustard/pen/NWpZxey

The first step is getting the map in SVG format. Using SVG allows us to define each state as a path which further allows us to style them with CSS and target them in Javascript. You can get a map of the US for free from: https://simplemaps.com/resources/svg-us

Once you have downloaded the SVG, create a new index.html file add the following:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive US Map</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="details-box"></div> </body>
Enter fullscreen mode Exit fullscreen mode

The key things to note is the div element with the "details-box" id and the "style.css" stylesheet being linked. The "details-box" div will be used to create the hover details effect when you hover onto each state.

Next thing to do is to open the svg file in a text editor and copy the "..." contents into the body tags of your html file.

<body> <svg> ... </svg> </body>
Enter fullscreen mode Exit fullscreen mode

If you take a look at the contents of the svg, you should notice that there are some useful properties such as "id" set to the abbreviation of each state as well as "data-name" set to the name of each state.

Now let's create a new stylesheet file: "style.css" with the following:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); path { stroke: white; fill:paleturquoise !important; transition: fill .4s ease; } path:hover { fill: orange !important; } #us-map { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #details-box { padding: 1rem; border-radius: 8px; font-size: 24px; position: fixed; color: white; font-family: "Poppins"; background-color: black; width: fit-content; transform: translateX(-50%); transition: opacity .4s ease; z-index: 1; }
Enter fullscreen mode Exit fullscreen mode

Now let's add the following Javascript inside the body tags:

<script> var tooltipSpan = document.getElementById('details-box'); document.addEventListener('mouseover', function (e) { if (e.target.tagName == 'path') { var content = e.target.dataset.name; document.getElementById("details-box").innerHTML = content; document.getElementById("details-box").style.opacity = "100%"; } else { document.getElementById("details-box").style.opacity = "0%"; } }); window.onmousemove = function (e) { var x = e.clientX, y = e.clientY; tooltipSpan.style.top = (y + 20) + 'px'; tooltipSpan.style.left = (x) + 'px'; }; </script>
Enter fullscreen mode Exit fullscreen mode

And that's all there is to it. This was inspired while browsing the web and finding the following website: https://www.playvs.com/high-school

You can use this effect for all kinds of use-cases. In fact, try to create something else instead of a map of the US and share it on instagram by mentioning: @codecustard

Top comments (8)

Collapse
 
anatoljevich profile image
anatoljevich • • Edited

Looks great, but how to add the text (state names) to the map?

Collapse
 
codecustard profile image
Emmanuel •

You could add the names directly within the svg, after the path:

e.g.

<path inkscape:connector-curvature="0" id="ND" data-name="North Dakota" data-id="ND" d="..............." /> <text x="420" y="520" font-size="10" fill="black">North Dakota</text>
Enter fullscreen mode Exit fullscreen mode

You can also do it using Javascript by adding an event listener when loading the DOM:

document.addEventListener("DOMContentLoaded", () => { const statePaths = document.querySelectorAll("path"); statePaths.forEach((state) => { const stateName = state.dataset.name; if (stateName) { // Create a <text> element const textElement = document.createElementNS("http://www.w3.org/2000/svg", "text"); textElement.setAttribute("x", state.getBBox().x + state.getBBox().width / 2); // Center the text textElement.setAttribute("y", state.getBBox().y + state.getBBox().height / 2); textElement.setAttribute("font-size", "10"); textElement.setAttribute("fill", "black"); textElement.setAttribute("text-anchor", "middle"); // Center align the text textElement.textContent = stateName; // Append the <text> to the SVG state.parentNode.appendChild(textElement); } }); });
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joc202 profile image
Julie •

Great details in this tutorial. How can I add clickable link to each state?

Collapse
 
codecustard profile image
Emmanuel •

To add a clickable link to each state, one option is adding an event listener for click:

// Add click functionality document.addEventListener('click', function (e) { if (e.target.tagName === 'path') { var stateName = e.target.dataset.name; if (stateName) { var googleSearchUrl = `https://www.google.com/search?q=${encodeURIComponent(stateName)}`; window.open(googleSearchUrl, '_blank'); // Open the search in a new tab } } });
Enter fullscreen mode Exit fullscreen mode
Collapse
 
robert_graham_50852c2a8d7 profile image
Robert Graham •

everything worked great except my details box is not following the cursor. It is hanging off the top left corner of the page. How can I fix this?

Collapse
 
mariel_jaramillo_ab4ee6ce profile image
MJ •

How can I add line of text on hover? I'm trying to add a license number on some of the states not all, below the name of the state on hover.

Collapse
 
paulrickard profile image
Paul Rickard •

Would there be a way to color individual states separately from the rest?

Collapse
 
paulrickard profile image
Paul Rickard •

Figured it out, nevermind