World map - jQuery plugin
Here is a simple jQuery plugin for building live world map using SVG graphics. Plugin works in all modern browsers. MSIE 9+, Firefox 3+, Chrome 3+, Safari 3+, Opera 9+.
Simple using example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript" src="jquery.svgworldmap-2.1.src.js"></script>
<style type="text/css">
.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
</style>
</head>
<body>
<div id="worldmap" width="640" height="400" style="overflow:hidden;"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#worldmap').SVGWorldMap();
});
});
</script>
</body>
</html>
Configuration options list:
width
Width in pixels. If not set, plugin uses containter width.
height
Height in pixels. If not set, plugin uses containter height.
top
Offset from the top of the map. Used for partial map display such as Europe, Asia and America. 100 - 50% margin, 50 - 25% margin, 200 - 75% margin, etc.
left
Offset from the left of the map.
right
Offset from the right of the map.
bottom
Offset from the bottom of the map.
Exaple. Europe map:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript" src="jquery.svgworldmap-2.1.src.js"></script>
<style type="text/css">
.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
</style>
</head>
<body>
<div id="worldmap" width="640" height="400" style="overflow:hidden;"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#worldmap').SVGWorldMap({
top: 50,
left: 100,
right: 90,
bottom: 140
});
});
</script>
</body>
</html>
clickhandler
Country click handler. One parameter passsed - ISO country code.
Click handler example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript" src="jquery.svgworldmap-2.1.src.js"></script>
<style type="text/css">
.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
</style>
</head>
<body>
<div id="worldmap" width="640" height="400" style="overflow:hidden;"></div>
<script type="text/javascript">
function countryclick(tld) {
alert(tld);
}
$(document).ready(function(){
$('#worldmap').SVGWorldMap({
clickhandler :'countryclick'
});
});
});
</script>
</body>
</html>
overandler
Country mouse over handler. One parameter passsed - ISO country code.
outhandler
Country mouse out handler. One parameter passsed - ISO country code.
c
Object containing the list of selected countries. The object contains a postfix of country style.
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript" src="jquery.svgworldmap-2.1.src.js"></script>
<style type="text/css">
.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
.worldmap_1 {fill:#f08080;stroke:black;stroke-width:0.5px;}
.worldmap_1:hover {fill:#ff0000;stroke:black;stroke-width:1px;}
.worldmap_2 {fill:#8080f0;stroke:black;stroke-width:0.5px;}
.worldmap_2:hover {fill:#0000ff;stroke:black;stroke-width:1px;}
</style>
</head>
<body>
<div id="worldmap" width="640" height="400" style="overflow:hidden;"></div>
<script type="text/javascript">
function countryclick(tld) {alert(tld);}
$(document).ready(function(){
$('#worldmap').SVGWorldMap({
bottom : 20,
clickhandler : 'countryclick',
c : {BY:2,DE:2,RU:1,CA:1}
});
});
});
</script>
</body>
</html>
In the example style "worldmap_2" applied to countries BY and DE, and style "worldmap_1" is applied to countries RU and CA. You can see result below: