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