Watch video

Step by step guide of the proper script installation and the sample functions usage.

Get the sample function

The Markup

Before any changes in the script, add numbers (or any other informations you want to display over the map) after links in the list of regions, example:

<li class="pl7"><a href="#mazowieckie">Mazowieckie</a> <b>45 %</b></li>
<li class="pl8"><a href="#opolskie">Opolskie</a> <b>13 %</b></li>
<li class="pl9"><a href="#podkarpackie">Podkarpackie</a> <b>25 %</b></li>
<li class="pl10"><a href="#podlaskie">Podlaskie</a> <b>89 %</b></li>
<li class="pl11"><a href="#pomorskie">Pomorskie</a> <b>55 %</b></li>

If you want to use other HTML tag to wrap you number (the <b /> tag used in this example) you have to change the numberTag = "B" variable in the script below.

AUTUMN16

20% off on all paid maps and will be valid until December 22nd, 2016.

This is a single-use per customer discount code.

SCANDINAVIA

30% off when buying all three maps of the Scandinavian countries:

• Finland
• Norway
• Sweden

This is a single-use per customer discount code.
Cart must contain all listed maps and apply only for those items.

CESKOSLOVENSKO

30% off when buying maps of the former Czechoslovakia countries:

• Czech Republic
• Slovakia

This is a single-use per customer discount code.
Cart must contain all listed maps and apply only for those items.

FRANCE2016

30% off when buying the new map of the French regions

This is a single-use per customer discount code. Discount is applied only to the France map.

Also you can set header (label) and description above the navigation links, and navigate within infinite loop of all regions. Of course, navigation can be used to toggle a list of addresses or filling in form fields. Each element of the navigation can be easily customized.

Navigation controls will not work in the Multiple Clicks mode.

Default options

navigation: {

enable: false

Boolean enables the navigation controls

loop: false

Boolean allows to navigate within infinite loop of all regions

next: "Next »"

String label of the next region link

prev: "« Previous"

String label of the previous region link

separator: "|"

String separator of the navigation links

Boolean false – removes separator

label: " "

String adds <H5> header above the navigation links

description: " "

String adds paragraph above the navigation links

}

Jumping to the page top when navigating via keyboard, have been caused by negative top margin that was set to hide tooltips. This issue has been fixed by hiding “sticky” tooltips with the "clip" CSS property. That may not work properly in the Internet Explorer 8 and below, but only when “sticky” tooltips option is set.

There was also another conflict with the Bootstrap framework. The markers layer hasn’t been positioned properly over the map. Bug has been fixed by adding additional .cssmap-markers-container class to the markers container and proper box-sizing property overwriting the Bootstrap’s.

Both major updates require update of the cssmap-themes.css file.
If you don’t store the jquery.cssmap.min.js file locally it was updated automatically. Otherwise you should update the script file too.

New maps released

• Czech Republic
• Slovakia
• Hungary
• The Netherlands
• Switzerland

New maps released

• Spain
• Spain – autonomies
• France – departments
• Greece

Custom map of the World

This’s an example of the custom map of the World I’ve made for the Fascination of Plants Day. The map of the World allows to toggle the map of Europe with transition effect and it’s used to link to details about national coordinators of each country. It’s a good example how you can customize the tooltip of each region.

Visit: Fascination of Plants Day – plantday.org

Advanced use of the list of addresses

Website of the wooden doors manufacturer Voster is the best example of the advanced customization of the list of addresses. It uses default option to show/hide their distributors listed by cities and uses simple toggle effect to show addresses.

According to these changes the map of French regions has been rewritten.

New regions of France:

1. Alsace-Champagne-Ardenne-Lorraine
2. Aquitaine-Limousin-Poitou-Charentes
3. Auvergne-Rhône-Alpes
4. Bourgogne-Franche-Comté
5. Bretagne
6. Centre-Val de Loire
7. Corse
8. Île-de-France
9. Languedoc-Roussillon-Midi-Pyrénées
10. Normandie
11. Nord-Pas-de-Calais-Picardie
12. Pays de la Loire
13. Provence-Alpes-Côte d’Azur
14. Guadeloupe
15. Martinique
16. Guyane française
17. La Réunion
18. Mayotte

Note that until July 1st, 2016 some regions have temporary names. Using the CSSMap plugin you can easily change them using the list of regions.

Updated map of French departments will be available in June.

In the recent months, it would seem that the project of the clickable maps is dead, but the work on the new version (and improving previous) slowly continued responding to the requests and suggestions of the current users.

Previous versions of the CSS & jQuery maps were downloaded over 30000 times (over 3500 paid downloads) and used by hundreds of websites worldwide, by global brands, governments and small businesses. Regarding stats, the previous script is referring over two million times monthly.

The script and the style sheets have been rewritten from scratch, which allowed to simplify the code, speed up generating maps and add new features. Now the map is rendered up to 30% faster than previous version.

The new CSSMap plugin comes with visual options generator to test all settings and generate ready to use source code.