Script options

Options object must be pass as the first parameter of the $.CSSMap(); function.

The "size" option must be set, all other options add as shown:

  size: 1450,

  cities: true,
  mapStyle: "vintage"


size: 0
Integer width of the map (in pixels)
available sizes: 250, 320, 430, 540, 650, 750, 850, 960, 1280, 1450
Number of sizes may vary depending of the map
mapStyle: "default"
String appearance of the map
available styles: "default", "blue", "dark", "vintage" and "custom"
tooltips: true
Boolean show tooltip of the region
String "floating" – tooltip follows the mouse pointer
"sticky" – tooltip stick to the center of region
"visible" – always visible tooltips
tooltipArrowHeight: 5
Integer increase bottom offset of the “sticky” tooltips
cities: false
Boolean display cities layer over the map
responsive: "auto"
String "auto" – map is resized to fit parent container’s width
The main “size” option is the maximum map width.
Object resizing steps may be set by an Object:
{min_window_width: map_size, min_window_width: map_size}
Boolean false – disable map resizing
fitHeight: false
Boolean resize map to fit parent container’s height
activateOnLoad: []
Array classes of the list items to activate when the map is loaded, example:
["eu15", "eu27", "eu50"]
tapOnce: false
Boolean on the touch devices single tap activate region
mobileSupport: false
Boolean hides an error message and display list of regions when the map image couldn’t be loaded
loadingText: "Loading ..."
String markup for the preloader
authorInfo: false
Boolean display credits and link to the CSSMap plugin website under the map
disableClicks: false
Boolean disables ability to click on regions;
regions can be activated using the activateOnLoad or URL hashtags

Visible list of regions

Display list of regions next to the map.

The script duplicate the main list of regions with all its content and functionality.

visibleList: {
enable: false
Boolean show the list of regions
listPosition: "bottom"
String position of the list: "bottom" or "left", "right" side of the map
columns: 1
Integer divide list into columns
columnWidth: 0
Integer width of the columns (in pixels)
must be set to show list next to the map
columnsGap: 0
Integer gap between the columns (in pixels)
containerId: ""
Selector ID of the list container OUTSIDE the map;
must start with the hash (#) mark
hideItems: []
Array classes of the list items to hide in the visible list of regions, example:
["eu3", "eu30", "eu37"]

Multiple Clicks mode

Allows to activate (click) several regions, and pass their values to the search engine script.

multipleClick: {
enable: false
Boolean allows to select multiple regions
searchUrl: "search.php"
String URL of the search engine
searchLink: "Search"
String label of the search link
searchLinkVar: "region"
String variable passed to the search engine (example: ?region=)
separator: "+"
String separator of the values passed to the search engine
hideSearchLink: false
Boolean hide search link
clicksLimit: 0
Integer limited number of clicks
0 – unlimited
clicksLimitAlert: "You can select only %d region! || regions!"
String error (alert) message when the clicks limit is reached
syntax: [beginning of sentence] %d [singular] || [plural]
%d is a number of clicks (filled by the script)

List of addresses

Allows to show/hide any informations assigned to the region.

agentsList: {
enable: false
Boolean display the list of addresses (informations assigned to the regions)
agentsListId: ""
Selector ID of the addresses’ list container;
must start with the hash (#) mark
agentsListSpeed: 0
Integer fade delay in miliseconds;
doesn’t work with: agentsListOnHover: true
0 – no fade effect
agentsListOnHover: false
Boolean show and hide agent/address on hover, instead of click
Additional markup required

There’s a second list required, where ID attribute of each list item is the same as the hash link in the main list of regions. That should works as any other internal navigation when JavaScript is disabled.

You’ll find the source code of the plain list of addresses in the downloaded package.

The list of addresses may be used to show address of the office, or distributor, or any other region related informations … and even other CSSMap.

List may be freely styled with CSS as any other unordered list.

Markers over the map

Allows to display markers (pins) over the map.

pins: {
enable: false
Boolean display markers (pins) over the map
pinsId: ""
Selector ID of the markers container;
must start with the hash (#) mark
mapSize: 0
Integer size of the map for which markers were set;
required for the responsive map
markerPosition: "middle"
String position of the marker relative to the coords – "top", "middle", "bottom"
tooltipPosition: "top"
String position of the marker tooltip – "top", "bottom", "hidden"
tooltipOnClick: false
Boolean shows marker tooltip only when the marker (pin) is clicked;
disable external link if set to the marker’s anchor element
clickableRegions: true
Boolean enable clicking on regions
false – only markers clickable
Additional markup required

Sample list of markers:

<!-- CSSMap MARKERS -->
<div id="demo-markers">
 <ul class="cssmap-pins">
  <li class="cssmap-pin" data-cssmap-coords="780,700">

   <div class="cssmap-tooltip-content">
    Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
   <a href="#" class="cssmap-marker"><img src="includes/pin.png" width="20" height="25" alt="pin"/></a>

  <li class="cssmap-pin" data-cssmap-coords="480,785">

   <div class="cssmap-tooltip-content">
    Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
   <a href="#" class="cssmap-marker"><img src="includes/pin.png" width="20" height="25" alt="pin"/></a>


Each list item with the .cssmap-pin class is a marker and must be manually positioned over the map using the data-cssmap-coords attribute:

data-cssmap-coords="left_position, top_position"

Position of the marker may be set only in pixels for the specified map size.

It’s recommended to wrap content of the marker’s tooltip into the <div />:

<div class="cssmap-tooltip-content"></div>

The most important is a link with the .cssmap-marker class where you can set a pin. It can be an image or text.

Form support

Allows to control the input and/or select form fields, and set values assigned to the active region.

formSupport: {
enable: false
Boolean allows map to control the form items
inputId: ""
Selector ID of the input field;
must start with the hash (#) mark
selectId: ""
Selector ID of the select dropdown field;
must start with the hash (#) mark
selectLabel: " "
String label of the first (default) option of the select dropdown
value: "name"
String value of the field: "name", "slug" (the href attribute) or "class" of the region

Navigation controls

Allows to navigate through regions using next/prev links under the map.

This option doesn’t work when the Multiple Clicks mode is enabled.

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

Custom events

onClick: function(listItem){}
Function function called when region is clicked
to prevent default click actions add the rel="nofollow" attribute to the links
onSecondClick: function(listItem){}
Function function called when region is clicked second time
to prevent default click actions add the rel="nofollow" attribute to the links
onHover: function(listItem){}
Function function called when the mouse pointer enters a region
unHover: function(listItem){}
Function function called when the mouse pointer leaves a region
onLoad: function(mapObject){}
Function function called when map is fully loaded


Basic knowledge of the web

HTML, CSS and JavaScript knowledge is required for a proper installation.

Your page should be valid HTML/XHTML and contain no script errors.

If you’re trying to put a map script onto your page using CMS and/or don’t want to use the dedicated CSSMap Joomla module or WordPress plugin check out documentation of your CMS. Especially how to add a custom script and stylesheet to the page.

The CSSMap plugin requires jQuery 1.7 and/or newer.

It’s always recommended to use the most recent version of the jQuery.


Text/code editor

Any text/code editor will be fine. Just don’t use any WYSIWYG editors.

.PSD file editor

To customize the map appearance you’ll need an editor which can handle layered .psd source files properly. Adobe® Photoshop® is recommended.

Image optimizer

To reduce weight of the transparent .PNG images pngquant or/and ImageOptim are recommended.

Supported browsers:

  • Google Chrome 1+
  • Firefox 4+
  • Internet Explorer 7+
  • Opera 9+
  • Safari 3+
  • + all major mobile browsers

Appearance of the map may vary in different web browsers and/or OS.

Known issues

IE >8

"responsive" option doesn’t work.

In the "auto" mode the "size" option is the map width. When using custom steps object, only the first size is set.

IE 7

The cities layer can’t be displayed over the map.

Mobile devices support

There’s an issue with the map image size (dimensions too) that can be downloaded by the mobile devices.

Set the "mobileSupport": true option to display the list of regions when the map image can’t be loaded and hide an error message.

Size of the map image will increase the cellular data transfer.


The map is hand-coded in specific sizes, which can’t be changed. The only way to change the size of the map is to rewrite most of the CSS file.

Colors of the map can’t be changed dynamically via the JavaScript function etc.

Of course there are several limitations caused by lack of the CSS support in older browsers. For example in the IE7 cities layer can’t be displayed, also there’s a bug with arrows under tooltips in the IE7 and Firefox below 3.6.


The map doesn’t appear

  1. Make sure you’ve uploaded the cssmap-MAPNAME folder onto your server.
  2. Check version of jQuery linked. The CSSMap plugin requires jQuery 1.7 and/or newer.
  3. Check if there’re no other versions of jQuery loaded.
  4. Check if there’re no conflicts with other JavaScript libraries as Mootools or Prototype. Learn more about the jQuery.noConflict() mode.
  5. Check if your website isn’t in the quirks mode. The !doctype must be set!
  6. Check if there’re no errors in the “Error console” of your browser.
  7. Check if your source code is valid and contains no errors.
  8. Check paths to the included files.
  9. Check paths to the map images – .PNG files must be in the same folder as the map’s stylesheet.

Doesn’t work on mobile devices

Most mobile devices limits the size of an image that can be downloaded.
If you’re not using the responsive: "auto" option, the size of map’s image may be too large to download.

Check out the FAQs page for more informations