CodeNet / Языки программирования / Java Script / Графика
CodeNet / Языки программирования / Java Script / Объекты
Интерактивная карта мира на 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>
overandler
Обработчик наведения курсора мыши на страну (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. Результат работы выглядит следующим образом.
Оставить комментарий
Оставлять комментарии могут только зарегистрированные пользователи.
Если вы не являетесь зарегистрированным пользователем, то вам необходимо зарегистрироваться. Регистрация бесплатна. Если вы уже зарегистрированы на CodeNet, то вам необходимо ввести логин и пароль в верхней (Alt-U) части страницы.
Комментарии
1. ahtubansk / 06 мая 2012, 15:16:35
Спасибо. Очень помогло. Я в JS не силен, но есть необходимость создания интерактивной карты мира.Подскажите как в данный код можно добавить возможность всплывающих подсказок при наведении на страну с произвольным текстом и как сделать, что при нажатии на страну мы переходили на новую страницу с описанием.
Спасибо.
2. XanderBass / 02 июля 2011, 19:20:12
Жаль старые браузеры не распознают SVG. А то было бы универсальное решение для навигации по странам. Если доработать при помощи, скажем, jQuery, мощнейшее средство получится.2.1. mike / 21 ноября 2011, 15:05:28
http://www.codenet.ru/webmast/js/world-map-jquery-rus/