Interactive World Map, highlight countries on mouseover

Question

I need to create an interactive world map on the front page of a site, the view portal will be about 650x200 pixels. The interactivity would include the following, mouse-over a country would highlight (the countries are will literally be filled with "red" for example) that country and display the countries' name (preferably text in a div), I will also be linking the highlighting event with a that will highlight a country when selected.

I am having a difficult time finding a suitable solution, I refuse to use or learn a proprietry technology such as flash so it is not an option. I created a simple mockup using openlayers and a custom map image but the countries' markers load too slowly in IE6.

Also svg seems too large, as I tried to use RaphaelJS, but abondoned it when I realised the world map data is 1.2mb which is totally un acceptable for the front page of a site..

I am really at a loss on how I am going to do this, my last resort is to manually create 250+ (however many countries there are) pngs and apply mouseover events to hotspots in the image... but this is probably going to be a dead end too.. desperately seeking a solution, any helpful comments will be appreciated!

score 19 · Answer 1 · answered May 12 '11 at 17:10

19

I developed jVectorMap for that purpose.

answered May 12 '11 at 17:10

bjornd

22,397
4
57
73

1

You sir, are my savior. – Griffin Jan 13 '14 at 03:21

score 7 · Answer 2 · answered Apr 26 '10 at 21:27

7

Why reinvent the wheel. Google Charts already does this.

answered Apr 26 '10 at 21:27

Diodeus - James MacFarlane

112,730
33
157
176

you sure? i remember taking a look at it and not being convinced, the maps are static, I don't think i can attach JS events? – BrenGG Apr 26 '10 at 21:32
There's an example right on the page I linked to showing a fully interactive world map. – Diodeus - James MacFarlane Apr 26 '10 at 21:36
hmmm. ok ja i remember seeing this a week ago, can't remember why i dropped it, ill take a deeper look in the morning... thanks again – BrenGG Apr 26 '10 at 21:41
Google chart has very limited flexibility, any other suggestions? – BrenGG Apr 27 '10 at 15:33

score 5 · Accepted Answer · answered May 14 '10 at 04:16

5

I finaly settled with RaphaelJS, importing all the paths from an svg in inkscape, works amazingly well!

answered May 14 '10 at 04:16

BrenGG

141
1
1
5

score 1 · Answer 4 · answered Jun 25 '14 at 12:31

We've developed Highmaps, related to Highcharts, to easily solve data visualization problems like this. We also supply a map collection of over 350 maps, optimized for size to keep things lightweight.

For a drilldown example (loading more detailed map on mouse click) see this demo.

Highmaps is free for non-commercial use.

Population history by country Drainage basin of the Meuse river

score 0 · Answer 5 · answered Apr 27 '10 at 15:57

0

Do you have country coordinate data stored somewhere?

If so setting up functions to parse through the passed in data and create 250+ paths should not be that large.

answered Apr 27 '10 at 15:57

Shaunwithanau

575
5
13

i have the coordinates of all the capitals, i made little markers in openlayers but it's too slow in IE6 (20% of the websites' visitors) I ideally want to stick with OpenLayers as a solution as I have grown really fond of it over the last week or two... – BrenGG Apr 27 '10 at 17:00
VML might work for what you want. Since it seems you are most worried about IE6 – Shaunwithanau Apr 28 '10 at 11:40

Interactive World Map, highlight countries on mouseover

5 Answers5

Linked