CodeNet / Языки программирования / Java Script / Графика
CodeNet / Языки программирования / Java Script / Объекты
Интерактивная карта мира на JavaScript
Интерактивная карта мира на JavaScript
Дата: 28 апреля 2011 года
Небольшой JavaScript класс для отображения интерактивный карты мира. Карта построена на использовании SVG и работет в браузерах MSIE 9+, Firefox 3+, Chrome 3+, Safari 3+, Opera 9+.
- Скачать класс – worldmap.js (83,2 Кб, gzip – 31,5 Кб);
- Скачать исходник – worldmap.src.js (86 Кб);
- jQuery плагин.
Конструктор:
где options – объект со списком параметров. Для работы необходимо как минимум три основных параметра:
- element- идентификатор HTML элемента внутрь которого будет вставлена карта;
- width- ширина карты в пикселях;
- height- высота карты в пикселях.
Пример подключения:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="worldmap.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">
var map=new WorldMap({
element : 'worldmap',
width : 640,
height : 400,
});
</script>
</body>
</html>
Параметры:
element
Идентификатор HTML элемента внутрь которого будет вставлена карта. Обязательный параметр.
width
Ширина карты в пикселях. Обязательный параметр.
height
Высота карты в пикселях. Обязательный параметр.
top
Смещение от верхнего края в условных единицах. Используется для частичного отображения только карты, например Европа, Азия, Америка. 100 – отступ 50%, 50 – отступ 25%?. 200 – отступ ? карты и т.п.
Пример. Карта Европы:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="worldmap.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">
var map=new WorldMap({
element : 'worldmap',
width : 640,
height : 400,
top: 50,
left: 100,
right: 90,
bottom: 140
});
</script>
</body>
</html>
left
Смещение от левого края в условных единицах.
right
Смещение от правого края в условных единицах.
bottom
Смещение от нижнего края в условных единицах.
clickhandler
Обработчик кликов по странам. В качестве параметра обработчику передается ISO код страны.
Пример:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="worldmap.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);
}
var map=new WorldMap({
element : 'worldmap',
width : 640,
height : 400,
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="worldmap.js"></script>
<style type="text/css">
.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0e0e0;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">
var map=new WorldMap({
element : 'worldmap',
width : 640,
height : 400,
c : {BY:2,DE:2,RU:1,CA:1}
});
</script>
</body>
</html>
В примере к странам BY и DE применяется стиль worldmap_2, а к странам RU и CA стиль worldmap_1. Результат работы выглядит следующим образом.
Оставить комментарий
Комментарии
работа прекрасная и коллосальная!!!
Подскажите как в данный код можно добавить возможность всплывающих подсказок при наведении на страну с произвольным текстом и как сделать, что при нажатии на страну мы переходили на новую страницу с описанием.
Спасибо.
