Mounting map style site bomnegocio.com

Question

Well, I’d like to know how to create a site-style map bomnegocio.com. I don’t know if on that map there is a single image or several grouped images.

Could someone give me a light on how to do that effect?

Answer 1

Creating an interactive SVG map is simple but laborious.

First we must create the SVG file, It is necessary to create the states separately, for this I will demonstrate using the image editor GIMP:

Open the GIMP and import a map image from Brazil

Resize the image to the desired size, in the example the size is 600px X 590px.

Select the first state, in the example selected the Acre, more is indifferent.

Using the magic wand selection tool, select the state.

After selected, click on the menu Select > To vector

Enable the vector window by clicking on the menu Windows > Plug-in dialogs > Vectors. Right-click the vector and export to vector:

Save and open the file using the Notepad++, you will find the code:

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="590"
     viewBox="0 0 432 428">
  <path id="seleçao" ...

Change the id of path for desired state id, example:

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="590"
     viewBox="0 0 432 428">
  <path id="acre" ...

Repeat the process for each state, but in the next one you will only use the code path generated. This way it will be possible to generate the design SVG code and work with CSS and jQuery and manipulate the map the way you want.

In the example, I created a div with id="mapa" and put the code inside this div:

<div id="mapa">
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="590" viewBox="0 0 432 428">
    <path id="acre" data-name="Acre"
        fill="none" stroke="black" stroke-width="1"
        d="M 40.00,152.22
           C 40.00 ..." />
    <text x="15" y="160">AC</text>

    <path id="amazonas" data-name="Amazonas"
        fill="none" stroke="black" stroke-width="1"
        d="M 107.4 ..." />
    <text x="95" y="105">AM</text>
  </svg>
</div>

In the CSS

#mapa svg path {
    stroke:#200772; /*cor da borda do estado*/
    fill:#4671D5; /*cor do estado*/
    cursor:pointer;
}

#mapa svg path:hover {
    fill:#be2f33;
    stroke:#be2f33;
}

Look at the simple online example, with only two states Jsfiddle, because as I mentioned it is laborious :)

Note: This is a simple example of how to create, you can work to add texts, acronyms and whatever else you want.