About design and nearby

Creating a Clickable World Map with jQuery

Posted: January 21st, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , | 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:

  1. $('.map').maphilight(
  2.     {
  3.        
  4.         fill: true,
  5.         fillColor: '044572',
  6.         fillOpacity: 0.4,
  7.         stroke: true,
  8.         strokeColor: '044572',
  9.         strokeOpacity: 1,
  10.         strokeWidth: 1,
  11.         fade: true,
  12.         alwaysOn: false,
  13.         neverOn: false,
  14.         groupBy: false,
  15.         wrapClass: true,
  16.         shadow: false,
  17.         shadowX: 0,
  18.         shadowY: 0,
  19.         shadowRadius: 6,
  20.         shadowColor: '000000',
  21.         shadowOpacity: 0.8,
  22.         shadowPosition: 'outside',
  23.         shadowFrom: false
  24.     }
  25.         );

For the particular map area (‘Ukraine’ country on my map):

  1. 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: check the example >>

Related post: How to Print Google Maps

Share Button

Check Related Posts:


Leave a Reply


  • five − = 1

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now