Mounting a site style map bomnegocio.com

7

Well, I'd like to know how to create a style-like map of the bomnegocio.com site. I do not know if there is a single image or several grouped images on that map.

Could someone give me a light on how that effect works?

    
asked by anonymous 13.06.2014 / 19:29

1 answer

11

Creating an SVG interactive map is simple but painstaking.

Firstly you should create the SVG file, you need to create the statuses separately, so I will demonstrate using the GIMP :

Open GIMP and import an image from the map of Brazil

Resizetheimagetothedesiredsize,intheexamplethesizeis600pxX590px.

Selectthefirststate,intheexampleIselectedAcre,butitisindifferent.

Usingthemagicwandselectiontool,selectthestate.

After selected, click the Select > For vector

EnablethevectorswindowbyclickingtheWindows>Plug-indialogs>Vectors.Right-clickthevectorandexporttovector:

Save and open the file, using 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 to desired state id, eg:

<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 you will only use the path generated code. This way you will be able to generate the SVG code of the drawing 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 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;
}

See the simple example online, with only two JSFiddle states, 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.

    
14.06.2014 / 04:17