Creating an Interactive Map of the US

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

18

Categorieën:

CssJavascript

Tags:

HtmlCssJavascript