How to make Image outline selectable

Question

I have a country map with its region outlined on it as a single image. The React app I'm trying to create needs to be able to get the statistics of each region upon hovering on a specific region.

How can I make the regions on the map independent of the whole image so that individually I can get some information and also be able to color these regions may be based on some risks (statistics)?

I tried cutting the shapes of each region in Photoshop and then placing them over the original image in my web app but I can't seem to get going through with that.

Any idea of how I could achieve what I'm trying to do?

Answer 1

You can use the following HTML elements to split the map image into pieces:

• <map>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
• <area>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

Example:

<map name="map">
  <area
    shape="poly"
    coords="100,10,40,40,60,140,160,140,180,60"
    id="region1"
    onMouseEnter={() => yourActions('region1')}
  />

  <area
    shape="poly"
    coords="200,140,250,180,320,150,310,110,240,100"
    id="region2"
    onMouseEnter={() => yourActions('region2')}
  />
</map>