// default function call with specified size;
$('#map-polska').cssMap({'size' : 810});$('#map-polska').cssMap({
'size': 660, // set map size to 660px wide;
'tooltips': false, // hide tooltips;
'cities': true // display cities;
});$('#map-polska').cssMap({
'size': 500, // set map size to 500px wide;
'multipleClick': true, // enable Multiple Click mode;
'clicksLimit': 3, // three clicks limit;
'searchLink': 'Szukaj' // rename search button;
});$('#map-polska').cssMap({
'size': 340, // set map size to 340px wide;
'visibleList': true, // show list of regions (customzied list shown);
'cities': true // display cities
});/* list of regions can be placed next to the map by these sample CSS rules: */
.css-map-container.m340{
width: 545px; /* must be a sum of the map and visible list widths and paddings */
}
.m340 .css-map,.m340 .map-visible-list{
display: inline-block; /* for IE7 use display:inline; zoom:1; */
vertical-align: top;
}
.m340 .map-visible-list{
margin-left: 20px;
width: 180px;
}
.m340 .map-visible-list li{ width: 100%%; }// sample usage of the onClick and onHover options (click on the map to run onClick function)
$('#map-polska').cssMap({
'size': 500, // set map size to 340px wide;
'onClick': function(e){
var link = e.children('a').attr('href'), // get link's URL;
text = e.children('a').text(), // get text of the link;
className = e.attr('class').split(' ')[0]; // get class name of the list item;
}
});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-polska/cssmap-polska.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://dl.dropbox.com/u/18926497/jquery.cssmap.js"></script> Finally you can initialize the cssMap(); function with a specified map size:
<script type="text/javascript">
$(function($){
$('#map-polska').cssMap({'size' : 810});
});
</script>* the script is stored in the Cloud, so you'll always have access to the latest version. Always use a recent version of jQuery!
The markup
Place following list of regions somewhere in the <body> tag of your page.
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-polska">
<ul class="polska">
<li class="pl1"><a href="#dolnoslaskie">Dolnośląskie</a></li>
<li class="pl2"><a href="#kujawsko-pomorskie">Kujawsko-pomorskie</a></li>
<li class="pl3"><a href="#lubelskie">Lubelskie</a></li>
<li class="pl4"><a href="#lubuskie">Lubuskie</a></li>
<li class="pl5"><a href="#lodzkie">Łódzkie</a></li>
<li class="pl6"><a href="#malopolskie">Małopolskie</a></li>
<li class="pl7"><a href="#mazowieckie">Mazowieckie</a></li>
<li class="pl8"><a href="#opolskie">Opolskie</a></li>
<li class="pl9"><a href="#podkarpackie">Podkarpackie</a></li>
<li class="pl10"><a href="#podlaskie">Podlaskie</a></li>
<li class="pl11"><a href="#pomorskie">Pomorskie</a></li>
<li class="pl12"><a href="#slaskie">Śląskie</a></li>
<li class="pl13"><a href="#swietokrzyskie">Świętokrzyskie</a></li>
<li class="pl14"><a href="#warminsko-mazurskie">Warmińsko-mazurskie</a></li>
<li class="pl15"><a href="#wielkopolskie">Wielkopolskie</a></li>
<li class="pl16"><a href="#zachodniopomorskie">Zachodniopomorskie</a></li>
</ul>
</div>Adjust map to your needs
List of all script options available to customize a map (default values listed):
'size' : 810, //String: map width; availalbe sizes: 170, 240, 340, 500, 660 and 810;
'tooltips' : true, //Boolean: display tooltips;
'tooltipArrowHeight' : 5, //Integer: height of the arrow under the tooltip; is set by border-width of the .css-map li a .tooltip-arrow;
'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;
'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);
'cities' : false, //Boolean: display cities on the map;
'visibleList' : false, //Boolean: show a list of regions;
'agentsListId' : '', //Selector: ID of the list of agents/addresses; must start with a hash (#) mark;
'loadingText' : 'Loading ...', //Sting: text of the preloader;
'onHover' : function(e){}, //Callback: function(listItem) - Fires when the mouse pointer enters a region and passing a current list item element;
'onClick' : function(e){}, //Callback: function(listItem) - Fires when region is clicked and passing a current list item element;
'onLoad' : function(e){} //Callback: function(mapObject) - Fires when map is fully loaded and passing a mapObject; => $('#map-polska');
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 all map elements. You can edit them in the default map CSS file (cssmap-polska.css) or in the style sheet of your site. As you can see it's nothing more than 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 a .css-map li a element:
.css-map li a{
background: #111; /* background color for older browsers */
background/span>: rgba(0,0,0,.8); /* transparent background in modern browsers */
color: #eee; /* text color */
font: normal 13px 'Lucida Grande',Arial,sans-serif;
padding: .5em 1.2em;
text-align: center;
text-shadow: 0 1px 0 #000;
white-space: nowrap; /* prevents text braking */
-moz-border-radius: .6em;
-ms-border-radius: .6em;
-o-border-radius: .6em;
-webkit-border-radius: .6em;
border-radius: .6em;
}..arrow can by customized by .css-map li a .tooltip-arrow
.css-map li a .tooltip-arrow{
bottom: -5px; /* must be the same as border-width */
border: solid;
border-color: #111 transparent; /* border color for older browsers */
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 border-width */
}Styling visible list of regions
If you enable a visible list of regions you can customize its link by .map-visible-list a
.map-visible-list a{
/* default link style */
}
.map-visible-list a:hover,
.map-visible-list a:focus,
.map-visible-list li.focus a{
/* selected link (region) */
}
.map-visible-list a:active,
.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 and the error message
If you want to hide a pre-loader or the error message when map is not loaded use these rules (must be set before map's style sheet):
.map-loader{ display: none; }
.map-error{ display: none; }Hiding the error message can be helpful when you're using a @media rules and the map doesn't have required size.
Hiding region's names before script is loaded
#map-polska 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!
CSS only version ...yes, It's possible!
The first version of this map was created using only a pure CSS, but the markup was full of <span /> tags. If for some reason you don't want to use the script you can convert it to pure CSS keeping these rules:
Step 1. Backup all map files.
Step 2. Add classes to the map container and list of regions:
<div id="map-polska" class="css-map-container m810">
<ul class="polska css-map">Step 3. Add some spans to the list items
In the HTML each list item must have four elements:
<a />- link to the region,<span class="m" />- include all spans needed to make a clickable area,<em />or any allowed tag with the region name,<span class="bg" />- here we'll put region image (CSS sprites).
<li>
<a href="#dolnoslaskie" class="pl1">
<span class="m">
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
<span class="s4"></span>
<span class="s5"></span>
<span class="s6"></span>
<span class="s7"></span>
<span class="s8"></span>
<span class="s9"></span>
<span class="s10"></span>
</span>
<em>Dolnośląskie
<span class="tooltip-arrow"></span>
</em>
<span class="bg"></span>
</a>
</li>So, how many spans I will need to make a clickable area?
First, open the CSS file and find last lines (between 'really, DO NOT EDIT THIS!' and 'end of the maps' comments); select them and replace } . to }\r. (use Find menu [Ctrl+F] or [Cmd+F] in your code editor and make sure to check 'Selected text only').
Now on each line you'll have all spans for the list item, just go to the end of the line and get last class number. For example: .li1 .s23{} means that you'll need 23 spans.
Step 4. Modify the CSS file
Here will be some fun. Open a default map CSS file (cssmap-polska.css)
The tooltip is now an <em /> tag, so you have to relpace some <a /> styling to the <em /> by replacing a .css-map li a{:
99 .css-map li em{
100 .css-map li a:focus em{
101 .css-map-container span,.css-map li a em{Same thing you have to do with default tooltip styling in the first lines of the CSS file:
2 .css-map li a em{21 .css-map li a em .tooltip-arrow{Now select all lines from the first /* size: comment and use a Find menu [Ctrl+F] or [Cmd+F] to replace all .focus .bg to:
:focus .bg..relpace .active-region .bg to:
:active .bg..and .pl1 a{ to:
.pl1 em{Now remove link to the scripts in your HTML file, save all modified documents and enjoy your pure CSS map!
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.
113 /* sample polskage of @media queries for 960px wide map */
114
115 @media screen and (min-width:500px){
116 /* size: 540 */
117 .m960{width:540px} .m960 .country-name,.m960 .country-name .bg,.m960 .country-name-cities{background:transparent url('li-540.png') no-repeat -1230px 0} ...
118 .m960 .li1:hover .bg,.m960 .li1.focus .bg,.m960 .li1.active-region .bg{height:47px;left:232px;top:68px;width:27px} .m960 .li1 ...
119 .m960 .li1 a{left:253px;top:101px} .m960 .li2 a{left:112px;top:205px} .m960 .li3 a{ ...
120 }
121
122 @media screen and (min-width:750px){
123 /* size: 650 */
124 .m960{width:750px} .m960 .country-name,.m960 .country-name .bg,.m960 .country-name-cities{background:transparent url('li-650.png') no-repeat -890px 0} ...
125 .m960 .li1:hover .bg,.m960 .li1.focus .bg,.m960 .li1.active-region .bg{height:70px;left:353px;top:107px;width:40px}.m960 .li1 ...
126 .m960 .li1 a{left:380px;top:151px} .m960 .li2 a{left:168px;top:308px} .m960 .li3 a{ ...
127 }
128
129 @media screen and (min-width:960px){
130 /* size: 750 */
131 .m960{width:960px} .m960 .country-name,.m960 .country-name .bg,.m960 .country-name-cities{background:transparent url('li-750.png') no-repeat -1106px 0} ...
132 .m960 .li1:hover .bg,.m960 .li1.focus .bg,.m960 .li1.active-region .bg{height:93px;left:464px;top:136px;width:53px}.m960 .li1 ...
133 .m960 .li1 a{left:497px;top:192px} .m960 .li2 a{left:214px;top:403px} .m960 .li3 a{ ...
134 }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.
- Before you save a map file don't forget to hide a background layer (.bg).
- The map file must be saved [Ctrl+Alt+Shift+S] as a PNG-24 Transparent!
- Don't remove a 'signature' layer.
Of course you can hide or show layers with cities, lakes and rivers if any.
Visible list of regions
To display a visible list of regions just add a visibleList parameter to the cssMap(); function:
$('#map-polska').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-polska').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-polska').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-polska').cssMap({
'multipleClick' : true,
'searchUrl' : 'serach.php', // URL to the search engine;
'searchLink' : 'Szukaj', // Name of the search link;
'searchLinkVar' : 'region' // Variable passing to the search engine;
'clicksLimit' : 0, //Integer: limited number of clicks; 0 - unlimited clicks;
'clicksLimitAlert' : 'You can select only %d region! || regions!'
//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
Probably the main polskage 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-polska').cssMap({
'agentsListId' : '#addresses'
});The value of this parameter must be the ID of the list of agents/addresses and start with a 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="first-region">
<!-- agent address in the first region -->
</li>
<li id="second-region">
<!-- agent in the second region -->
</li>
</ul>
</div>Troubleshooting
Error: Incorrect map size!
Check size parameter in the cssMap(); function:
// availalbe sizes: 170, 240, 340, 500, 660 and 810;
$('#map-polska').cssMap({'size': 810});Error: Map image not found!
- Check path to the CSS file.
- Check path to the folder with maps.
- Check names of the PNG map files.
- Make sure you upload a folder with maps to the server.
- Once again check that PNG files are in the same folder as a CSS file.
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. It can be used with no limits on time, number of copies and geographical location. This map can be used in all kinds of web creations as websites, templates and themes (private or commercial) without any extra fees.
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 contact@winstonwolf.pl