Uploaded by Александр Сапожников

OpenStreetMap на вашем сайте

advertisement
OpenStreetMap на вашем сайте
Александр Сапожников
Южно-Уральский государственный университет
3 марта 2018, День открытых данных в Челябинске
2
О чём?
OpenStreetMap (OSM)
osm.org → https://www.openstreetmap.org/
— Что это?
— Что с этим делать?
— Как именно?
Технические подробности — позже.
3
Подробности были и раньше
Длинный доклад на UWDC в 2013
4
Почему именно OpenStreetMap?
— Стоимость — начиная с бесплатной.
— Нужное место может быть хорошо отрисовано (а может и не быть).
— Можно улучшить.
5
OSM — это карта?
7
OpenStreetMap — это карта?
— Да
— Не только карта
8
А что тогда?
В первую очередь — данные
10
Какие такие данные?
— Открытые
— Разнообразные
— Расширяемые
11
И что с ними делать?
— Отображать в виде карты
13
И что с ними делать?
— Отображать в виде карты
— Искать адреса
15
И что с ними делать?
— Отображать в виде карты
— Искать адреса
— Строить маршруты
17
И что с ними делать?
— Отображать в виде карты
— Искать адреса
— Строить маршруты
— и так далее
18
Отображение карты
— Разными стилями — edward17.github.io/LayersCollection
23
Отображение карты
— Разными Своими стилями
27
Отображение карты
— Разными стилями
— С дополнительными данными
28
Дополнительные данные
— точечные объекты — маркеры
Примеры:
— Студенческий городок ЮУрГУ
— Ильменский фестиваль
31
Дополнительные данные
— точечные объекты — маркеры
— двумерные объекты — линии и фигуры
Примеры:
— Прямоугольник на сайте usjeans.ru
— Более сложные фигуры с подсказками — deco-ton.ru
33
Дополнительные данные
— точечные объекты — маркеры
— двумерные объекты — линии и фигуры, «тепловые карты»
35
— точечные объекты — маркеры
— двумерные объекты — линии и фигуры, «тепловые карты»
В разных форматах
— GeoJSON, GPX, KML, CSV и многое другое
Примеры:
— http://shoorick.ru/lj/map/parking.html — из GPX
37
Что внутри?
— HTML + CSS + JavaScript
— Квадратные фрагменты карты — та́йлы ( от англ. tile)
— (необязательно) Дополнительные данные
39
Как всё это сделать?
— Взять библиотеку Leaflet — leafletjs.com
40
Как всё это сделать?
— Взять библиотеку Leaflet
— Выбрать слой с тайлами — можно взять
— tile.openstreetmap.org (чуть-чуть),
— сторонние
— свои
— Указать настройки отображения карты и дополнительных данных
41
А попроще?
— Модули для популярных CMS
— Leaflet для ленивых
— MapBox
— share.mapbbcode.org
— и так далее...
42
Спасибо
за внимание!
43
Вопросы?
Технические — на мастер-классах
— 14:00 — Открытые данные на Открытой карте OpenStreetMap
— 14:30 — Создание Открытой карты OpenStreetMap
44
Ещё вопросы?
Александр Игоревич Сапожников
заведующий сектором веб-проектов
отдела глобальных сетевых технологий управления информатизации
Южно-Уральского государственного университета
E-mail: as@susu.ru, Telegram/Skype/FB/VK: @shoorick77
Эта презентация — shoorick.ru/slide/odd-2018
Download