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>

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>

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;
}

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>

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

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (5)

anatoljevich • Nov 14 '23 • Edited

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

Emmanuel • Jan 13

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>

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);
    }
  });
});

Julie • Oct 30 '23

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

Emmanuel • Jan 13

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
    }
  }
});