В этой заметке я хочу познакомить Вас с картографическом сервисом OpenStreetMap и примерами его использования на сайтах.
Еще до появления карт Google в 2004 году Стивом Костом (Steve Coast) из Великобритании был основан проект OpenStreetMap, целью которого было нарисовать карту всего мира.
Это свободный проект по совместному развитию общедоступных карт и схем городов, улиц, дорог с помощью ручного или автоматического ввода данных, а также получения данных с портативных GPS-приёмников.
Над созданием карты работает сообщество пользователей из различных населенных пунктов мира, каждый из которых добавляет небольшой кусочек информации.
Данные создаваемые в рамках OpenStreetMap распространяются по лицензии Creative Commons Attribution-ShareAlike 2.0, подразумевающей свободное распространение, результаты любых изменений должны публиковаться под той же лицензией.
Как происходит работа с данными:
1. С помощью GPS-приемника записывается треки (набор точек, полученных с помощью GPS) — данные о дорогах.
2. GPS-данные приеобразуютя в формат GPX, это можно сделать либо с помощью самого устройства или программой GPSBabel.
3. Загрузить данные в OpenStreetMap, предварительно создав учетную запись и перейти в личный раздел, нажать на ссылку My traces (мои треки) .
4. Введенные данные можно редактировать онлайн используя редактор Potlatch построенный на базе Flash или офлайн JOSM (Java) или Merkaator(С++).
Подробнее о работе с OpenStreetMap можно прочитать здесь:
- Начало работы с OpenStreetMap;
- Вики-помощь и вики-дискуссии;
- ВикиПроект Россия;
- Русскоязычный раздел форума OpenStreetMap
Данные с OpenStreetMap можно свободно использовать на своих сайтах.
1. Используем API Google Maps v3
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Отображение карты OpenStreetMap с помощью API Google Maps v3</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { // Задаем свойства карты и инициализируем ее var options = { scrollwheel: false, scaleControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} } var map = new google.maps.Map(document.getElementById("map"), options); map.setCenter(new google.maps.LatLng(56.316537,43.998779)); map.setZoom(12); // Задаем слой с OSM var openStreet = new google.maps.ImageMapType({ getTileUrl: function(ll, z) { var X = ll.x % (1 << z); // wrap return "http://tile.openstreetmap.org/" + z + "/" + X + "/" + ll.y + ".png"; }, tileSize: new google.maps.Size(256, 256), isPng: true, maxZoom: 18, name: "OSM", alt: "Слой с Open Streetmap" }); //Добавляем слои к карте map.mapTypes.set('osm', openStreet); map.setMapTypeId('osm'); map.setOptions({ mapTypeControlOptions: { mapTypeIds: [ 'osm', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID ], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }); } </script> </head> <body onload="initialize()"> <div id="map" style="width:800px;height:600px;"></div> </body> </html> |
Поясню данный код.
В начале мы задаем свойства карты и инициализируем ее.
После этого создаем новый тип карты osm с набором свойств openStreet.
С сайта по адресу http://tile.openstreetmap.org/ мы берем тайлы размером 256 на 256 пикселей для каждого масштабного уровня, максимальный уровень масштаба maxZoom: 18, название слоя OSM.
Добавляем созданный тип к нашей карте
map.mapTypes.set(‘osm’, openStreet);
map.setMapTypeId(‘osm’);
Кроме этого добавляем имеющиеся типы карт Google Maps:
- ROADMAP стандартная карта Google Maps в формате 2D, схемы дорог и названия населенных пунктов;
- SATELLITE карта, составленная из снимков с космоса;
- HYBRID отображает комбинацию первых двух типов карт – снимки из космоса и схемы дорог, названия городов;
- TERRAIN отображает на карте рельеф местности(реки, горы).
2. Используем OpenLayers
OpenLayers — OpenSource библиотека, написанная на JavaScript, предназначенная для создания карт на основе программного интерфейса (API), подобного GoogleMap API или MSN Virtual Earth API. Библиотека включает в себя компоненты из JavaScript-библиотек Rico и Prototype JavaScript Framework.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Отображение карты OpenStreetMap с помощью OpenLayers</title> <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> function init() { var map = new OpenLayers.Map("basicMap"); var mapnik = new OpenLayers.Layer.OSM(); map.addLayer(mapnik); map.setCenter(new OpenLayers.LonLat(43.998779,56.316537) // Центр карты .transform( new OpenLayers.Projection("EPSG:4326"), // преобразование из WGS 1984 new OpenLayers.Projection("EPSG:900913") // в Spherical Mercator Projection ), 12 // Уровень масштаба ); } </script> </head> <body onload="init();"> <div id="basicMap" style="width:800px;height:600px;"></div> </body> </html> |
В начале мы подключаем сам скрипт OpenLayers.js с самого сайта http://openlayers.org
Определяем карту и контейнер для нее basicMap.
Подключаем слой с картой OpenStreetMap:
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
Задаем центр карты и уровень масштаба.
OpenLayers имеет возможность преобразования картографических проекций.
В данном примере используемая в OpenStreetMap проекция WGS 1984 преобразуется в проекцию, используемую в Google Maps – Меркатора.
Больше узнать о работе с OpenLayers можно здесь:
Спасибо
Интересно а можно както OSM подгружать в Yandex карты?
У Яндекс.Карт и OSM используются разные картографические проекции, поэтому при добавлении карт OSM на Яндекс.Карты нужно проводить пересчет координат.
А используя OpenLayers можно подгрузить карту гугл?
Да. Вот пример
интересно, а как получить lat/lon-координаты и, если можно, адрес по клику мыши в любой точке map = new OpenLayers.Map(«basicMap»)?
При использовании для вывода API Google Maps v3 координаты получить легко отслеживая событие клика по карте.
С определением адреса все сложнее, нужно посылать вопрос к геокодеру с данными OpenStreetMap, например используя CloudMade
А как на карту наложить слой из нескольких KML файлов!?
Если использовать Google API — вот пару примеров
пример-1 и пример-2