Embed Size (px)
DESCRIPTION
Презентация к докладу на UWDC-2013 — Уральской конференции веб-разработчиков (20-21 февраля 2013, Челябинск)
Citation preview
Александр Сапожников
Южно-Уральский государственный университет
OpenStreetMapOpenStreetMap на вашем сайтена вашем сайте
UWDC 2013
На прошлых конференциях— Google Maps
— Яндекс.Карты
— 2GIS — вчера
02
02
Встраиваемые карты— Google Maps
— Яндекс.Карты
— Bing
— Космоснимки
— 2GIS
— Navitel
04
04OpenStreetMap
— openstreetmap.org = osm.org
— openstreetmap.ru
05
05
Что не так
в других картах?
Покрытие по Уралуbit.ly/XdQx33 (сентябрь 2012)
— Областные центры — везде
— + Магнитогорск — Google, Яндекс; + Березники — Космоснимки
— + дорожная сеть в нескольких десятках городов — Bing
— + крупные города и города-спутники = 15 городов — 2ГИС
— + десятки городов + физическая карта — Навител
07
07Crowdsourcing maps
— OpenStreetMap
— Google Map Maker
— Яндекс Народная карта
— Wikimapia
08
08
Внешний вид
Ограниченияdevelopers.google.com/maps/faq#usagelimits
Web sites and applications using the Google Maps API may at no cost
generate up to 25,000 map loads per day for each service.“12
12
Сравним с OSM
Бесплатно*
Итого— Качество
— Стиль
— Цена
20
20
Как?
google://
openstreetmap api
Разобьём на подзадачи— Подобрать механизм отображения
— Найти тайлы
23
23Библиотеки, допускающие замену тайлов
— GeoMixer (kosmosnimki.ru)
— Google Maps
— Яндекс.Карты
24
24GeoMixerkosmosnimki.ru/geomixer/docs/api_samples/ex_only_osm.html
<script>createFlashMap(
document.getElementById("map"), "OSM",
function(map){}
);
</script>
25
25
OSM в Google Mapsfunction initialize() { var map = new google.maps.Map(document.getElementById("map"), {}); map.setCenter(new google.maps.LatLng(55.160751, 61.412512)); map.setZoom(18); 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), maxZoom: 18, name: "OSM" }); 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 } }); }
27
27Вычисляем адрес тайла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";
},
// ...
28
28Адреса тайлов
http://tile.openstreetmap.org/z /x/y .png
29
29
В Яндекс.Картах
и OSM — разныепроекции
Слой OSM на Яндекс.Картахymaps.layer.storage.add('osm#mapsurfer', function () {
var layer = new ymaps.Layer(
'http://129.206.74.245:8001/tms_r.ashx?x=%x&y=%y&z=%z'
{ projection: ymaps.projection.sphericalMercator }
);
return layer;
} );
ymaps.mapType.storage.add('osm#mapsurfer', new ymaps.MapType('OpenStreetMap', ['osm#mapsurfer']) );
33
33
GeoMixer
Google Maps
Яндекс.Карты
35
35Если делаем новую карту
— OpenLayers
— Leaflet
— ...
36
38
39
39Возможности Leaflet
— Отображение растрового слоя: тайлы и большие изображения
— Отображение маркеров
— Отображение векторных слоёв
А с плагинами?
— Разные форматы данных, кластеризация, адресный поиск...
40
40Код для создания карты<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
</head>
<body><div id="map" style="height: 600px"></div>
41
41Код для создания карты<script>
var map = L.map('map').setView([55.17, 61.39], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
}).addTo(map);
</script>
42
42
Шаблон URL тайловhttp:// {s} .tile.osm.org/ {z} / {x} / {y} .png
44
44Плагины
— Форматы данных: GeoJSON, CSV, GPX, KML...
— Кластеризация
— Дополнительные элементы управления
— Адресный поиск
— Дополнительные проекции
— ...
45
45Адресный поиск в Leaflet
Leaflet GeoSearch
46
46Адресный поиск в Leaflet
Leaflet GeoSearch
— Bing
— ESRI
— Nokia
— OpenStreetMap
47
47NominatimNominatim (лат. по имени) — адресный поиск на основе данных OSM.
48
48Использование Nominatim
— Принимает запросы методом GET
— Возвращает до 10 результатов в виде XML либо JSON
— Каждый элемент содержит много информации
49
49Доступ к Номинатиму из Перлаgithub.com/shoorick/bing-imagery-tools/blob/master/watch.pl
use Geo::Coder::OSM;
...
my $geocoder = Geo::Coder::OSM->new();
my @places = $geocoder->geocode(
location => $self->param('address'),
);
foreach my $place ( @places ) {
print $place->{'lon'};50
50MapQuestdeveloper.mapquest.com/web/products/open/sdk
51
51Другие библиотеки
— MapBox → Wax
— Stamen → Modest Maps
52
52Mapstractionmapstraction.com
— Разные библиотеки, включая OpenLayers, Leaflet, MapQuest
— Разный адресный поиск
53
53 *.tile.openstreetmap.org
54
54
Because the OpenStreetMap Foundation is a non-profit organisation
with limited resources, you can’t just slot in the tiles from openstreetmap.org
as a replacement
См. также Tile usage policy.
“
55
Подключение тайлов CloudMade в LeafletL.tileLayer(
'http://{s}.tile.cloudmade.com/'
+ 'bce850b437d7493ead1fbd1c1bc77ee4'
+ '/997/256/{z}/{x}/{y}.png',
{attribution: 'Картографические данные © Участники <a href="http://openstreetmap.org">OpenStreetMap</a>, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Изображения © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18}).addTo(map);
60
60А можно и такL.tileLayer('http://{s}.tile.cloudmade.com/'
+ '{key}/{styleId}/256/{z}/{x}/{y}.png', {
key: ключ,
attribution: ...,
styleId: номер_стиля
}).addTo(map);
leafletjs.com/examples/choropleth.html
61
61Самодельные тайлы
— Mapnik
— Maperitive
— TileMill
62
62
Maperitive
TileMill
Y перевернулся?
Y перевернулся?L.tileLayer( ...
{
tms: true,
...
TMS — Tile Map Service
67
67
Для ленивых
Модули CMS
69
69
75
Редактирование— Самостоятельно
— Попросить кого-нибудь
81
81Чем
— встроенный, на сайте osm.org
— Potlach (Flash)
— Будет iD? (JavaScript)
— внешний:
— JOSM — josm.ru
— Merkaartor
— ...
82
82Будете много рисовать —
берите JOSM
Не планируете?Тогда совсем не рисуйте
Попросите кого-нибудь
84
84Форум
— forum.openstreetmap.org
— .../viewtopic.php?id=5981 — Челябинская область
85
85
Выводы1. Можно использовать
2. Можно совмещать с другими картами
3. Можно использовать Leaflet для отображения
4. Внешний вид можно менять
5. Можно встраивать модулями CMS и через <iframe>
6. Можно редактировать
89
89Что читать
— openstreetmap.org = osm.org
— wiki.openstreetmap.org
— forum.openstreetmap.org
— switch2osm.org
— shtosm.ru — ШТОСМ
90
90Александр Сапожников
Южно-Уральский государственный университет, Челябинск
— twitter @shoorick77
— эта презентация: shoorick.ru/slide/uwdc/osm.html
91
91
