Презентация к докладу на UWDC-2013 — Уральской конференции веб-разработчиков (20-21 февраля 2013, Челябинск)

1. Александр Сапожников
Южно-Уральский государственный университет
OpenStreetMap
на вашем сайте
UWDC 2013

2. На прошлых конференциях
— Google Maps
— Яндекс.Карты
— 2GIS — вчера
02

3. 02

4. Встраиваемые карты
— Google Maps
— Яндекс.Карты
— Bing
— Космоснимки
— 2GIS
— Navitel
04

5. 04
OpenStreetMap
— openstreetmap.org = osm.org
— openstreetmap.ru
05

6. 05
Что не так
в других картах?

7. Покрытие по Уралу
bit.ly/XdQx33 (сентябрь 2012)
— Областные центры — везде
— + Магнитогорск — Google, Яндекс; + Березники — Космоснимки
— + дорожная сеть в нескольких десятках городов — Bing
— + крупные города и города-спутники = 15 городов — 2ГИС
— + десятки городов + физическая карта — Навител
07

8. 07
Crowdsourcing maps
— OpenStreetMap
— Google Map Maker
— Яндекс Народная карта
— Wikimapia
08

9. 08
Внешний вид

12. Ограничения
“
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

13. 12
Сравним с OSM

19. Бесплатно*

20. Итого
— Качество
— Стиль
— Цена
20

21. 20
Как?

22. google://
openstreetmap api

23. Разобьём на подзадачи
— Подобрать механизм отображения
— Найти тайлы
23

24. 23
Библиотеки, допускающие замену тайлов
— GeoMixer (kosmosnimki.ru)
— Google Maps
— Яндекс.Карты
24

25. 24
GeoMixer
kosmosnimki.ru/geomixer/docs/api_samples/ex_only_osm.html
<citcetFaha(
srp>raelsMp
dcmn.eEeetyd"a","S"
ouetgtlmnBI(mp) OM,
fnto(a)}
ucinmp{
);
<srp>
/cit
25

26. 25

27. OSM в Google Maps
fnto iiilz( {
ucin ntaie)
vrmp=nwgol.asMpdcmn.eEeetyd"a",{)
a a e ogemp.a(ouetgtlmnBI(mp) };
mpstetrnwgol.asLtn(5105,6.152)
a.eCne(e ogemp.aLg5.671 1421);
mpstom1)
a.eZo(8;
vroeSre =nwgol.asIaeaTp(
a pntet e ogemp.mgMpye{
gtier:fnto(l z {
eTlUl ucinl, )
vrX=l. %( < z; / wa
a lx 1 < ) / rp
rtr "tp/tl.pnteta.r/
eun ht:/ieoesrempog"
+z+""+X+""+l. +"pg;
/ / ly .n"
},
tlSz:nwgol.asSz(5,26,
ieie e ogemp.ie26 5)
mxom 1,
aZo: 8
nm:"S"
ae OM
};
)
mpmpye.e(om,oeSre)
a.aTpsst's' pntet;
mpstaTpI(om)
a.eMpyed's';
mpstpin(
a.eOtos{
mpyeotoOtos {
aTpCnrlpin:
mpyed:[
aTpIs
's'
om,
gol.asMpyedRAMP
ogemp.aTpI.ODA,
gol.asMpyedTRAN
ogemp.aTpI.ERI,
gol.asMpyedSTLIE
ogemp.aTpI.AELT,
gol.asMpyedHBI
ogemp.aTpI.YRD
],
sye gol.asMpyeotoSyeDODW_EU
tl: ogemp.aTpCnrltl.RPONMN
}
};
)
27
}

28. 27
Вычисляем адрес тайла
vroeSre =nwgol.asIaeaTp(
a pntet e ogemp.mgMpye{
gtier:fnto(l z {
eTlUl ucinl, )
vrX=l. %( < z; / wa
a lx 1 < ) / rp
rtr "tp/tl.pnteta.r/
eun ht:/ieoesrempog"
+z+""+X+""+l. +"pg
/ / ly . n ";
},
/ ..
/ .
28

29. 28
Адреса тайлов
http://tile.openstreetmap.org/z /x /y .png
29

30. 29

32. В Яндекс.Картах
и OSM — разные
проекции

33. Слой OSM на Яндекс.Картах
yaslyrsoaead's#asre' fnto ( {
mp.ae.trg.d(ommpufr, ucin )
vrlyr=nwyasLyr
a ae e mp.ae(
'tp/19267.4:01tsrah?=xy%&=z
ht:/2.0.42580/m_.sxx%&=yz%'
{ poeto:yaspoeto.peiaMrao }
rjcin mp.rjcinshrclectr
);
rtr lyr
eun ae;
});
33
yasmpyesoaead's#asre' nwyasMpye'p
mp.aTp.trg.d(ommpufr, e mp.aTp(O

34. 33

35. GeoMixer
Google Maps
Яндекс.Карты
35

36. 35
Если делаем новую карту
— OpenLayers
— Leaflet
— ...
36

37. 36
openlayers.org
37

38. 37
leafletjs.com
38

39. 38
39

40. 39
Возможности Leaflet
— Отображение растрового слоя: тайлы и большие изображения
— Отображение маркеров
— Отображение векторных слоёв
А с плагинами?
— Разные форматы данных, кластеризация, адресный поиск...
40

41. 40
Код для создания карты
<ikrl"tlset he=ht:/d.efej.o/efe-.
ln e=syehe" rf"tp/cnlaltscmlalt0
<-[fleI 8>
!-i t E ]
<ikrl"tlset he=ht:/d.efej.o/e
ln e=syehe" rf"tp/cnlaltscml
<[ni]-
!edf->
<citsc"tp/cnlaltscmlalt05laltj"<
srp r=ht:/d.efej.o/efe-./efe.s>
<ha>
/ed
<oy<i i=mp sye"egt 60x>/i>
bd>dv d"a" tl=hih: 0p"<dv
41

42. 41
Код для создания карты
<cit
srp>
vrmp=Lmp'a'.eVe(5.7 6.9,1)
a a .a(mp)stiw[51, 13] 6;
LtlLyr'tp/{}tl.s.r/z/x/y.n' {
.ieae(ht:/s.ieomog{}{}{}pg,
}.dT(a)
)adomp;
<srp>
/cit
42

43. 42

44. Шаблон URL тайлов
http:// {s} .tile.osm.org/ {z} / {x} / {y} .png
44

45. 44
Плагины
— Форматы данных: GeoJSON, CSV, GPX, KML...
— Кластеризация
— Дополнительные элементы управления
— Адресный поиск
— Дополнительные проекции
— ...
45

46. 45
Адресный поиск в Leaflet
Leaflet GeoSearch
46

47. 46
Адресный поиск в Leaflet
Leaflet GeoSearch
— Bing
— ESRI
— Google
— Nokia
— OpenStreetMap
47

48. 47
Nominatim
Nominatim (лат. по имени) — адресный поиск на основе данных OSM.
48

49. 48
Использование Nominatim
— Принимает запросы методом GET
— Возвращает до 10 результатов в виде XML либо JSON
— Каждый элемент содержит много информации
49

50. 49
Доступ к Номинатиму из Перла
github.com/shoorick/bing-imagery-tools/blob/master/watch.pl
ueGo:oe:OM
s e:Cdr:S;
..
.
m $ecdr=Go:oe:OM>e(;
y gooe e:Cdr:S-nw)
m @lcs=$ecdr>ecd(
y pae gooe-gooe
lcto = $ef>aa(ades)
oain > sl-prm'drs',
);
50
frahm $lc (@lcs){
oec y pae pae
pit$lc-{ln}
rn pae>'o';

51. 50
MapQuest
developer.mapquest.com/web/products/open/sdk
51

52. 51
Другие библиотеки
— MapBox → Wax
— Stamen → Modest Maps
52

53. 52
Mapstraction
mapstraction.com
— Разные библиотеки, включая OpenLayers, Leaflet, MapQuest
— Разный адресный поиск
53

54. 53
*.tile.openstreetmap.org
54

55. 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

56. 55
cloudmade.com
CloudMade

60. Подключение тайлов CloudMade в Leaflet
LtlLyr
.ieae(
'tp/{}tl.lumd.o/
ht:/s.iecodaecm'
+' c804779edfdcb7e4
be5b3d43a1b11c7e '
+' 97 26{}{}{}pg,
/ 9 /5/z/x/y.n'
{trbto:'атгаиекедны ©Уатии< he=
atiuin Крорфчси ане чснк a rf"
mxom 1}.dT(a)
aZo: 8)adomp;
60

61. 60
А можно и так
LtlLyr'tp/{}tl.lumd.o/
.ieae(ht:/s.iecodaecm'
+' ky / syed /5/z/x/y.n' {
{e} {tlI} 26{}{}{}pg,
ky кю,
e : лч
atiuin ..
trbto: .,
syed нмрсия
tlI : ое_тл
}.dT(a)
)adomp;
61
leafletjs.com/examples/choropleth.html

62. 61
Самодельные тайлы
— Mapnik
— Maperitive
— TileMill
62

63. 62
Maperitive

65. TileMill

66. Y перевернулся?

67. Y перевернулся?
LtlLyr ..
.ieae( .
{
ts tu
m : r e,
..
.
TMS — Tile Map Service
67

68. 67
Для ленивых

69. Модули CMS
69

70. 69

75. Ещё проще
shtosm.ru/2013/02/05/1/ + MapBox
75

76. 75

81. Редактирование
— Самостоятельно
— Попросить кого-нибудь
81

82. 81
Чем
— встроенный, на сайте osm.org
— Potlach (Flash)
— Будет iD? (JavaScript)
— внешний:
— JOSM — josm.ru
— Merkaartor
— ...
82

83. 82
Будете много рисовать —
берите JOSM

84. Не планируете?
Тогда совсем не рисуйте
Попросите кого-нибудь
84

85. 84
Форум
— forum.openstreetmap.org
— .../viewtopic.php?id=5981 — Челябинская область
85

86. 85

89. Выводы
1. Можно использовать
2. Можно совмещать с другими картами
3. Можно использовать Leaflet для отображения
4. Внешний вид можно менять
5. Можно встраивать модулями CMS и через < f a e
irm>
6. Можно редактировать
89

90. 89
Что читать
— openstreetmap.org = osm.org
— wiki.openstreetmap.org
— forum.openstreetmap.org
— switch2osm.org
— shtosm.ru — ШТОСМ
90

91. 90
Александр Сапожников
Южно-Уральский государственный университет, Челябинск
— as@susu.ru
— twitter @shoorick77
— эта презентация: shoorick.ru/slide/uwdc/osm.html
91

92. 91