В этой заметке я хочу Вас познакомить с JavaScript библиотекой для абстрактной работы с картами Mapstraction.
Данная библиотека обеспечивает общий API для работы с различными API JavaScript создания карт.
Это позволяет легко осуществлять переход от использования одного провайдера к другому, не затрагивая исходный код.
Возможно организовать переключение карт пользователем.
Основные возможности библиотеки Mapstraction:
- Поддержка 11 основных провайдеров картографирования (в том числе Google Maps, Яндекс.Карты, Microsoft и OpenLayers).
- Динамическое переключение провайдеров.
- Поддержка фигур: Точка, линия, многоугольник.
- Фильтрация маркеров по времени, категории или любому другому атрибуту.
- Накладывание изображений.
- Geo в RSS-формате и импортирование KML -файлов.
Существует специальный сервис, который поможет Вам в изучении API Mapstraction — API SandBox.
Расскажу теперь о том, как использовать данную библиотеку и покажу несколько примеров.
В начале Вам необходимо скачать последнюю версию библиотеки с официального сайта, на момент написания статьи это версия 2.0.17.
Полученный файл в формате zip нужно разархивировать.
После этого необходимо решить API какого провайдера карт Вы хотите использовать для создания карты.
Например, мы хотим использовать API Google Maps, тогда код простой карты будет иметь вид:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Пример Google Maps - Mapstraction API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhQlAYd20Yeej0MiKNuYPUGBnCwDThQlwUCPtCqtX3RC7LUKE-JYan3T4g" type="text/javascript"></script>
<script type="text/javascript" src="mxn/mxn.js?(google)"></script>
<script type="text/javascript">
var mapstraction;
function initialize() {
mapstraction = new mxn.Mapstraction('map_canvas','google');
mapstraction.setCenterAndZoom(new mxn.LatLonPoint(56.323678, 44.0), 12);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px;"></div>
</body>
</html> |
В начале мы подключаем API Google Maps с ключем для Вашего сайта
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhQlAYd20Yeej0MiKNuYPUGBnCwDThQlwUCPtCqtX3RC7LUKE-JYan3T4g" type="text/javascript"></script> |
Затем подключаем основной файл библиотеки Mapstraction mxn.js и в скобках указываем ему параметр с названием провайдера, карту которого мы будем использовать.
<script type="text/javascript" src="mxn/mxn.js?(google)"></script> |
Далее мы задаем параметры нашей карты
Создаем объект карты
mapstraction = new mxn.Mapstraction('map_canvas','google'); |
Здесь ‘google’ — имя провайдера
И центр карты с масштабом
mapstraction.setCenterAndZoom(new mxn.LatLonPoint(56.323678, 44.0), 12); |
В разделе body мы задаем область для показа карты map_canvas.
Добавим на карту метку в центр и элементы управления.
Сделать это можно легко добавив следующий код.
Для метки:
var myPoint = new mxn.LatLonPoint(56.323678, 44.0); my_marker = new mxn.Marker(myPoint); var text = "Пример сообщения"; my_marker.setInfoBubble(text); mapstraction.addMarker(my_marker); |
Здесь в первой строке, мы задаем координаты точки 56.323678, 44.0
Потом, устанавливаем маркер в данную точку и задаем текст, который будет отображаться в балуне при клике по метке.
Добавляем маркер на карту mapstraction.addMarker(my_marker);
Для элементов управления:
mapstraction.addControls({
pan: true,
zoom: 'large',
map_type: true
}); |
В этом коде мы задаем параметры для отображения элементов управления.
На карте будут отображаться элемент панорамирования (pan), масштабирования в виде шкалы (zoom: ‘large’) и переключатель типа карты (map_type).
Мы также можем использовать новую версию API Google Maps v3.
Для этого необходимо, заменить строку вызова API на
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> |
И заменить имя провайдера карт с google на googlev3 в двух строчках
В строке подключения библиотеки Mapstraction
<script type="text/javascript" src="mxn/mxn.js?(googlev3)"></script> |
В строке определения карты
mapstraction = new mxn.Mapstraction('map_canvas','googlev3'); |
Теперь давайте изменим наш код из примера google-3.html так, чтобы вместо Google Maps отображалась Яндекс.Карта.
Первое, мы должны вместо строки подключения API Google Maps добавить подключение API Яндекс.Карт с ключом для Вашего сайта.
Т.е строку
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhQlAYd20Yeej0MiKNuYPUGBnCwDThQlwUCPtCqtX3RC7LUKE-JYan3T4g" type="text/javascript"></script> |
Заменить на
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script> |
И заменить имя провайдера карт с google на yandex в двух строчках
В строке подключения библиотеки Mapstraction
<script type="text/javascript" src="mxn/mxn.js?(google)"></script> |
на
<script type="text/javascript" src="mxn/mxn.js?(yandex)"></script> |
В строке определения карты
mapstraction = new mxn.Mapstraction('map_canvas','google'); |
на
mapstraction = new mxn.Mapstraction('map_canvas','yandex'); |
Вот так вот легко, можно изменить карту на Вашем сайте, используя JavaScript библиотеку Mapstraction.
Рассмотрим еще пример — добавляем KML-файл на карту.
Для этого к нашему примеру googl-3.html нужно добавить строку:
mapstraction.addOverlay("http://webmap-blog.ru/examples/kml/primer_kml_2.kml"); |
Последний пример, с возможностью выбора пользователем нужной карты для отображения.
В этом примере в начале загружается карта Google Maps, ниже карты расположены переключатели для выбора провайдера API (Google, Ovi, Yandex, OpenLayers).
При выборе загружается карта соответствующего API.
Замечание, Ovi Maps API — это новое API, разработанное компанией Nokia для встраивания сервиса Ovi Maps в Ваш вебсайт используя Javascript и самые распространённые языки программирования.
Разберем код примера.
В начале мы подключаем все необходимые API карт и библиотеку Mapstraction, в скобках указав наименования используемых провайдеров.
Затем, как в примере имя, определяем объект для карты и ее параметры (центр, масштаб), добавляем элементы управления и маркер.
Теперь рассмотрим код в разделе body.
Здесь мы задаем контейнеры для показа карт, для Ovi, Yandex, OpenLayers они имеют стиль отображения display:none.
И форму для выбора провайдера API.
При клике по одному из переключателей, вызывается функция mapstraction.swap библиотеки, в которую передаются два значения: id контейнера карты и имя провайдера.
В одной заметке сложно рассказать о всех возможностях JavaScript библиотеки для абстрактной работы с картами Mapstraction, дополнительную информацию Вы можете найти на официальном сайте и используя поисковые системы.