Select on map/img

Question

After I’ve clipped that image into states, how could I join them?

Answer 1

The question is not clear enough, but responding to your comment

I intend to join them and relate with a link, ie.. even add a javascript/css function to upload the image and sequence display a text box or similar.

If you want more freedom, you will need a map in SVG format to be able to interact with javascript and apply CSS to it.

To handle svg more easily, you can use the D3 library. Below are useful links and a short example of how to paint the map with css and javascript.

Map of Brazil in SVG

https://www.amcharts.com/svg-maps/? map=Brazil

D3 Library

https://d3js.org/

Functional example

https://codepen.io/malloni/pen/RxYygb

Code

HTML

<div id="map">
    <!-- svg goes here -->
</div>

Javascript

d3.select('#map>svg')
  .selectAll('path')
  .classed('land',true)
  .on('click', () => window.open('http://www.google.com/search?q=' + d3.event.target.id))

CSS

.land {
  fill: #33aa33;
  fill-opacity: 1;
  stroke: white;
  stroke-opacity: 1;
  stroke-width: 0.5;
  cursor:pointer;
}

.land:nth-child(2n) {
  fill: #ff3333;
}

.land:hover{
  opacity: 0.5;
}