• Albania

    Some info about Albania, or list of addresses, or anything else you want to display here.

    In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.

  • Andorra

    Some info about Andorra, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • Austria

    Some info about Austria, or list of addresses, or anything else you want to display here.

    In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.

  • Belarus

    Some info about Belarus, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Belgium

    Some info about Belgium, or list of addresses, or anything else you want to display here.

    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

  • Bosnia and Herzegovina

    Some info about Bosnia and Herzegovina, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • Bulgaria

    Some info about Bulgaria, or list of addresses, or anything else you want to display here.

    Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.

  • Croatia

    Some info about Croatia, or list of addresses, or anything else you want to display here.

    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

  • Cyprus

    Some info about Cyprus, or list of addresses, or anything else you want to display here.

    Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.

  • Czech Republic

    Some info about Czech Republic, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • Denmark

    Some info about Denmark, or list of addresses, or anything else you want to display here.

    In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.

  • Estonia

    Some info about Estonia, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • France

    Some info about France, or list of addresses, or anything else you want to display here.

    In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.

  • Finland

    Some info about Finland, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • Georgia

    Some info about Georgia, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • Germany

    Some info about Germany, or list of addresses, or anything else you want to display here.

    Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.

  • Greece

    Some info about Greece, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Hungary

    Some info about Hungary, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Iceland

    Some info about Iceland, or list of addresses, or anything else you want to display here.

    Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.

  • Ireland

    Some info about Ireland, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • San Marino

    Some info about San Marino, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Italy

    Some info about Italy, or list of addresses, or anything else you want to display here.

    Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.

  • Kosovo

    Some info about Kosovo, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Latvia

    Some info about Latvia, or list of addresses, or anything else you want to display here.

    Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.

  • Liechtenstein

    Some info about Liechtenstein, or list of addresses, or anything else you want to display here.

    Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.

  • Lithuania

    Some info about Lithuania, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • Luxembourg

    Some info about Luxembourg, or list of addresses, or anything else you want to display here.

    Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.

  • Macedonia F.Y.R.O.M.

    Some info about Macedonia F.Y.R.O.M., or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Malta

    Some info about Malta, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Moldova

    Some info about Moldova, or list of addresses, or anything else you want to display here.

    Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.

  • Monaco

    Some info about Monaco, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • Montenegro

    Some info about Montenegro, or list of addresses, or anything else you want to display here.

    Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.

  • Netherlands

    Some info about Netherlands, or list of addresses, or anything else you want to display here.

    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

  • Norway

    Some info about Norway, or list of addresses, or anything else you want to display here.

    Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.

  • Poland

    Some info about Poland, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Portugal

    Some info about Portugal, or list of addresses, or anything else you want to display here.

    Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.

  • Romania

    Some info about Romania, or list of addresses, or anything else you want to display here.

    Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.

  • Russian Federation

    Some info about Russian Federation, or list of addresses, or anything else you want to display here.

    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

  • Serbia

    Some info about Serbia, or list of addresses, or anything else you want to display here.

    In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.

  • Slovakia

    Some info about Slovakia, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Slovenia

    Some info about Slovenia, or list of addresses, or anything else you want to display here.

    Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.

  • Spain

    Some info about Spain, or list of addresses, or anything else you want to display here.

    Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.

  • Sweden

    Some info about Sweden, or list of addresses, or anything else you want to display here.

    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

  • Switzerland

    Some info about Switzerland, or list of addresses, or anything else you want to display here.

    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

  • Turkey

    Some info about Turkey, or list of addresses, or anything else you want to display here.

    Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.

  • Ukraine

    Some info about Ukraine, or list of addresses, or anything else you want to display here.

    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

  • United Kingdom

    Some info about United Kingdom, or list of addresses, or anything else you want to display here.

    Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.

  • England

    Some info about England, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Isle of Man

    Some info about Isle of Man, or list of addresses, or anything else you want to display here.

    Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.

  • Northern Ireland

    Some info about Northern Ireland, or list of addresses, or anything else you want to display here.

    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

  • Scotland

    Some info about Scotland, or list of addresses, or anything else you want to display here.

    Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.

  • Wales

    Some info about Wales, or list of addresses, or anything else you want to display here.

    In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.

  • Vivamus rutrum consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.
    pin
  • Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.
    pin
CSSMap settings
  • Map style:
    • Display list of regions next to the map.

      Column width must be set to display the list of regions next to the map. The list of regions can also be moved to the container outside the map.

      Learn more about the visible list of regions

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

      Learn more about the Multiple Clicks mode

    • Allows to display markers (pins) over the map. Additional markup required!

      Learn more about the markers (pins) over the map

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

      Learn more about the form support

    • Allows to navigate through regions using next/prev links under the map. This option doesn't work when the Multiple Clicks mode is enabled.

      Learn more about the navigation controls

    • Custom functions will not be added to the automatically generated source code. Add them manually to the $.CSSMap(); function options object.

      Learn more about the custom events

get the code

Use the "CSSMap settings" form to play with the demo map and generate the sample script code below.


Save settings to generate the code and apply changes to the demo map.

Generated code must be pasted after the CSSMap script declaration.

Check out the "Setup & settings" section for details.


Setup & settings

Load the CSSMap stylesheet

First, copy the "cssmap-europe" folder to your location and link the map's CSS file inside the <head> of your page.

Load jQuery and the CSSMap script

Just before the </body> closing tag*, link to the jQuery and CSSMap script. Make sure you're not loading script files multiple times.

The CSSMap script file is loaded from the cloud, so you'll always have access to the latest version. Of course, you can store it locally as well.

* if you prefer, you can add the scripts in the <head> as well.

Run the script

Now you can invoke the $.CSSMap(); function.

Copy the code below and put it just after the links to jQuery and the CSSMap script.
The script may be also invoked under the list of regions in the page content.

The code above has been generated by the "CSSMap settings" form

The markup

The CSSMap script is based on the unordered list of regions presented below. You can modify all links and text as you need.

Label (text) of the link will be presented in the tooltip and the HTML markup may be used as well*.

<!-- CSSMap - Europe -->
<div id="map-europe">
 <ul class="europe">
  <li class="eu1"><a href="#albania">Albania</a></li>
  <li class="eu2"><a href="#andorra">Andorra</a></li>
  <li class="eu3"><a href="#austria">Austria</a></li>
  <li class="eu4"><a href="#belarus">Belarus</a></li>
  <li class="eu5"><a href="#belgium">Belgium</a></li>
  <li class="eu6"><a href="#bosnia-and-herzegovina">Bosnia and Herzegovina</a></li>
  <li class="eu7"><a href="#bulgaria">Bulgaria</a></li>
  <li class="eu8"><a href="#croatia">Croatia</a></li>
  <li class="eu9"><a href="#cyprus">Cyprus</a></li>
  <li class="eu10"><a href="#czech-republic">Czech Republic</a></li>
  <li class="eu11"><a href="#denmark">Denmark</a></li>
  <li class="eu12"><a href="#estonia">Estonia</a></li>
  <li class="eu13"><a href="#france">France</a></li>
  <li class="eu14"><a href="#finland">Finland</a></li>
  <li class="eu15"><a href="#georgia">Georgia</a></li>
  <li class="eu16"><a href="#germany">Germany</a></li>
  <li class="eu17"><a href="#greece">Greece</a></li>
  <li class="eu18"><a href="#hungary">Hungary</a></li>
  <li class="eu19"><a href="#iceland">Iceland</a></li>
  <li class="eu20"><a href="#ireland">Ireland</a></li>
  <li class="eu21"><a href="#san-marino">San Marino</a></li>
  <li class="eu22"><a href="#italy">Italy</a></li>
  <li class="eu23"><a href="#kosovo">Kosovo</a></li>
  <li class="eu24"><a href="#latvia">Latvia</a></li>
  <li class="eu25"><a href="#liechtenstein">Liechtenstein</a></li>
  <li class="eu26"><a href="#lithuania">Lithuania</a></li>
  <li class="eu27"><a href="#luxembourg">Luxembourg</a></li>
  <li class="eu28"><a href="#macedonia">Macedonia <abbr title="The Former Yugoslav Republic of Macedonia">(F.Y.R.O.M.)</abbr></a></li>
  <li class="eu29"><a href="#malta">Malta</a></li>
  <li class="eu30"><a href="#moldova">Moldova</a></li>
  <li class="eu31"><a href="#monaco">Monaco</a></li>
  <li class="eu32"><a href="#montenegro">Montenegro</a></li>
  <li class="eu33"><a href="#netherlands">Netherlands</a></li>
  <li class="eu34"><a href="#norway">Norway</a></li>
  <li class="eu35"><a href="#poland">Poland</a></li>
  <li class="eu36"><a href="#portugal">Portugal</a></li>
  <li class="eu37"><a href="#romania">Romania</a></li>
  <li class="eu38"><a href="#russian-federation">Russian Federation</a></li>
  <li class="eu39"><a href="#serbia">Serbia</a></li>
  <li class="eu40"><a href="#slovakia">Slovakia</a></li>
  <li class="eu41"><a href="#slovenia">Slovenia</a></li>
  <li class="eu42"><a href="#spain">Spain</a></li>
  <li class="eu43"><a href="#sweden">Sweden</a></li>
  <li class="eu44"><a href="#switzerland">Switzerland</a></li>
  <li class="eu45"><a href="#turkey">Turkey</a></li>
  <li class="eu46"><a href="#ukraine">Ukraine</a></li>
  <li class="eu47"><a href="#united-kingdom">United Kingdom</a></li>
<!--
  <li class="eu48"><a href="#england">England</a></li>
  <li class="eu49"><a href="#isle-of-man">Isle of Man</a></li>
  <li class="eu50"><a href="#northern-ireland">Northern Ireland</a></li>
  <li class="eu51"><a href="#scotland">Scotland</a></li>
  <li class="eu52"><a href="#wales">Wales</a></li>
-->
 </ul>
</div>
<!-- END OF THE CSSMap - Europe -->

View source code

* some elements, like: <UL /> and <span /> need to be reseted after the CSSMap's style sheet. Check out the "Customizing map in CSS" section for deatils.


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:

$("#map-europe").CSSMap({
  // MAP SIZE MUST BE SET;
  "size": 1450,

  // OTHER OPTIONS;
  "cities": true
});

Ready to use script code may be generated by the "CSSMap settings" form

Defaults:

size: 0
Integer

width of the map (in pixels);

available sizes: 250, 320, 430, 540, 650, 750, 850, 960, 1280, 1450

mapStyle: "default"
String

appearance of the map

available styles: "default", "blue", "dark", "vintage" and "custom"

Learn more about the "custom" option in the editing map style section.

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:

["eu37", "eu42", "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 [HTML]

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:

["eu22", "eu26", "eu6"]

}

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

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.

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.

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

* nested <UL /> and/or <OL /> list items should be reseted first.

<!-- CSSMap - list of addresses -->
<div id="demo-agents">
 <ul>
  <li id="albania">

    <!-- Albania -->

  </li>
  <li id="andorra">

    <!-- Andorra -->

  </li>
  <li id="austria">

    <!-- Austria -->

  </li>
  <li id="belarus">

    <!-- Belarus -->

  </li>
  <li id="belgium">

    <!-- Belgium -->

  </li>
  <li id="bosnia-and-herzegovina">

    <!-- Bosnia and Herzegovina -->

  </li>
  <li id="bulgaria">

    <!-- Bulgaria -->

  </li>
  <li id="croatia">

    <!-- Croatia -->

  </li>
  <li id="cyprus">

    <!-- Cyprus -->

  </li>
  <li id="czech-republic">

    <!-- Czech Republic -->

  </li>
  <li id="denmark">

    <!-- Denmark -->

  </li>
  <li id="estonia">

    <!-- Estonia -->

  </li>
  <li id="france">

    <!-- France -->

  </li>
  <li id="finland">

    <!-- Finland -->

  </li>
  <li id="georgia">

    <!-- Georgia -->

  </li>
  <li id="germany">

    <!-- Germany -->

  </li>
  <li id="greece">

    <!-- Greece -->

  </li>
  <li id="hungary">

    <!-- Hungary -->

  </li>
  <li id="iceland">

    <!-- Iceland -->

  </li>
  <li id="ireland">

    <!-- Ireland -->

  </li>
  <li id="san-marino">

    <!-- San Marino -->

  </li>
  <li id="italy">

    <!-- Italy -->

  </li>
  <li id="kosovo">

    <!-- Kosovo -->

  </li>
  <li id="latvia">

    <!-- Latvia -->

  </li>
  <li id="liechtenstein">

    <!-- Liechtenstein -->

  </li>
  <li id="lithuania">

    <!-- Lithuania -->

  </li>
  <li id="luxembourg">

    <!-- Luxembourg -->

  </li>
  <li id="macedonia">

    <!-- Macedonia F.Y.R.O.M. -->

  </li>
  <li id="malta">

    <!-- Malta -->

  </li>
  <li id="moldova">

    <!-- Moldova -->

  </li>
  <li id="monaco">

    <!-- Monaco -->

  </li>
  <li id="montenegro">

    <!-- Montenegro -->

  </li>
  <li id="netherlands">

    <!-- Netherlands -->

  </li>
  <li id="norway">

    <!-- Norway -->

  </li>
  <li id="poland">

    <!-- Poland -->

  </li>
  <li id="portugal">

    <!-- Portugal -->

  </li>
  <li id="romania">

    <!-- Romania -->

  </li>
  <li id="russian-federation">

    <!-- Russian Federation -->

  </li>
  <li id="serbia">

    <!-- Serbia -->

  </li>
  <li id="slovakia">

    <!-- Slovakia -->

  </li>
  <li id="slovenia">

    <!-- Slovenia -->

  </li>
  <li id="spain">

    <!-- Spain -->

  </li>
  <li id="sweden">

    <!-- Sweden -->

  </li>
  <li id="switzerland">

    <!-- Switzerland -->

  </li>
  <li id="turkey">

    <!-- Turkey -->

  </li>
  <li id="ukraine">

    <!-- Ukraine -->

  </li>
  <li id="united-kingdom">

    <!-- United Kingdom -->

  </li>
  <li id="england">

    <!-- England -->

  </li>
  <li id="isle-of-man">

    <!-- Isle of Man -->

  </li>
  <li id="northern-ireland">

    <!-- Northern Ireland -->

  </li>
  <li id="scotland">

    <!-- Scotland -->

  </li>
  <li id="wales">

    <!-- Wales -->

  </li>
 </ul>
</div>
<!-- END OF THE CSSMap - list of addresses -->

View source code

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">
    Phasellus quis est sed turpis sollicitudin venenatis. Praesent eget neque eu eros interdum.
   </div>
   <a href="#" class="cssmap-marker"><img src="includes/pin.png" width="20" height="25" alt="pin"/></a>

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

   <div class="cssmap-tooltip-content">
    Proin quis tortor orci. Etiam at risus et justo dignissim congue.
   </div>
   <a href="#" class="cssmap-marker"><img src="includes/pin.png" width="20" height="25" alt="pin"/></a>

  </li>
 </ul>
</div>
<!-- END OF THE CSSMap MARKERS -->

View source code

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 - remove 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

Script options (except the "Custom events") may be generated by the "CSSMap settings" form.


Requirements

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 style sheet to the page.

The CSSMap plugin requires jQuery 1.7+

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

Software

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.

Limitations

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. Learn more about editing map style.

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.


Customizing map in CSS

You can customize some elements using the CSS style sheets.

Check out the cssmap-europe/cssmap-themes.css file for default CSS rules and modify them as you need.
All custom CSS rules must be set after the map's style sheet file.

Editable elements

Tooltips

Use these selectors to customize the tooltips:

.cssmap > li a,.cssmap > li a:hover{}

If "sticky" tooltips are enabled, you can customize tooltips for specified map size:

.cssmap-[MAPSIZE] .cssmap > li a{}

..and arrow under the tooltip:

.cssmap > li a .tooltip-arrow{}

Arrows are displayed only if the tooltips: "sticky" option is set.

Visible list of regions

Visible list of regions may be styled using the selector:

.cssmap-visible-list{}

Links of the visible list:

.cssmap-visible-list a{}
 .cssmap-visible-list a:hover{}

Search link

In the Multiple Clicks mode the search link may be styled by:

.cssmap-search-link{}

The search link can be hidden by hideSearchLink: true option of the multipleClick{} object.

Marker (pin) tooltip

By default all tooltips are styled the same, but you can customize appearance of the marker tooltip using:

.cssmap-tooltip-content{}

Navigation controls

Customize each element of the navigation using selectors listed below (defaults shown). Navigation controls elements are centered by default.

/* NAVIGATION CONTAINER */
.cssmap-navigation{ text-align: center }

/* LIST OF NAVIGATION CONTROLS */
.cssmap-nav-list{}
 .cssmap-nav-list li{
   display:inline-block;
   margin: 0 .5em;
  }
  .cssmap-nav-next{} /* LIST ITEM */
  .cssmap-nav-prev{} /* LIST ITEM */
  .cssmap-nav-separator{} /* LIST ITEM */

/* LABEL OF THE NAVIGATION - THE H5 HEADER (OPTIONAL) */
.cssmap-nav-label{}

/* DESCRIPTION SHOWN ABOVE THE NAVIGATION (OPTIONAL) */
.cssmap-nav-description{}

Preloader

.cssmap-loader{}

Reserved classes

List of classes used by the CSSMap script:

  • .cssmap-container
  • .cssmap
  • .cssmap-[0-9]
  • .bg
  • .m
  • .s[0-9]
  • .focus
  • .active-region
  • .europe
  • .europe-cities
  • .eu[0-9]
  • .cssmap-blue
  • .cssmap-dark
  • .cssmap-vintage
  • .cssmap-custom
  • .cssmap-tooltip-content
  • .tooltip-arrow
  • .tooltip-top
  • .tooltip-left
  • .tooltip-right
  • .tooltip-middle
  • .cssmap-visible-list-container
  • .cssmap-visible-list
  • .cssmap-search-link
  • .cssmap-markers-container
  • .cssmap-marker
  • .cssmap-navigation
  • .cssmap-nav-label
  • .cssmap-nav-description
  • .cssmap-nav-list
  • .cssmap-nav-next
  • .cssmap-nav-prev
  • .cssmap-nav-separator
  • .cssmap-loader
  • .cssmap-cities
  • .cssmap-error
  • .cssmap-signature

Cropping the map

You can easily crop the map using few CSS rules.

Set new dimentions

Dimensions of the map may be set like any other element, i.e.:

.cssmap-container{
  height: 300px;
  width: 400px
 }
Move the map inside its container

Use negative values to move the map left and up, i.e.:

.cssmap-container .cssmap{
  left: -100px;
  top: -250px
 }

Hide list elements

Hide list of regions before map is loaded

.cssmap > li a{
  margin: -9999em 0 0 0;
  position: absolute
 }

Use responsibly! It must be set before map's style sheet. Users will be unable to see and use links when the map doesn't load!

Disable regions

To disable (remove) regions just delete their links or wrap entire list items into comments.


Editing map style

To customize map style use the editable .PSD source files available in the downloaded package.
The Adobe® Photoshop® is recommended to edit.

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

Do not change position of the locked layers and shapes!

Changing colors and layer styles

Color of the region

To change color of the regions just double click on the layer's thumbnail and use the "Color Picker".

Modify multiple layers

Certainly you will need to change color of all layers at once. There're two ways to do that:

  1. select all layers you want to change and use the "Fill" option of shape tool U
  2. merge all shapes (layers) of the map's state (:hover or :active) as shown below.
Layer color
Changing fill color using shape tool options (left) or double clicking on the layer's thumbnail (right)

Layer Style

Stroke
Position

Must be set to "Center", otherwise outlines of the regions will not overlap.

Color

Double click on the color's square and use "Color Picker" to change it as you need.

"Fill Type" should be set:"Color".

Other options

You can set any other options like gradients, shadows and glows ..just as you want to.

Each region has 10px gap around (5px in maps less than 300px wide), so the outer glow and shadow shouldn't be larger than that.

Changing outline color of the region
Changing outline color of the region

Merge shapes (optional)

Inside one of the map's states (:hover or :active) select all layers you want to merge, but without masks if any.

If you're using an old version of Photoshop® and you don't have that option, you can use the Path Selection tool A and merge all shapes manually.

Merged shapes may be styled as shown above, you can add: outline, glows and shadows, but not the gradients. Gradients may be set properly only for the single shapes (layers).

Merge shapes
Merge Shapes option in the Adobe®Photoshop® CC

Saving map files

  1. Hide background of the .psd file ("bg" layer).
    Map image must be transparent!
  2. In the menu select: File > Save for Web...
    or press: Ctrl + Alt + Shift + S
  3. Choose "Preset: PNG-24"
  4. "Transparency" option must be checked
  5. Save an image in the map's directory
  6. Do not change name of the .png file!
Transparent .PNG file saving presets
Transparent .PNG file saving presets

Optimize .PNG files

The CSSMap plugin is based on the CSS sprites and it's recommended to optimize map images to reduce their weight and save bandwidth.

Recommended .PNG optimizers
pngquant
Command-line utility for Linux, Mac and Windows. Photoshop® plugin available.
ImageOptim
Mac OS X application.

Using the mapStyle: "custom" option

  1. Upload/Save your custom map images into the /cssmap-europe/custom folder.
  2. Set the mapStyle: "custom" option of the $.CSSMap(); function.

Of course you can overwrite existing files of the default map styles.


Troubleshooting

The map doesn't appear

  1. Make sure you've uploaded the cssmap-europe folder onto your server.
  2. Check version of jQuery linked. The CSSMap plugin requires jQuery 1.7+
  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. Back to the "Setup & settings" section.
  9. Check paths to the map images - .PNG files must be in the same folder as the map's style sheet.

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.


License

Using the CSSMap plugin is simple as that:

DO

  • use in personal or commercial project
  • use in all kinds of web projects
  • use in the mobile/desktop application
  • customize, crop and modify to your needs

DO NOT

  • sub-license, resell or share in the downloadable format
  • remove or hide the "signature" layer on the images
  • remove author info from stylesheets and scripts
  • use anything from the source code of this demo page
  • share that demo page

Changelog

5.5.3 December 11th, 2016
Fixed reloading map after window resize.
5.5.2 September 7th, 2016
Maps of Norway and Finland support added.
5.5.1 August 31st, 2016
Maps of Sweden and combined maps of the United States and Canada support added.
Added cssmap-mapstyle.psd source file into the download package with ready to use layer styles of default maps.
5.5 August 13th, 2016
Navigation controls added - allows to navigate through regions using next/prev links under the map - requires cssmap-themes.css file update
5.4 July 28th, 2016
Map of Switzerland support added.
Added .cssmap-markers-container class to the markers container.
Fixed positioning of the markers over the map when using Bootstrap framework - requires cssmap-themes.css file update
5.3.1 July 25th, 2016
Maps of Hungary and The Netherlands support added
5.3 July 5th, 2016
Maps of Czech Republic and Slovakia support added.
Fixed jumping to the page top when using keyboard navigation - requires cssmap-themes.css file update
5.2.2 May 30th, 2016
Map of Greece support added
5.2.1 May 24th, 2016
Map of the French departments support added
5.2 May 20th, 2016
disableClicks option added
5.1 May 19th, 2016
Fixed onClick method in the Multiple Clicks mode
5.0.2 May 7th, 2016
Map of the autonomous communities of Spain support added
5.0.1 May 5th, 2016
Map of Spain support added
5.0 April 20th, 2016
New script and style sheets relased - requires update of all files and source code.
New features:
  • Four default map styles
  • Fit width and/or height of the browser window or map's container
  • Touch devices support
  • Improved visible list of regions
  • Markers over the map
  • Allows to fill in input fields with name, class or URL of regions
  • Allows to convert list of regions into select dropdown menu
  • Setup and options generator
  • Rewritten script for better performance

Support & contact

If you have any questions regarding setup, licensing, payments, or would like to order a custom map of any region, don't hesitate to write.

But, if your setup doesn't work, check out the "Troubleshooting" section once again and/or visit the CSSMap FAQ page before you ask for help.

Get maps