В этой заметке я хочу Вас познакомить с новым картографическим сервисом CloudMade.
Данный проект в качестве карты использует данные OpenStreetMap и расширяет их предоставляя различные дополнительные сервисы, в том числе и уникальные.
Перечислю некоторые из сервисов:
Возможность редактирования стилей отображения данных — теперь пользователи могут настроить способ отображения карты на своем сайте, для этого есть набор из стилей. Для желающих создавать новые стили, после бесплатной регистрации доступен online редактор;
Нахождение маршрутов на карте — на данный момент лучшая по скорости реализация алгоритмов поиска маршрутов на основании данных OpenStreetMap. Поддерживаются автомобильные, велосипедные и пешеходные маршруты;
Геокодирования — поиск гео объектов по названию;
JavaScript библиотека — легковесная библиотека, которая позволяет легко встраивать картографическую информацию на другие сайты;
Библиотеки для iPhone и J2ME — возможноcть разрабатывать картографические приложения для мобильных устройств;
HTTP API и библиотеки для Java, Ruby, Python — возможноcть разрабатывать картографические web и desktop приложения с поддержкой маршрутизации и геокодирования.
Для использования сервиса необходима регистрация.
После регистрации Вы должны получить ключ, для использования API на Вашем сайте.
В этой заметке я рассмотрю использование JavaScript API для создания веб-приложений с картами.
Первый пример, это простая карта с элементами управления.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Карта с элементами управления - CloudMade JavaScript API</title>
</head>
<body>
<div id="cm-example" style="width: 800px; height: 600px"></div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
var cloudmade = new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152'});
var map = new CM.Map('cm-example', cloudmade);
map.setCenter(new CM.LatLng(56.316537,43.998779), 15);
map.addControl(new CM.LargeMapControl());
map.addControl(new CM.ScaleControl());
map.addControl(new CM.OverviewMapControl());
</script>
</body>
</html> |
Поясню код примера.
В начале мы создаем область для отображения карты cm-example размерами 800 на 600 пикселей.
Затем подключаем JavaScript-файл web-maps-lite.js последней версии API для веб.
В строке var cloudmade = new CM.Tiles.CloudMade.Web({key: ’56eded06210846ecbb758f29e7c28152′});
мы передаем в качестве параметра ключ API для нашего домена.
После этого мы определяем карту, координаты ее центра и начальный масштаб.
Последние три строки служат для добавления на карту элементов управления: масштаб карты, масштабная шкала и обзорная карта.
Второй пример демонстрирует возможность задания различного стиля для отображения карты.
Стиль отображения можно выбрать из уже существующих на странице или создать свой
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Задание стиля для карты - CloudMade JavaScript API</title>
</head>
<body>
<div id="cm-example" style="width: 700px; height: 500px"></div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
var cloudmade = new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152', styleId:1045});
var map = new CM.Map('cm-example', cloudmade);
map.setCenter(new CM.LatLng(56.316537,43.998779), 15);
map.addControl(new CM.LargeMapControl());
map.addControl(new CM.ScaleControl());
map.addControl(new CM.OverviewMapControl());
</script>
</body>
</html> |
Здесь в строке передачи ключа API задается дополнительный параметр styleId, который определяет стиль отображения карты.
Значение берется в правом нижнем углу конкретного стиля из галлереи стилей.
Еще пример с другим стилем, здесь используется стиль styleId:997.
Следующий пример демонстрирует использование маркера для обозначения объекта на карте.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Маркер на карте - CloudMade JavaScript API</title>
</head>
<body>
<div id="cm-example" style="width: 700px; height: 500px"></div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
var cloudmade = new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152'});
var map = new CM.Map('cm-example', cloudmade);
var myMarkerLatLng = new CM.LatLng(56.317213,43.993976);
var myMarker = new CM.Marker(myMarkerLatLng, {
title: "Кинотеатр Октябрь"
});
map.setCenter(myMarkerLatLng, 14);
map.addOverlay(myMarker);
map.addControl(new CM.LargeMapControl());
</script>
</body>
</html> |
В этом примере мы в строке
var myMarkerLatLng = new CM.LatLng(56.317213,43.993976);
задаем координаты для маркера, а затем в следующей текст подсказки, появляющийся при наведении курсора мыши
Центр карты мы задаем в точке расположения маркера myMarkerLatLng.
Имеется возможность задания своего изображения для значка маркера.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Пользовательский значок для маркера - CloudMade JavaScript API</title>
</head>
<body>
<div id="cm-example" style="width: 800px; height: 600px"></div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
var cloudmade = new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152'});
var map = new CM.Map('cm-example', cloudmade);
var CloudMadeIcon = new CM.Icon();
CloudMadeIcon.image = "http://webmap-blog.ru/files/cloudmade/img/cinema.png";
CloudMadeIcon.iconSize = new CM.Size(32, 37);
CloudMadeIcon.iconAnchor = new CM.Point(18, 37);
var oktabrLocation = new CM.LatLng(56.317213,43.993976);
var oktabrMarker = new CM.Marker(oktabrLocation, {
title: "Кинотеатр Октябрь",
icon: CloudMadeIcon
});
map.setCenter(oktabrLocation, 15);
map.addOverlay(oktabrMarker);
map.addControl(new CM.LargeMapControl());
</script>
</body>
</html> |
В этом примере с начала мы задаем стиль для нашего значка: путь к файлу изображения, размер изображения и смещение относительно координат точки.
А затем, также как и в предидущем примере задаем координаты для маркера, текст подсказки.
Отличие в задании наименования стиля иконки для отображения маркера.
Еще один пример, работа с событиями карты.
При клике мышью по карте, в строке под ней появляются координаты места клика.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>События карты - CloudMade JavaScript API</title>
</head>
<body>
<div id="cm-example" style="width: 800px; height: 600px"></div>
<div id="message">Кликните по карте</div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
var cloudmade = new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152'});
var map = new CM.Map('cm-example', cloudmade);
map.setCenter(new CM.LatLng(56.316537,43.998779), 15);
function displayMessage(msg) {
document.getElementById('message').innerHTML = msg;
}
CM.Event.addListener(map, 'click', function(latlng) {
displayMessage("Координаты места клика: " + latlng.toString(4));
});
</script>
</body>
</html> |
Здесь две особенности.
При клике по карте обрабатывается событие с помощью CM.Event.addListener, значения координат и текстовая строка передаются в функцию displayMessage, которая выводит текст в элемент div с id=”message”.
Еще один пример, это вывод балуна с информацией.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Вывод балуна с информацией - CloudMade JavaScript API</title>
</head>
<body>
<div id="cm-example" style="width: 800px; height: 600px"></div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/0.4/web-maps-lite.js"></script>
<script type="text/javascript">
var cloudmade = new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152'});
var map = new CM.Map('cm-example', cloudmade);
var cinima = new CM.LatLng(56.317213,43.993976);
map.setCenter(cinima, 16);
var marker = new CM.Marker(cinima);
map.addOverlay(marker);
marker.openInfoWindow(
'<div style="text-align:center"><strong>Кинотеатр Октябрь</strong><br /><a rel="nofollow" href="http://www.map.cek.ru/index.php?option=com_content&view=article&id=27&Itemid=139" target="blank"><img src="http://www.map.cek.ru/images/stories/afisha/cinema/october2.jpg" alt="Информация о кинотеатре Октябрь с афишой фильмов" title="Информация о кинотеатре Октябрь с афишой фильмов" width="100" height="62" /></a><br />ул. Большая Покровская, 51а</div>', {maxWidth: 250});
</script>
</body>
</html> |
Здесь содержимое балуна задается в виде html-кода в парамере marker.openInfoWindow, в нем же задается размер максимальная ширина балуна — maxWidth: 250.
Существует вожможность размещения на карте полилиний и полигонов — смотрите пример здесь.
Рассказать о всех возможностях в одной заметке не удасться, я покажу Вам еще три интересных возможности использования JavaScript API CloudMade, с остальными можно познакомиться здесь.
Пример использования маршрутизатора.
CloudMade позволяет строить маршруты по России и я продемонстрирую это на примере Нижнего Новгорода.
Если передвинуть метки начала «А» и конца «B» маршрута, то будет произведен расчет нового пути.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Построение маршрутов - CloudMade JavaScript API</title>
</head>
<body>
<div id="mymaps">
<div id="cm-example" style="width: 800px; height: 600px; border: 1px solid #ccc; float: left"></div>
<div id="panel" style="margin-left: 850px;"></div>
</div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
var cloudmade = new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152'});
var map = new CM.Map('cm-example', cloudmade);
map.setCenter(new CM.LatLng(56.317213,43.993976), 14);
map.addControl(new CM.LargeMapControl());
var directions = new CM.Directions(map, 'panel', '56eded06210846ecbb758f29e7c28152');
var waypoints = [new CM.LatLng(56.32123218713467, 43.94591565819701), new CM.LatLng(56.30859778806634, 44.01474803544306)];
directions.loadFromWaypoints(waypoints, {'travelMode': 'foot', 'units':'km', 'draggableWaypoints': true, 'lang':'ru'});
</script>
</body>
</html> |
Здесь в строке
var directions = new CM.Directions(map, ‘panel’, ’56eded06210846ecbb758f29e7c28152′);
мы создаем объект маршрутизатора и передаем ему в качестве параметров нашу карту, идентификатор div элемента для вывода инструкций маршрутизатора и API-ключ еще раз.
В следующей строке мы задаем координаты точек маршрута.
В последней строке мы определяем некоторые опции для маршрутизатора, подробнее (http://developers.cloudmade.com/wiki/web-maps-api/CMDirections ):
travelMode — вид передвижения (автомобиль — car (по умолчанию), автомобиль кратчайшее — car/shortest , велосипед — bicycle или пешком — ‘foot ), у нас задано значение foot — пешком;
units — единицы измерения растояния (километры — km (по умолчанию) или мили — miles);
draggableWaypoints — возможность перемещения начальной и конечной точки маршрута, если true — возможно, false – нет;
lang — язык отображения для вывода инструкций маршрутизатора.
Пример загрузки данных из KML-файла
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Загрузка данных из KML-файла - CloudMade JavaScript API</title>
</head>
<body>
<div id="cm-example" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
var map = new CM.Map('cm-example', new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152'}));
var geoxml = new CM.GeoXml('http://webmap-blog.ru/examples/kml/primer_kml_2.kml');
CM.Event.addListener(geoxml, 'load', function() {
map.zoomToBounds(geoxml.getDefaultBounds());
map.addOverlay(geoxml);
});
</script>
</body>
</html> |
Здесь мы создаем GeoXml объект и передаем ему адрес нашего KML-файла.
После мы слушаем событие загрузки файла, после этого увеличиваем область показа карты так, чтобы уместились все данные map.zoomToBounds(geoxml.getDefaultBounds()); и добавляем новый слой на карту map.addOverlay(geoxml);
Мы можем показывать свои тайлы.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Отображение карты из своих тайлов - CloudMade JavaScript API</title>
</head>
<body>
<div id="cm-example" style="width: 800px; height: 600px"></div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
var cloudmade = new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152'});
var minute = new CM.Tiles.Base({
tileUrlTemplate: 'http://webmap-blog.ru/files/cloudmade/osm-tiles/#{zoom}/#{y}/#{x}.png',
title: 'Пример с тайлами',
copyright: 'Data © 2011 webmap-blog.ru.'
});
var map = new CM.Map('cm-example', minute);
map.setCenter(new CM.LatLng(56.4409104, 43.6208), 9);
map.addControl(new CM.LargeMapControl());
</script>
</body>
</html> |
В этом примере мы создаем объект CM.Tiles.Base в конструкторе которого указываем путь к каталогу с тайлами и шаблон обозначения файлов, а также копирайт.
Затем мы создаем новую карту и передаем в нее наш объект.
Модификация данного примера — наложение тайлов на карту OpenStreetMap.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Накладываем свои тайлы на карту - CloudMade JavaScript API</title>
</head>
<body>
<div id="cm-example" style="width: 800px; height: 600px"></div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
var map = new CM.Map('cm-example', new CM.Tiles.CloudMade.Web({key: '56eded06210846ecbb758f29e7c28152'}));
map.setCenter(new CM.LatLng(56.4409104, 43.6208), 9);
var minute = new CM.Tiles.Base({
tileUrlTemplate: 'http://webmap-blog.ru/files/cloudmade/osm-tiles/#{zoom}/#{y}/#{x}.png',
title: 'Minutely Updated Tiles',
copyright: 'Data © 2009 OpenStreetMap.org. Rendering © 2009 CloudMade.'
});
var overlay = new CM.TileLayerOverlay(minute);
map.addOverlay(overlay);
map.addControl(new CM.LargeMapControl());
</script>
</body>
</html> |
Здесь мы создаем объект CM.TileLayerOverlay и передаем ему конструктор нашего слоя тайлов.
Добавляем слой на карту
map.addOverlay(overlay);
В API CloudMade существует возможность получения маршрута между двумя точками, используя http-запрос к маршрутизатору, в ответ на запрос отправляется ответ с данными о маршруте в форматах JSON или GPX.
Как это работает и использование в своих проектах ч рассмотрю в следующей заметке.
Спасибо за Ваш труд! Подскажите, есть вариант заменить в компоненте GMapFP_v7.34 гугловскую вкладку КАРТА на на карту OpenStreetMap? Спасибо!
А пути через метромост пример №8 не знает, что очень печально. Данные дорожной сети давно не обновлялись.