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: [email protected], Telegram/Skype/FB/VK: @shoorick77 Эта презентация — shoorick.ru/slide/odd-2018