Интерактивная карта мира - jQuery плагин

Автор: mike
Дата: 19 ноября 2011 года

Небольшой jQuery плагин для отображения интерактивный карты мира. Карта построена на использовании SVG и работет в браузерах MSIE 9+, Firefox 3+, Chrome 3+, Safari 3+, Opera 9+.

Пример простого подключения:

Код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<scripttype="text/javascript"src="jquery.svgworldmap-2.1.src.js"></script>

<styletype="text/css">

.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
</style>

</head>
<body>

<divid="worldmap"width="640"height="400"style="overflow:hidden;"></div>

<scripttype="text/javascript">
$(document).ready(function(){
     $('#worldmap').SVGWorldMap();
     });
});
</script>
</body>
</html>

Список возможных настроек:

width

Ширина карты в пикселях. Если параметр не задан, используется ширина контейнера.

height

Высота карты в пикселях. Если параметр не задан, используется высота контейнера.

top

Смещение от верхнего края в условных единицах. Используется для частичного отображения только карты, например Европа, Азия, Америка. 100 – отступ 50%, 50 – отступ 25%. 200 – отступ 75% карты и т.п.

left

Смещение от левого края в условных единицах.

right

Смещение от правого края в условных единицах.

bottom

Смещение от нижнего края в условных единицах.

Пример. Карта Европы:

Код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<scripttype="text/javascript"src="jquery.svgworldmap-2.1.src.js"></script>
<styletype="text/css">
.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
</style>
</head>
<body>

<divid="worldmap"width="640"height="400"style="overflow:hidden;"></div>

<scripttype="text/javascript">
$(document).ready(function(){
    $('#worldmap').SVGWorldMap({
        top: 50,
        left: 100,
        right: 90,
        bottom: 140
        });
 });
</script>
</body>
</html>

clickhandler

Обработчик кликов по странам. В качестве параметра обработчику передается ISO код страны.

Пример:

Код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<scripttype="text/javascript"src="jquery.svgworldmap-2.1.src.js"></script>

<styletype="text/css">

.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
</style>

</head>
<body>

<divid="worldmap"width="640"height="400"style="overflow:hidden;"></div>

<scripttype="text/javascript">

function countryclick(tld) {
    alert(tld);
    }

$(document).ready(function(){
    $('#worldmap').SVGWorldMap({
        clickhandler :'countryclick'
        });
    });
});
</script>
</body>
</html>

overhandler

Обработчик наведения курсора мыши на страну (onmouseover). В качестве параметра обработчику передается ISO код страны.

outhandler

Обработчик отведения курсора мыши с страны (onmouseout). В качестве параметра обработчику передается ISO код страны.

c

Объект содержащий список стран, которые нужно выделить на карте. Объект содержит постфикс стиля.

Пример:

Код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<scripttype="text/javascript"src="jquery.svgworldmap-2.1.src.js"></script>

<styletype="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>

<divid="worldmap"width="640"height="400"style="overflow:hidden;"></div>

<scripttype="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. Результат работы выглядит следующим образом:

Оставлять комментарии могут только зарегистрированные пользователи.

Если вы не являетесь зарегистрированным пользователем, то вам необходимо зарегистрироваться. Регистрация бесплатна. Если вы уже зарегистрированы на CodeNet, то вам необходимо ввести логин и пароль в верхней (Alt-U) части страницы.

Источник: http://feedproxy.google.com/~r/codenet/read/~3/kIcb10qgbHg/

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Интерактивная карта мира - jQuery плагин | | 2012-09-13 08:46:44 | | Программирование | | Автор: mike Дата: 19 ноября 2011 годаНебольшой jQuery плагин для отображения интерактивный карты мира. Карта построена на использовании SVG и работет в браузерах MSIE 9+, Firefox 3+, Chrome 3+, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: