Europe

CSS & jQuery clickable map

$(function($){

  $('#map-europe').cssMap({
    'size': 540,  						// set map size to 540px wide;
    'visibleList': true, 				// show list of regions (customzied list shown);
    'cities': true,						// display cities;
    'tooltips': 'floating-bottom-right'	// floating tooltips with specified position to the mouse pointer;
   });

});
/* list of regions can be placed next to the map by these sample CSS rules: */

.css-map-container.m540{
  width: 865px; /* must be a sum of the map and visible list widths and paddings */
 }
.m540 .css-map,.m540 .map-visible-list{
  display: inline-block; /* for IE7 use display:inline; zoom:1; */
  vertical-align: top;
 }
.m540 .map-visible-list{
  margin-left: 20px;
  }
.m540 .map-visible-list li{ width: 50%; }

$(function($){

  // sample usage of the onClick and onHover options (click on the map to run onClick function)
  $('#map-europe').cssMap({
    'size': 650,					// set map size to 650px wide;
    'onClick': function(e){
      var link = e.children('a').attr('href'),		// get link's URL; 
          text = e.children('a').eq(0).text(),		// get text of the link; 
          className = e.attr('class').split(' ')[0];	// get class name of the list item; 
     }
   });

});
Basic knowledge of the HTML, CSS and Photoshop is required for a proper installation and customization of the map!

Setup and settings

Link files

In the <head> tag of your page add link to the style sheets and scripts. The CSS file must be loaded before scripts and links directly to the folder with maps.

<link rel="stylesheet" type="text/css" media="screen,projection" href="cssmap-europe/cssmap-europe.css" />

Now link to the jQuery library* (if it hasn't been yet) and the map core script**

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script type="text/javascript" src="http://cssmapsplugin.com/4/jquery.cssmap.js"></script>

Finally you can initialize the cssMap(); function with a specified map size:

<script type="text/javascript">
  $(function($){
    $('#map-europe').cssMap({'size' : 960});
   });
</script>

* the map requires jQuery 1.6 and higher, but you should always use the recent version!

** the script is stored in the Cloud, so you'll always have an access to the latest version. Load it only once even if you're using multiple maps on the one page.

The markup

Place following list of regions somewhere in the <body> tag of your page (or into post/article content).
The id attribute of the map container can be set as you want, but don't edit class names in the list. The CSS targets that classes specifically. Of course you can change the links and names of regions.

view plain

<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>
<!-- remove this comment and UK list item (above) to activate the United Kingdom countries
  <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>
Do not copy anything from the source code of this demo page!

Adjust map to your needs

List of all script options available to customize the map (default values listed):

size : 960,					// String: map width (must be set); availalbe sizes: 250, 320, 430, 540, 650, 750, 850, 960, 1280 and 1450;
tooltips : "sticky",		// String: "sticky" - display tooltip in the center of the region;
							// String: "floating" - tooltip follows the mouse pointer; position to the cursor: "floating-top-center" (default), "floating-bottom", "floating-left", "floating-right", "floating-middle-left", "floating-bottom-right" etc;
							// String: "hidden" - hidden tooltips;
							// String: "visible" - always visible tooltips (can be use to show number of item in each region for example);
tooltipArrowHeight : 5,		// Integer: height of the arrow under the tooltip; is set by border-width of the .css-map li a .tooltip-arrow;
cities : false,				// Boolean: display cities on the map;
visibleList : false,		// Boolean: show a list of regions;
loadingText : 'Loading ...',// Sting: text of the preloader; HTML tags allowed;

// Multiple Click mode
multipleClick : false,	 	// Boolean: Multiple Click mode;
searchUrl : 'search.php',	// String: URL to the search engine; in the Multiple Click mode search link is displayed under the map;
searchLink : 'Search',	 	// String: Name of the search link;
searchLinkVar : 'region',	// String: variable passing to the search engine;
searchLinkSeparator : '|', 	// String: separator of the values passed to the search engine; => ?region=value1|value2|value3
clicksLimit : 0,			// Integer: limited number of clicks; 0 - unlimited clicks;
clicksLimitAlert : 'You can select only %d region! || regions!',
							 // String: error message when the clicks limit has been reached;
							 // syntax: [beginning of sentences] %d [singular] || [plural] - where %d is a number of clicks (added by script);

// List of addresses
agentsListId : '',			// Selector: ID of the list of agents/addresses; must start with a hash (#) mark;
agentsListOnHover : false,	// Boolean: show and hide agent/address on hover;
agentsListSpeed : 0,		// Integer: fade in/fade out delay in miliseconds; 0 - no fade effect;
							// doesn't work when the agentsListOnHover mode is on;

// custom events
'onHover' : function(e){},			// Callback: function(listItem) - invoked when the mouse pointer enters a region and passing a current list item element;
'unHover' : function(e){},			// Callback: function(listItem) - invoked when the mouse pointer leaves a region and passing a current list item element;
'onClick' : function(e){},			// Callback: function(listItem) - invoked when region is clicked and passing a current list item element;
'onSecondClick' : function(e){},	// Callback: function(listItem) - invoked when region is clicked second time and passing a current list item element;
'onLoad' : function(e){}			// Callback: function(mapObject) - invoked when map is fully loaded and passing a mapObject; => $('#map-europe');

Default features

This map is based on well-known CSS sprites. The jQuery is used to simplify the markup and adds additional functionality, as activated region, multipe clicks etc. The map script allows to:

  • - highlight or activate one region and reference to a page in the link,
  • - in the Multiple Click mode allows to select several regions and pass their values to the search engine,
  • - show or hide list of addresses (agents) in selected region,
  • - navigate and activate region using a keyboard,
  • - display simple list of regions when user disable JavaScript.

Limitations

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

Supported browsers

This map has been successfully tested in:

  • Chrome 1+
  • Firefox 3.6+
  • Internet Explorer 7+
  • Opera 9+
  • Safari 3+
  • mobile Safari (iPhone, iPod Touch, iPad)

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 the tooltips in the IE7 and Firefox below 3.6.

You can force it to work in the IE6 (SP2) by using GIF files instead of transparent PNG.

The CSS - Tips and tricks

The basics

By CSS style sheets you can customize almost any map element. You can edit them in the default map's CSS file (cssmap-europe.css) or in the style sheet of your site. As you can see, there is nothing more than CSS rules you should be familiar with.

Styling 'tooltips'

By default names of the regions are displayed as a 'tooltip' with arrow. You can customize it by style rules for the .css-map li a, #map-tooltip element:

.css-map > li a,.css-map > li a:hover,#map-tooltip,.cssmap-tooltip-content{
  background: #111;
  background: rgba(0,0,0,.8);
  color: #eee;
  font: normal 13px 'Lucida Grande',Arial,sans-serif;
  padding: .5em 1.2em;
  text-align: center;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
  -moz-border-radius: .6em;
  -ms-border-radius: .6em;
  -webkit-border-radius: .6em;
  border-radius: .6em;
 }

..arrow of the "sticky" tooltips can by customized by .css-map li a .tooltip-arrow

 /* tooltip arrow; when you change its size don't forget to set tooltipArrowHeight variable in the cssMap(); function */
 .css-map > li a .tooltip-arrow{
  bottom: -5px; /* must be the same as a border-width */
  border: solid;
  border-color: #111 transparent;
  border-color: rgba(0,0,0,.8) transparent;
  border-width: 5px 5px 0 5px; /* this's a height of the arrow */
  margin-left: -5px; /* must be the same as a border-width */
 }
 .css-map > li a.tooltip-right .tooltip-arrow{
   margin-right: -5px; /* must be the same as a tooltip-arrow border-width */
  }
 .css-map > li a.tooltip-top .tooltip-arrow{ /* set tooltip under the arrow */
   border-width:0 5px 5px 5px;
   top: -5px;
  }

Styling visible list of regions

If you enable a visible list of regions you can customize its link by #map-europe .map-visible-list a

#map-europe .map-visible-list a{
  /* default link style */

 }
#map-europe .map-visible-list a:hover,
#map-europe .map-visible-list a:focus,
#map-europe .map-visible-list li.focus a{
  /* selected link (region) */

 }
#map-europe .map-visible-list a:active,
#map-europe .map-visible-list li.active-region a{
  /* active link (region) */

 }

Styling search link (in the Multiple Click mode)

The search link will display under the map in the Multiple Click mode and can by styled by .map-search-link

.map-search-link{
 /* default link style */

}
.map-search-link:hover,
.map-search-link:focus{
 /* selected link */

 }
.m540 .map-search-link{
 /* style for a specific map size */

 }

Hiding pre-loader

If you want to hide a pre-loader when map is not loaded use these rules (must be set before map's style sheet):

.map-loader{ display: none; }

Hiding region's names before script is loaded

#map-europe li a{
  margin: -9999em 0 0 0;
  position: absolute;
 }

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

Maps in the responsive designs

We all love the responsive designs and other goodness brought us by CSS3.
So, how you can modify the CSS to work with @media queries?

In the CSS file you'll find styles for all available map sizes. All you need to do is wrap them in the @media rules and replace all size classes .m123 to the one used in your project.

/* sample usage of the @media queries for the 960px wide map */

@media screen and (min-width: 500px){
  /* size: 540 */
  .m960{width:540px} .m960 .europe,.m960 .europe .bg,.m960 .europe-cities{background:transparent url('eu-540.png') no-repeat -1230px 0} /* etc. */
  .m960 .eu1.focus .bg,.m960 .eu1.active-region .bg{height:47px;left:232px;top:68px;width:27px} .m960 .eu1 /* etc. */
  .m960 .eu1 a{left:253px;top:101px} .m960 .eu2 a{left:112px;top:205px} .m960 .eu3 a{ /* etc. */
 }

@media screen and (min-width: 750px){
  /* size: 750 */
  .m960{width:750px} .m960 .europe,.m960 .europe .bg,.m960 .europe-cities{background:transparent url('eu-750.png') no-repeat -890px 0} /* etc. */
  .m960 .eu1.focus .bg,.m960 .eu1.active-region .bg{height:70px;left:353px;top:107px;width:40px}.m960 .eu1 /* etc. */
  .m960 .eu1 a{left:380px;top:151px} .m960 .eu2 a{left:168px;top:308px} .m960 .eu3 a{ /* etc. */
 }

@media screen and (min-width: 960px){
  /* size: 960 */
  .m960{width:960px} .m960 .europe,.m960 .europe .bg,.m960 .europe-cities{background:transparent url('eu-960.png') no-repeat -1106px 0} /* etc. */
  .m960 .eu1.focus .bg,.m960 .eu1.active-region .bg{height:93px;left:464px;top:136px;width:53px}.m960 .eu1 /* etc. */
  .m960 .eu1 a{left:497px;top:192px} .m960 .eu2 a{left:214px;top:403px} .m960 .eu3 a{ /* etc. */
 }

Some mobile devices have limited the maximum size of the downloaded image, so in some cases (BlackBerry, first generation iPhone etc), you will see a list of regions instead of the map larger then 750px wide.

You should customize a map image to your needs!

Editing a map file

Best software to edit the .psd source files is the Adobe Photoshop or the Adobe Fireworks ..but you can also use the free online editor: Pixlr!

Layer styles

You can freely edit the layer styles of the map, but:

  1. Do not change position of layers and shapes! - by default position of all layers is locked.
  2. Use a 'Layer Style' tool to change fill color, shadows, line color etc.
  3. Position of the line (stroke) must be set to the center!
  4. The shadow (Drop Shadow) and the outer glow (Outer Glow) of regions can't be wider than 10px (or 5px in the 210px wide maps).
  5. Before you save a map file don't forget to hide the background layer (.bg).
  6. The map file must be saved [Ctrl+Alt+Shift+S] as the PNG-24 Transparent!
  7. Don't remove the 'signature' layer.

Of course you can hide or show layers with lakes and rivers if any.
Also you can use the 'map area' layer to put anything you want on the map and display it instead of the cities labels.

Use pngquant, ImageOptim or any other software to optimize PNG files.

Don't forget to optimize a map file before you send it to the server!

Visible list of regions

To display a visible list of regions just add a visibleList parameter to the cssMap(); function:

$('#map-europe').cssMap({
  'visibleList' : true
 });

The script duplicate list of regions with all its content and functionality. Second list is placed just under the main list and has .map-visible-list class.

The second list can be easily styled and positioned relative to the map: below, left, right or in columns. Learn more about styling a visible list of regions in 'The CSS - tips and tricks' section.

The Multiple Click mode

Allows to activate several regions, and pass their values to the search engine script by the region variable. To activate the Multiple Click mode just add a multipleClick parameter to the cssMap(); function:

$('#map-europe').cssMap({
  'multipleClick' : true
 });

In the list of regions use secure URLs, example: search.php?region=region-name instead of #region-name.
That allows passing variables to the search engine for users with disabled JavaScript.

The values are assigned to the search link, according to the scheme: search.php?region=value1|value2|value7

Variables sent to the PHP script can be easily get by the explode() function:

<?php
$regions=$_GET['region'];
 print_r(explode('|',$regions));
?>

By default you can select all regions, but if you want, you can set a clicks limit:

$('#map-europe').cssMap({
  'multipleClick' : true,
  'clicksLimit' : 3
 });

Below the map will be shown a link to the search engine, by default: <a href="search.php" class="map-search-link">Search</a>, but it can be customized by several parameters:

$('#map-europe').cssMap({
  multipleClick : true,		// enable Multiple Click mode;
  searchUrl : 'serach.php',	// URL to the search engine;
  searchLink : 'Search', 	// Name of the search link;
  searchLinkVar : 'region', // Variable passing to the search engine;
  searchLinkSeparator : '|'	// Separator of the values passed to the search engine; => ?region=value1|value2|value3
 });

List of addresses

Probably the main usage of the map should be possibility to show or hiding the list of addresses of the agents (offices) in the regions.

To activate a list of addresses just add a agentsListId parameter to the cssMap(); function:

$('#map-europe').cssMap({
  agentsListId : '#addresses'

  // optional: fade in/fade out delay in miliseconds;
  agentsListSpeed : 500,
  // optional: show and hide agent/address on hover;
  agentsListOnHover : true,
 });

The value of this parameter must be the ID of the list of agents/addresses and start with the hash (#) mark.

In the list of addresses (shown on the right) id of each list item must be the same as the link in the list of regions. That should works as any internal navigation when JavaScript is disabled.

Create a list of addresses, according to the scheme:

<div id="addresses">
 <ul>
  <li id="albania">
  <!-- Albania -->

  </li>
  <li id="andorra">
  <!-- Andorra -->

  </li>
  <li id="bosnia-and-herzegovina">
  <!-- Bosnia and Herzegovina -->

  </li>
 </ul>
</div>

Troubleshooting

Error: map size must be set!

Check size parameter in the cssMap(); function:

/* availalbe sizes:
 * 250, 320, 430, 540, 650, 750, 850, 960, 1280 and 1450; 
 */
$('#map-europe').cssMap({size: 960});

Not working! The map doesn't appear!

  1. Make sure you've uploaded the cssmap-europe folder on your server.
  2. Your page can't be in the quirks mode - the !doctype must be set!
  3. Check path to the CSS file.
  4. Check path to the folder with maps.
  5. Check names of the PNG map files.
  6. Once again check that the PNG files are in the same folder as the CSS file ( cssmap-europe.css )

Before you write for a help

If you're using another JS library, like a MooTools or Prototype make sure there is no conflict between them. For more information, see the jQuery documentation: Using jQuery with other libraries.

Always use a recent version of jQuery!

Check if there are no errors in other scripts and make sure your code is written correctly. Errors in the scripts can be found in 'Error Console' in your browser or by the add-ons like Firebug for Firefox. Also use the W3C Validator to check your code.

Royality Free License

Map is distributed under royality free license and can be used (also croped, modified or manipulated) in all kinds of web creations as websites, templates and themes (personal, commercial or client projects) without any extra fees.
Don't sub-license, resell, transfer or share this map in downloadable format. Read full license agreement

Contact

If you have any questions regarding setup, licensing, payments, or would like to order custom map of any regions, feel free to contact me at or Tweet @CSSMapplugin

I'm very patient, but remember: I'm not here to learn you basics of the HTML or Photoshop. If you're using any content management system (Joomla, Drupal, WordPress etc.) learn its documentation first!