Interactive world map, select countries by mouse

Question

I need to create an interactive world map on the first page of the site, the viewing portal will have a size of 650x200 pixels. Interactivity will include the following: thinking about a country will stand out (countries will be literally filled with “red”, for example) by this country and display the name of the country (preferably text in a div), I will also associate the highlight event with the highlighted color, it will highlight the country when selected.

I find it difficult to find a suitable solution, I refuse to use or study proprietary technology, such as flash, so this is not an option. I created a simple layout using openlayers and a custom map image, but country markers load too slowly in IE6.

Also svg seems too big because I tried to use RaphaelJS, but canceled it when I realized that the world map data is 1.2 MB, which is completely unacceptable for the first page of the site.

I am really at a loss on how I do it, but the last resort is to manually create 250+ (at least many countries) pngs and apply mouseover events to the hot spots in the image ... but this is likely to be a dead end too .. desperately looking solution, any helpful comments would be appreciated!

Answer 1

I finally agreed with RaphaelJS, importing all paths from svg inkscape works amazingly well!

Answer 2

I developed jVectorMap for this purpose.

Answer 3

Why reinvent the wheel. Google Charts is already doing this.

Answer 4

Do you have data on the coordinates of the country somewhere?

If you set up functions for parsing the transferred data and creating 250+ paths this way, it shouldn't be that big.

Answer 5

We developed Highmarts Highmaps to easily solve data visualization problems like this. We also supply a cartographic collection of over 350 cards optimized for size to keep things lightweight.

For an example of detailing (loading a more detailed map with a mouse click) see this demo .

Highmaps is free for non-commercial use.