Advanced Customization

September 26th, 2012 · · 37 comments

When creating a map, you have a lot of customization options on the administration panel, including: background color, border color and width, inactive regions color, markers size and color and the active regions color. These are the options that the Google Geochart API provides. However, advanced users will be able to extend this customization features.

If you have some knowledge of CSS, you will be able to customize the maps even further, creating css rules for the maps you created.

You will have to place the CSS rules in your theme CSS, or embed them on the post or page where your map will show.

For each of the examples here, you should take in consideration that you should change the #map_canvas_ID for your map ID.

Country borders color and mouse cursor

#map_canvas_21 path {
stroke-width:1; /* control the countries borders width */
stroke:#6699cc; /* choose a color for the border */
cursor:pointer; /* display the pointer when the map hovers the map. */
}

Hover effect

The hover effect is created with a class and an advanced selector that creates a rule to fill with the color red the regions that are NOT colored #f5f5f5, the color that was chosen for the inactive regions.

#map_canvas_14 path:not([fill^="#f5f5f5"]):hover {
fill:red;
}

Marker with point cursor and different hover effects

#map_canvas_26 circle {
stroke-width:0; /* control the countries borders width */
cursor:pointer; /* display the pointer when the map hovers the map. */
}

#map_canvas_26 circle:hover {
stroke-width:3; /* control the countries borders width */
stroke:#FFFFFF; /* control the countries borders color */
cursor:pointer; /* display the pointer when the map hovers the map. */
fill:#6699cc; /* control the fill color of the marker */
}

Changing the default crop

[More detailed information about this technique here]

The default area that the plugin displays for some countries is very wide sometimes. We can change this by playing around with some values:

#map_canvas {
overflow:hidden;
width:350px;
}

#map_canvas #map_canvas_47 {
margin-left:-110px;
}

You can play around with values and with the size of the map to achieve what you need.

 

Background Fill in Markers Mode

#map_canvas_18 path:nth-child(111) {
fill:#cccccc;
}

This is a bit tricky to achieve. The theory is that you find the number of the shape of the region you want to color and use it with this advanced CSS selector.

#map_canvas_44 path:nth-child(232),
#map_canvas_44 path:nth-child(234),
#map_canvas_44 path:nth-child(235),
#map_canvas_44 path:nth-child(236) {
fill:#CCCCCC;
}

In the future I will try to document this trick a bit further, having a table of matching numbers for each state and countries that I’ve found out.

I use the firefox/chrome extension ‘Firebug‘ to find out the number. Check this image below with some instructions.

firebug-path
(click to enlarge)

 

Advanced Italy Example with multiple techniques

 

Code used for this example:
#map_canvas {
overflow:hidden;
width:600px;
height:400px;
}#map_canvas_52 {
margin-left:-700px;
margin-top:-300px;
}#map_canvas_52 path:nth-child(254),
#map_canvas_52 path:nth-child(253) {
fill:#DE7C52;
}Screenshot of Map Administration:tuscany