'Clickable region map in React
I am hoping to use an image of a map that is divided up by regions as a way to click on a region and it takes you to a page of locations within that region. I tried to divide the image up and making the rest transparent but the whole thing is still clickable. Does anyone know a way that I would be able to achieve this?
This is what the whole image of the map looks like
Solution 1:[1]
You can do this without any SVG or JavaScript just using the HTML <map> tag.
Allows you to define clickable regions in the image and associate a link to each.
Solution 2:[2]
Ok I left a few comments under your post but I think I can provide a quality answer to close this out.
Take your image and either move it to photoshop/gimp/etc. and convert it to an svg. This will allow you to create each path (country, county, however you want to break it down) and you can export as svg with the path names as the layer names you gave them.
You may not be a photoshop expert...Neither am I. I took your image and pasted it into VectorMagic.com and it was a little big but after a minute it had converted it to an svg for me.
Once you have your SVG it can be placed in the html with the
<svg>tag.You can then give each path a className or id so that you can target it with css. You may have to read up a tiny bit on how to target svg
paths with css but its pretty easy.You can add color change on hover, fade on click, what ever you want to add is possible.
To make sure I'm answering the question you asked. If the whole image is clickable if its an SVG, you are targeting the
<svg>when you should be targeting the<path>tags that are children of the svg.
Lemme know if I can answer any questions. This is definitely something everyone doing design should at least play around with because its fun and rewarding when you get it to work the way you intend it to.
Solution 3:[3]
I once had a similar issue and used a js library called raphael.js which uses paths to render a dynamic svg and provide interactivity
I struggled to find any current refs to this but here is a tutorial
https://webdesignerwall.com/tutorials/interactive-world-javascript-map
https://cmsdk.com/jquery-plugins/building-an-interactive-map-with-raphael.html
sample I quickly knocked together
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building an interactive map with Raphael</title>
</head>
<body>
<div class="wrapper">
<div id="map"></div>
</div>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | dezfowler |
| Solution 2 | sloont |
| Solution 3 |