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

О чём?

OpenStreetMap (OSM)

osm.org → https://www.openstreetmap.org/

• Что это?
• Что с этим делать?
• Как именно?

Технические подробности — позже.

Подробности были и раньше

Длинный доклад на  UWDC  в 2013

Почему именно OpenStreetMap?

• Стоимость — начиная с бесплатной.
• Нужное место может быть хорошо отрисовано (а может и не быть).
• Можно улучшить.

OSM — это карта?

OpenStreetMap — это карта?

• Да
• Не только карта

А что тогда?

В первую очередь — данные

Какие такие данные?

• Открытые
• Разнообразные
• Расширяемые

И что с ними делать?

• Отображать в виде карты

И что с ними делать?

• Отображать в виде карты
• Искать адреса

И что с ними делать?

• Отображать в виде карты
• Искать адреса
• Строить маршруты

И что с ними делать?

• Отображать в виде карты
• Искать адреса
• Строить маршруты
• и так далее

Отображение карты

• Разными стилями — edward17.github.io/LayersCollection

Отображение карты

• Разными Своими стилями

Отображение карты

• Разными стилями
• С дополнительными данными

Дополнительные данные

• точечные объекты — маркеры

Примеры:

• Студенческий городок ЮУрГУ
• Ильменский фестиваль

Дополнительные данные

• точечные объекты — маркеры
• двумерные объекты — линии и фигуры

Примеры:

• Прямоугольник на сайте usjeans.ru
• Более сложные фигуры с подсказками — deco-ton.ru

Дополнительные данные

• точечные объекты — маркеры
• двумерные объекты — линии и фигуры, «тепловые карты»

• точечные объекты — маркеры
• двумерные объекты — линии и фигуры, «тепловые карты»

В разных форматах

• GeoJSON, GPX, KML, CSV и многое другое

Примеры:

• http://shoorick.ru/lj/map/parking.html — из GPX

Что внутри?

• HTML + CSS + JavaScript
• Квадратные фрагменты карты — та́йлы (от англ. tile)
• (необязательно) Дополнительные данные

Как всё это сделать?

• Взять библиотеку Leaflet — leafletjs.com

Как всё это сделать?

• Взять библиотеку Leaflet
• Выбрать слой с тайлами — можно взять
  • tile.openstreetmap.org (чуть-чуть),
  • сторонние
  • свои
• Указать настройки отображения карты и дополнительных данных

А попроще?

• Модули для популярных CMS
• Leaflet для ленивых
• MapBox
• share.mapbbcode.org
• и так далее...

Спасибо за внимание!

Вопросы?

Технические — на мастер-классах

• 14:00 — Открытые данные на Открытой карте OpenStreetMap
• 14:30 — Создание Открытой карты OpenStreetMap

Ещё вопросы?

Александр Игоревич Сапожников

заведующий сектором веб-проектов
отдела глобальных сетевых технологий управления информатизации
Южно-Уральского государственного университета

E-mail: as@susu.ru, Telegram/Skype/FB/VK: @shoorick77

Эта презентация — shoorick.ru/slide/odd-2018