CSSMap blog cover - Numbers over the mapSet numbers over the map

Sometimes you need to add some informations over the map, as: statistic data (percentage values of voters) or icons, etc. which are dynamically changing. There’s an easy way to do that. Just watch the video tutorial or get the sample code below.

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.

CSSMap Blog - Autumn discounts coverAutumn discounts

This Fall, you can use several discount codes to save up to 30% on paid maps. As always, there’s available the season’s discount code to save 20% on the entire contents of the cart. Apply your discount code at checkout.


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

This is a single-use per customer discount code.


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

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


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

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


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.

CSSMap Blog cover - New feature: Navigation controlsNew feature: Navigation links

The new feature has been added to the script today. The navigation controls, requested by @dylanabanana, allows to navigate through regions using next and previous links.

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

CSSMap blog cover - Midsummer updatesMidsummer updates

Since the last update, some users reported two major issues with the map’s script. Recent updates fixed two problems: with positioning markers layer over the map when using Bootstrap framework, and a bug that caused jumping to the page top when navigating via keyboard. As always support of the new maps has been added.

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

CSSMap best usage and live examples cover imageBest usage and live examples

Previous versions of the CSS & jQuery maps are used by hundreds of websites worldwide, by global brands, governments and small businesses. This is a short list of best implementations and live examples of the CSSMap plugin.

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.

CSSMap example at plantday.eu
Custom map of the World at plantday.org website

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.

New regions of France - since January 2016New regions of France

In 2014, the French parliament passed a law reducing the number of metropolitan regions from 22 to 13 with effect from 1 January 2016. Updated map of French regions contains all new regions and five overseas departments.

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.

CSSMap new version coverNew version is out!

Finally, the new version of the CSSMap plugin and the new script website have been released. Responding to the requests and suggestions of the current users it has a lot of new features and improvements. First of all, the script was rewritten and optimized, and it comes with new features as: responsiveness, improved visible list of regions, markers over the map, form support and four new map styles.

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.

CSSMap - default map styles
Four new map styles available out of the box – default, vintage, blue and dark

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