Знакомство с картографическим сервисом CloudMade

В этой заметке я хочу Вас познакомить с новым картографическим сервисом 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 &copy; 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 &copy; 2009 OpenStreetMap.org. Rendering &copy; 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 не знает, что очень печально. Данные дорожной сети давно не обновлялись.