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?
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?
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.