CODEWITHSUNDEEP
jquerysvg
BAD_SEED
BAD_SEED

Reputation: 5056

Make a linkable map starting from svg image

I have this svg image. I would, using jQuery's mapHighlight, realize something that look like this. The final result should be zoomable, without great loss of definition, the quality of 3rd link is ok. How I can realize that? In mapHiglight documentation svg aren't treated.

Upvotes: 1

Views: 1106

Answers (2)

EZMapdesign
EZMapdesign

Reputation: 203

If you don't want to spend too much time creating such maps, but you still want to achieve something beautiful, I can recommend my application that lets you create clickable country maps.

Currently the app features 16 countries, and states and cities and maps are being added continously.

Upvotes: 0

methodofaction
methodofaction

Reputation: 72385

I'm unfamiliar with jQuery mapHighlight, but by the looks of it it seems that you it doesn't extract any data from the SVG, you must define the hover areas yourself. You could automate this with some script, but there's a much simpler and robust approach: just use CSS:

polygon:hover {
  fill: #415262; 
}​

I'm unfamiliar with Italy's geography, but if several polygons form part of a province you can wrap them in a <g> element and then do...

g:hover polygon {
  fill: #415262; 
}​

See a demo here: http://jsfiddle.net/EaQjD/

Upvotes: 2

Related Questions