Script options
Options object must be pass as the first parameter of the $.CSSMap(); function.
The "size" option must be set, all other options add as shown:
$("#map-europe").CSSMap({
// MAP SIZE MUST BE SET;
size: 1450,
// OTHER OPTIONS;
cities: true,
mapStyle: "vintage"
});Defaults
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.
Multiple Clicks mode
Allows to activate (click) several regions, and pass their values to the search engine script.
List of addresses
Allows to show/hide any informations assigned to the region.
Additional markup required
There’s a second list required, where ID attribute of each list item is the same as the hash link in the main list of regions. That should works as any other internal navigation when JavaScript is disabled.
You’ll find the source code of the plain list of addresses in the downloaded package.
The list of addresses may be used to show address of the office, or distributor, or any other region related informations … and even other CSSMap.
List may be freely styled with CSS as any other unordered list.
Markers over the map
Allows to display markers (pins) over the map.
Additional markup required
Sample list of markers:
<!-- CSSMap MARKERS -->
<div id="demo-markers">
<ul class="cssmap-pins">
<li class="cssmap-pin" data-cssmap-coords="780,700">
<div class="cssmap-tooltip-content">
Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
</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">
Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
</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 -->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.
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.
Custom events
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 stylesheet to the page.
The CSSMap plugin requires jQuery 1.7 and/or newer.
It’s always recommended to use the most recent version of the jQuery.
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.
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.
Troubleshooting
The map doesn’t appear
- Make sure you’ve uploaded the
cssmap-MAPNAMEfolder onto your server. - Check version of jQuery linked. The CSSMap plugin requires jQuery 1.7 and/or newer.
- Check if there’re no other versions of jQuery loaded.
- Check if there’re no conflicts with other JavaScript libraries as Mootools or Prototype. Learn more about the jQuery.noConflict() mode.
- Check if your website isn’t in the quirks mode. The
!doctypemust be set! - Check if there’re no errors in the “Error console” of your browser.
- Check if your source code is valid and contains no errors.
- Check paths to the included files.
- Check paths to the map images – .PNG files must be in the same folder as the map’s stylesheet.
Doesn’t work on mobile devices
Most mobile devices limits the size of an image that can be downloaded.
If you’re not using the responsive: "auto" option, the size of map’s image may be too large to download.