Creating a Clickable World Map with jQuery
Posted: January 21st, 2012 | Author: Julia | Filed under: Tips and Tricks | Tags: clickable map, highlight, jQuery, world map | No Comments »Usually I use Google Maps for websites and quite happy with their service. But one day I needed to implement the clickable world map with the possibility to highlight countries.
The widget itself consists of two parts:
- a set of polygon data representing the countries of the world – to create a layer above that responds to all mouse movements;
- a layer with a background image below.
So all coordinates are related with the background image and every area has its hyperlink.
I take as a base David Lynch’s maphiligh jQuery plugin for my sweet clickable world map.
It’s easy to customize:
The default settings for all areas:
-
$('.map').maphilight(
-
{
-
-
fill: true,
-
fillColor: '044572',
-
fillOpacity: 0.4,
-
stroke: true,
-
strokeColor: '044572',
-
strokeOpacity: 1,
-
strokeWidth: 1,
-
fade: true,
-
alwaysOn: false,
-
neverOn: false,
-
groupBy: false,
-
wrapClass: true,
-
shadow: false,
-
shadowX: 0,
-
shadowY: 0,
-
shadowRadius: 6,
-
shadowColor: '000000',
-
shadowOpacity: 0.8,
-
shadowPosition: 'outside',
-
shadowFrom: false
-
}
-
);
For the particular map area (’Ukraine’ country on my map):
-
data-maphilight='{"strokeColor":"C30C30","strokeWidth":1,"fillColor":"C30C30","fillOpacity":0.6}'
The main problem with the world highlighted map for me was a lack of a pretty image, that’s why I designed it by myself. Feel free to download the result.
Live example: click here>>
Related post: How to Print Google Maps
Leave a Reply