Creating an Interactive Map Using SVG and CSS
Making a map with an on-hover highlight
One of the things I really like about my current job is that I’m always pushed to discover new things and develop new features. My new challenge: given an image of a neighborhood map, develop interactive capability where a user can hover over certain parts (neighborhoods) of the map to highlight them.
Before we dive into the code, there are two important considerations:
- The file type of the image should be an SVG (I’m actually not sure if this is achievable with other file types unless you incorporate other images. If I’m wrong then please leave a comment!)
- Understanding SVG’s (groups, paths, etc.)
SVG’s are Scalable Vector Graphics images written in XML format. Unlike other file types, such as JPEG and PNG, SVG files do not lose any quality when you zoom or resize the page. They are written with XML, are a web-based picture format thst gives them the ability to adapt their configuration with the webpage, so their resolution/quality doesn’t suffer. To put this into perspective, if you view a PNG or JPEG in your text editor, you’ll see the image itself. When you view an SVG on the other hand:
You can use an SVG as an image source in an
<img> tag, like you would any other image file:
But the beauty of an SVG is that you can write the XML directly into your HTML and contain it all in an
Why in the world would you ever want to paste literally thousands of lines of code (depending on the size and complexity of the image) when you could just use the file as a src for an img tag?
In most cases, you wouldn’t. By using the SVG as an img tag’s src you still get the benefit of a scalable image, without having to include the file’s code directly in your HTML.
In this case, the file we are referencing needs to be manipulated by the user. Certain parts of the image need to be changed but the rest of the image remain the same. Like this:
Here’s how we do it.
First, you need to understand the different elements that go into an SVG. There are quite a few, but for the sake of this blog we’ll be focusing on three (for a full list of all SVG attributes, check out this page). You have the
<svg> tag, which encompasses all the data. Then you have the
<g> tags which represent groups. These groups separate the different parts of the image that make up different details. For example, one part of the image represents the green portion of East Harlem. Another part would be the green in the circle part of some of the letters (like “a”). This is an important point to remember.
The different parts within the different groups are called paths (
<path>). You can see above that the
<path> tag contains a lot of information. Since these paths are just XML tags, we can use CSS to give them an on hover animation.
Easy enough, right?
Can you imagine any issues we might run into?
Remember how I said that each path represents a different part of the image? Well, if we made an on hover animation for each individual path, that means that only that part will be highlighted, leaving the other paths in the group unaffected.
So why don’t we just have an on hover for the groups? Because the groups don’t actually have any data themselves. Their children (the paths) have all the image information.
So we can try applying the group on hover to the paths like this:
Let’s give it a shot!
Why did this happen? Well, we applied it to all paths within a group. The problem: All the groups are housed within a larger, you guessed it, group.
So what do we do now?
Well, it takes a bit of time, but what I did was go through each of the groups to find where one group (that represents a neighborhood) begins and where the next one begins. Then I wrapped all those assets in a larger group and gave it a class called full-group.
Basically, I looked for the path with the most data, which represents the bulk of the section of the image, then I worked out from there. I marked where one neighborhood began and where it ended, and then wrapped that whole section in the full-group class.
Then I added the on-hover animation to all the paths in the full-group class.
We have an isolated hover animation for a specific part of an SVG image!
If you enjoyed this post or need clarification on anything I mentioned, let me know in the comments.