Frequently Asked Questions

All versions

How to dynamically change colors of regions?

Colors of the map can’t be changed dynamically via the JavaScript function etc. Maps are based on the CSS sprites, so only one way to change it’s appearance is editing the .PSD source files available in the downloaded package. For detailed instructions how to edit map style using Adobe® Photoshop® check out the map’s demo page in “Editing map style” section.

How to open links in new window or tab?

To open links in the new window or tab, just add the target="_blank" attribute to the links; example:

<li class="eu13"><a href="/france.html" target="_blank">France</a></li>

Also, you can use the onLoad method to set target attribute to all regions; example:

$("#map-europe").CSSMap({
  "size": 960,
  // OTHER OPTIONS HERE;

  "onLoad": function(e){
    var getRegions = e.find("LI");

    for(var i=0; i<getRegions.length; i++){
      getRegions[i].getElementsByTagName("A")[0].target = "_blank";
    } // END for();

  } // END onLoad;

}); // END OF THE CSSMap;

Of course, you can set any other target value to open links in iframe etc.

How to prevent linking (when using onClick method)?

To prevent linking simply add the rel="nofollow" attribute to the links; example:

<li class="eu5"><a href="#belgium" rel="nofollow">Belgium</a></li>

Also, you can use the onLoad method to set rel attribute to all regions; example:

$("#map-europe").CSSMap({
  "size": 960,
  // OTHER OPTIONS HERE;

  "onLoad": function(e){
    var getRegions = e.find("LI");

    for(var i=0; i<getRegions.length; i++){
      getRegions[i].getElementsByTagName("A")[0].rel = "nofollow";
    } // END for();

  } // END onLoad;

}); // END OF THE CSSMap;

How to display numbers over the map?

If you’re not using tooltips you can use the tooltips: "visible" option and change names of regions to anything you want to display over the map. To display numbers (or any other elements) over the map you can use the onLoad method and functions below.

var numberTag = "B",  // SET HTML WRAPPER OF THE NUMBER;
    setNumbers = function(region){
      var getLink = region.getElementsByTagName("A")[0],
          getNumber = region.getElementsByTagName(numberTag)[0],
          leftPosition = $(getLink).position().left,
          topPosition = $(getLink).position().top,
          numberMarginTop = Math.floor($(getNumber).outerHeight() / -2),
          numberMarginLeft = Math.floor($(getNumber).outerWidth() / -2),
          setPosition = {
            "left": leftPosition + "px",
            "marginLeft": numberMarginLeft + "px",
            "marginTop": numberMarginTop + "px",
            "position": "absolute",
            "top": topPosition + "px",
            "zIndex": 88
          };

      $(getNumber).css(setPosition);
    }; // END function setNumbers();

$("#map-europe").CSSMap({
  "size": 960,
  "tooltips": "floating",
  // OTHER OPTIONS HERE;

  "onLoad": function(e){
    var getItems = e.find("LI");

    for(var i=0, region; region = getItems[i]; i++){
      setNumbers(region);
    } // END for(i);

  } // END onLoad;

}); // END OF THE CSSMap;

Modify list of regions

Add previously set element into the list items, but AFTER the link; example:

<li class="eu16"><a href="#germany">Germany</a> <b>123</b></li>

In that case the <b /> was used, but you can use any inline HTML elements except the <span />.

Learn more

When map of the World will be available?

Unfortunately, map of the World will not be available with all countries clickable. Most of them will have 1×1 px dimensions, and that will be hard to click them even on the desktop screen, not even spoke about touch displays. Also the files will be quite large to load via mobile.

How to add a map to the WordPress site?

You can add the map as any other script and style sheet to the WordPress site using functions.php file.

First of all upload the cssmap-MAPNAME folder into your theme directory.

And these functions into the functions.php file of your theme (inside the <?php declaration obviously):

// ENQUEUE CSSMAP SCRIPTS;
function cssmap_fn(){
  wp_enqueue_script(
    'cssmap-script', 
    '//cssmapsplugin.com/5/jquery.cssmap.min.js', 
    array('jquery'),
    '5.6.0',
    true
   );
  wp_enqueue_style(
    'cssmap-MAPNAME', 
    get_template_directory_uri().'/cssmap-MAPNAME/cssmap-MAPNAME.css',
    array(),
    '5.6',
    'screen'
   );
}
add_action('wp_enqueue_scripts', 'cssmap_fn');

// INVOKE CSSMAP FUNCTION IN THE FOOTER;
function cssmap_js(){
?>
<script type="text/javascript">
(function($){

  $('#map-MAPNAME').CSSMap({

   // MAP OPTIONS HERE;
   'size' : 960

  });

})(jQuery);
</script>
<?php
}
add_action('wp_footer','cssmap_js', 100);

Of course replace MAPNAME with the name of your map (ex: europe).

Now you have to add the list of regions into your post/page content (or anywhere else you want to display a map), but DO NOT use a visual editor!

Version 4.4

How to activate region when the map is loaded?

To activate only one region when the map is loaded just add the .active-region class to the link; example:
```
<li class="eu5"><a href="#belgium" class="active-region">Belgium</a></li>
```

To activate multiple regions you can use the onLoad method; example:

var mapObj = $("#map-europe"),
    mapOptions = {
      "size": 960,
      "tooltips": "floating",
      // OTHER MAP OPTIONS HERE;

      // USE THESE FUNCTIONS IF YOU WANT TO KEEP REGIONS PERMANENTLY ACTIVE;
      /* 
      "onClick": function(e){
        activateRegions();
      },
      "onSecondClick": function(e){
        activateRegions();
      },
      */

      // ACTIVATE REGIONS ONLOAD;
      "onLoad": function(e){
        activateRegions();
      }
    },
    activateRegions = function(){
      var getItems = mapObj.find("LI"),

          // ARRAY OF REGIONS TO ACTIVATE;
          activateRegions = ["eu16", "eu13", "eu35", "eu22"];

      for(var i=0, region; region = getItems[i]; i++){
        var regionClass = region.className.split(" ")[0];

        if(activateRegions.indexOf(regionClass) !== -1){
          $(region).addClass("active-region");
        }

      } // END for(i);
    };

mapObj.cssMap(mapOptions);

Regions aren't displayed correctly

When using Bootstrap or other frameworks there’s an issue with CSS3 box-sizing. just put these CSS rules into your style sheet:

.css-map-container *{
  -moz-box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
  box-sizing: content-box !important
 }

How to merge regions?

There’s no simple way to do that, but there’s a workaround. Use functions below to merge regions. This’s a sample for the United Kingdom map, but you can modify it to your needs.

var mapID = "#map-united-kingdom",
    mergeRegions = function(el,action){

      var regionClass = el.attr("class").split(" ")[1],
          getListItems = $(mapID).find("."+regionClass),
          R = $("."+regionClass),

          // ADD REGIONS;
          regions = {
            "england": {   // CLASS OF THE MERGED REGION IN THE LIST OF REGIONS;
              link: "#england",
              name: "England"
            },
            "northern-ireland": {   // CLASS OF THE MERGED REGION IN THE LIST OF REGIONS;
              link: "#northern-ireland",
              name: "Northern Ireland"
            },
            "scotland": {   // CLASS OF THE MERGED REGION IN THE LIST OF REGIONS;
              link: "#scotland",
              name: "Scotland"
            },
            "wales": {     // CLASS OF THE MERGED REGION IN THE LIST OF REGIONS;
              link: "#wales",
              name: "Wales"
            }
          }, // END ADD REGIONS;
          rc = regions[regionClass];

      if(typeof rc != "undefined"){
        R.children("A").text(rc.name).attr("rel","nofollow");

        getListItems.each(function(){

          switch(action){
            case "hover": R.addClass("focus"); break;
            case "unHover": R.removeClass("focus"); break;
            case "click":
             R.addClass("active-region");
             if(rc.link.charAt(0)==="#"){ window.location.hash = rc.link; }
              else{ window.location.href = rc.link; }
              break;
          }

        }); // END each();

      } // END if();
    }; // END function mergeRegions();

$(mapID).cssMap({
  "size": 560,
  "tooltips": "floating",  // STICKY TOOLTIPS DON'T WORK PROPERLY;
  // OTHER OPTIONS HERE;

  "onHover": function(e){ mergeRegions(e,"hover"); },
  "unHover": function(e){ mergeRegions(e,"unHover"); },
  "onClick": function(e){ mergeRegions(e,"click"); },
  "onSecondClick": function(e){ mergeRegions(e,"click"); }
}); // END cssMap();

Modify list of regions

Add previously set classes to the list items; example:

<div id="map-united-kingdom">
 <ul class="united-kingdom">
  <li class="uk1 england"><a href="#east-midlands">East Midlands</a></li>
  <li class="uk2 england"><a href="#east-of-england">East of England</a></li>
  <li class="uk3 england"><a href="#london">London</a></li>
  <li class="uk4 england"><a href="#north-east">North East</a></li>
  <li class="uk5 england"><a href="#north-west">North West</a></li>
  <li class="uk6 england"><a href="#south-east">South East</a></li>
  <li class="uk7 england"><a href="#south-west">South West</a></li>
  <li class="uk8 england"><a href="#west-midlands">West Midlands</a></li>
  <li class="uk9 england"><a href="#yorkshire-and-the-humber">Yorkshire and The Humber</a></li>
  <li class="uk10 northern-ireland"><a href="#antrim">Antrim</a></li>
  <li class="uk11 northern-ireland"><a href="#armagh">Armagh</a></li>
  <li class="uk12 northern-ireland"><a href="#down">Down</a></li>
  <li class="uk13 northern-ireland"><a href="#fermanagh">Fermanagh</a></li>
  <li class="uk14 northern-ireland"><a href="#londonderry">Londonderry</a></li>
  <li class="uk15 northern-ireland"><a href="#tyrone">Tyrone</a></li>
  <li class="uk16 scotland"><a href="#central">Central</a></li>
  <li class="uk17 scotland"><a href="#dumfries-and-galloway">Dumfries and Galloway</a></li>
  <li class="uk18 scotland"><a href="#fife">Fife</a></li>
  <li class="uk19 scotland"><a href="#grampian">Grampian</a></li>
  <li class="uk20 scotland"><a href="#highland">Highland</a></li>
  <li class="uk21 scotland"><a href="#lothian">Lothian</a></li>
  <li class="uk22 scotland"><a href="#orkney-islands" class="tooltip-middle">Orkney Islands</a></li>
  <li class="uk23 scotland"><a href="#outer-hebrides" class="tooltip-middle">Outer Hebrides</a></li>
  <li class="uk24 scotland"><a href="#scottish-borders">Scottish Borders</a></li>
  <li class="uk25 scotland"><a href="#shetland-islands" class="tooltip-middle">Shetland Islands</a></li>
  <li class="uk26 scotland"><a href="#strathclyde">Strathclyde</a></li>
  <li class="uk27 scotland"><a href="#tayside">Tayside</a></li>
  <li class="uk28 wales"><a href="#north-wales">North Wales</a></li>
  <li class="uk29 wales"><a href="#mid-wales">Mid Wales</a></li>
  <li class="uk30 wales"><a href="#south-wales">South Wales</a></li>
  <li class="uk31"><a href="#isle-of-man">Isle of Man</a></li>
 </ul>
</div>

Payments

I haven't received a download link

Check out your junk/spam folder for any messages from CSSMap plugin. Message with a download link has been sent to your payment email address, so make sure it was correct. If you can’t find it, use the contact form and let us know about that issue.

How can I pay for a map of Turkey?

If PayPal service is unavailable in you country (as Turkey), you can buy a map on Creative Market using your credit/debit card.

Search form

Downloads cart

All versions

Modify list of regions

Version 4.4

Modify list of regions

Payments