CodeNet / Языки программирования / Java Script / Графика
Интерактивная карта мира - jQuery плагин
Интерактивная карта мира - jQuery плагин
Дата: 19 ноября 2011 года
Небольшой jQuery плагин для отображения интерактивный карты мира. Карта построена на использовании SVG и работет в браузерах MSIE 9+, Firefox 3+, Chrome 3+, Safari 3+, Opera 9+.
- Текущая версия: 2.1. Скачать (zip);
- Демонстрация.
Пример простого подключения:
<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>
Список возможных настроек:
width
Ширина карты в пикселях. Если параметр не задан, используется ширина контейнера.
height
Высота карты в пикселях. Если параметр не задан, используется высота контейнера.
top
Смещение от верхнего края в условных единицах. Используется для частичного отображения только карты, например Европа, Азия, Америка. 100 – отступ 50%, 50 – отступ 25%. 200 – отступ 75% карты и т.п.
left
Смещение от левого края в условных единицах.
right
Смещение от правого края в условных единицах.
bottom
Смещение от нижнего края в условных единицах.
Пример. Карта Европы:
<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
Обработчик кликов по странам. В качестве параметра обработчику передается ISO код страны.
Пример:
<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>
overhandler
Обработчик наведения курсора мыши на страну (onmouseover). В качестве параметра обработчику передается ISO код страны.
outhandler
Обработчик отведения курсора мыши с страны (onmouseout). В качестве параметра обработчику передается ISO код страны.
c
Объект содержащий список стран, которые нужно выделить на карте. Объект содержит постфикс стиля.
Пример:
<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>
В примере к странам BY и DE применяется стиль worldmap_2, а к странам RU и CA стиль worldmap_1. Результат работы выглядит следующим образом:
Оставить комментарий
Комментарии
Подскажите как в данный код можно добавить возможность всплывающих подсказок при наведении на страну с произвольным текстом и как сделать, что при нажатии на страну мы переходили на новую страницу с описанием.
Спасибо.