This is an example map of Brazil showing all the available regions:
You can execute any JavaScript when a region is clicked. For example, you can replace this text.
Please click on one of the regions of Brazil to see it.
The administration panel for this map looks like this:
This map contains the following regions:
- Distrito Federal
- Acre
- Alagoas
- Amapá
- Amazonas
- Bahia
- Ceará
- Espírito Santo
- Goiás
- Maranhão
- Mato Grosso
- Mato Grosso do Sul
- Minas Gerais
- Para (Pará)
- Paraiba (Paraíba)
- Paraná
- Pernambuco
- Piauí
- Rio de Janeiro
- Rio Grande do Norte
- Rio Grande do Sul
- Rondônia
- Roraima
- Santa Catarina
- Sao Paulo (São Paulo)
- Sergipe
- Tocantins
Our plugin allows to color each region indiviually. You can also specify a custom tooltip and a click value which is passed to the JavaScript code when a region is clicked. In this example the JavaScript code replaces the text below the map. You could also run any other JavaScript code when a region is clicked. We have other examples on our site where the JavaScript code opens a link or shows a lightbox. You only have to replace the JavaScript code and in some cases have to adjust the HTML of the map template. If you need help with this, let us know.
The configurations of this map can be seen here:
Copy the following text and click on "Import" in the plugin.
Map settings
Name |
Value |
Description |
Region |
Brazil |
List with all available regions |
Width |
auto |
Width of the map in pixel. 'Auto' means that the map is centered in the available width. |
Height |
auto |
Height of the map in pixel. 'Auto' means that the map is centered in the available height. |
Display mode |
Regions |
Specifies the display mode of the map. |
Border resolution |
Provinces |
The resolution of the map borders. |
Tooltips |
On |
Allows to display a tooltip for highlighted map elements. |
Tooltips: Trigger |
focus |
The user interaction that causes the tooltip to be displayed. |
Tooltips: Use HTML |
On |
Specifies if the tooltips should use HTML. This allows to customize the tooltips even more. For example, if this property is on, it is possible to display images wihtin the tooltip. |
Map template
CSS |
#{cssid} path[fill="#ffffff"]{
display: none;
}
#{cssid} path{
cursor: pointer;
stroke-width: 1;
stroke: #3a910e;
}
#{cssid} path:hover {
fill: #3a910e;
stroke: #3a840b;
}
#{cssid} .google-visualization-tooltip {
box-shadow: none;
white-space: nowrap;
border-radius: 4px;
}
#{cssid} .google-visualization-tooltip-item {
padding: 0 1em;
}
#{cssid} em {
display: inline-block;
padding: 10px;
} |
HTML |
<div id="{cssid}">
%%map%%
<em>You can execute any JavaScript when a region is clicked. For example, you can replace this text.
Please click on one of the regions of Brazil to see it.</em>
</div> |
JavaScript
Executed when a marker/region is clicked.
Click value can be defined for each map element.
|
jQuery("#" + cssid + " em").html("You clicked on <strong>"
+ click_value
+ "</strong>. Instead of replacing this text, you could also open a link."); |
Map elements (27)
Color |
Name |
Click Value |
|
BR-DF |
Distrito Federal |
|
BR-AC |
Acre |
|
BR-AL |
Alagoas |
|
BR-AP |
Amapá |
|
BR-AM |
Amazonas |
|
BR-BA |
Bahia |
|
BR-CE |
Ceará |
|
BR-ES |
Espírito Santo |
|
BR-GO |
Goiás |
|
BR-MA |
Maranhão |
|
BR-MT |
Mato Grosso |
|
BR-MS |
Mato Grosso do Sul |
|
BR-MG |
Minas Gerais |
|
BR-PA |
Pará |
|
BR-PB |
Paraíba |
|
BR-PR |
Paraná |
|
BR-PE |
Pernambuco |
|
BR-PI |
Piauí |
|
BR-RJ |
Rio de Janeiro |
|
BR-RN |
Rio Grande do Norte |
|
BR-RS |
Rio Grande do Sul |
|
BR-RO |
Rondônia |
|
BR-RR |
Roraima |
|
BR-SC |
Santa Catarina |
|
BR-SP |
São Paulo |
|
BR-SE |
Sergipe |
|
BR-TO |
Tocantins |
Comments
If you need help or have questions, please leave a comment.