jQuery clickable map

Apr 07, 2014 in Maps 17284 views

Download

Overview
Documents

User Rating: 3.7/5 ( 3 votes)

Your Rating:

Free interactive map of forty-seven countries of the European continent. It's a better way to convert a list of regions into a stylish clickable map without a Flash Player or any external plug-ins ..just a well known CSSsprites ..which works in all modern browsers ..even on the mobile devices as iPhone or iPad.

ten maps: 250, 320, 430, 540, 650, 750, 850, 960, 1280 and 1450px wide (including gaps) with .psd source files
multiple click mode
list of agents / addresses
onClick / onHover custom events
sticky or floating tooltips
visible list of regions
marked cities
preloader

Interactive maps made for web designers

These clickable maps were created by using proven and well-known properties of old CSS2.1 With a little help of jQuery (mostly to simplify the markup) the CSS style sheets available in the package, allows you to convert a simple list of links into the interactive map.

The script allows you to:

reference to a page in the link,
show or hide the addresses of agents in selected region,
select several regions and pass their values to the search engine,
onClick / onHover custom events.

Almost each element of the map can be customized by a CSS style sheets. Detailed instructions of setup, configuration, editing and nformations about updates (with a direct link to the free package with files) you will find on the demo page available in the downloaded package.

Accessibility

The script was written with a view to maximizing the accessibility on the different devices, as well as for the disabled or who use the keyboard to navigate on the page (tabindex available).

In browsers with disabled JavaScript and the old mobile phones, user will see a simple list of links. In the same way, map will be treated by screen readers and printers.

But most importantly, the map doesn't need a Flash Player or any external plugins.

Supported devices: desktop computers, tables, smartphones, cell phones and printers

Editable source files

In the package, except the style sheets and scripts, you will find easy to edit .psd source files for each map size, so you can adjust the appearance of the map to your needs.

To help editing, each region (shape) is placed into separate layer and grouped. Also in the source files I marked regional capitals, major cities, lakes and rivers.

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

Groups and layers in the .psd source files

Royality Free License

Maps are 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 these maps in downloadable format.

..and one more thing

If you have any questions about setup, licensing, payments, or would like to order a custom map of any regions, feel free to contact me at

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.

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

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:

Do not change position of layers and shapes! - by default position of all layers is locked.
Use a 'Layer Style' tool to change fill color, shadows, line color etc.
Position of the line (stroke) must be set to the center!
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).
Before you save a map file don't forget to hide the background layer (.bg).
The map file must be saved [Ctrl+Alt+Shift+S] as the PNG-24 Transparent!
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 thecssMap(); 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 amultipleClick 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 thecssMap(); 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>

JS Tutorial