Maps API *

Доброго времени суток, дорогие хабрахабровцы!

Leaflet — библиотека, позволяющая добавить интерактивные карты на Ваш сайт и легко их кастомизировать. Сегодня рассмотрим то, как можно разместить изображения на Canvas-слое карт, совместно с базовыми маркерами.

TL;DR Недавние изменения в модели ценообразования, мягко говоря, безумны.

Когда я в 2012 году запустил NUKEMAP, у Google Maps были просто потрясающие программные интерфейсы. Абсолютно лучшие API для создания картографических мэшапов на JavaScript, практически бесплатные, с активным сообществом разработчиков, которое регулярно добавляло новые функции. На самом деле создавалось впечатление, что компания заинтересована в людях, которые используют их продукт для создания крутых, полезных инструментов.


Старые версии NUKEMAP: слева оригинальная версия от марта 2005 года на скриншотах MapQuest (она была чрезвычайно ограничена и никогда не публиковалась), полностью на PHP. Я разработал её для личного пользования и обучения. Справа переделанный NUKEMAP от 2012 года на Google Maps API и Javascript.

Сегодня изменилось почти всё. В кодовую базу API практически перестали добавлять реально полезные функции (многие классные фичи были удалены или тихо устарели; добавляемые новые функции, как правило, инкрементальные или примитивные). Это действительно весьма примечательный факт, поскольку на свой собственный веб-сайт Google Maps они добавили много классных штук, например, режим 3D. Но в API их не портировали.

С 10 июня 2019 (а технически с ноября 2019), Яндекс прекратил поддержку анонимного использования сервисов JS API & HTTP Geocoder — тарифицируемые запросы к API (поиск, геокодирование, панорамы и т.д.) перестали работать. Но адекватного биллинга и трекинга запросов Яндекс — не предоставил. Если интересно как спихнуть счёт за геокодирование на гигантов рунета (перечисленных партнёров на заглавной странице сервиса), а так же — как трекинг запросов делается «по уму» — прошу под кат.

В рамках практически любого онлайн-продукта можно встретиться с задачей, которая требует применения того или иного сервиса, связанного с картами, геокодированием, гео-позиционированием. Лично я уже почти 10 лет работаю над онлайн-каталогом недвижимости, а также в рамках ряда других проектов есть опыт использования специфичных функций различных онлайн гео-сервисов.

В этой статье я рассмотрю гео-задачи, которые наиболее часто встают перед программистами, сделаю небольшой обзор сервисов, предлагающих решения для этих задач, и поделюсь опытом использования этих сервисов.

Также рассчитываю на участие комментаторов — если заметите в обзоре неточность в описании, отсутствие вашего хорошего сервиса или вам просто есть что добавить к уже написанному — пишите в комментариях, я буду собирать всё в основной текст, чтобы на будущее всегда иметь под рукой хороший список инструментов на все случаи жизни.

В приложении OsmAnd для телефонов на операционной системе android есть возможность добавления дополнительных слоев на карты OSM (Open Street Map). Полезным дополнением для вашей навигационной системы будет слой Strava heatmap, результат записанных во время путешествий и тренировок треков бегунов, велосипедистов, пловцов. Визуализация этих данных позволяет при навигации найти с одной стороны наиболее популярные маршруты, выделенные внушительными полосами, так и определить проходимость или проезжаемость участка на местности по тонким нитям одиночных треков.

С 2018 года Strava labs в свободном доступе предоставляет только тейлы низкого разрешения. Произошло это, по всей видимости, для “обеспечения безопасности” в ответ на публикации о массовом рассекречивании местоположения тренировок пользователей.

Для поиска популярных маршрутов низкой детализации вполне достаточно, но для того, чтобы оценить проходим ли участок местности нужны записи одиночных треков.

Google решил сделать из Google Maps новый миллиардный бизнес, подняв цены в 14 раз и уменьшив лимит бесплатного использования почти в 30 раз, всё с минимальным периодом уведомления. К счастью, это немедленно стимулировало конкуренцию. Apple Maps, MapBox, TomTom — что выбрать?

Наш стартап GdziePoLek.pl позволяет пациентам находить нужные лекарства в обычных аптеках. И даже по названию («где найти лекарства») понятно, насколько важно отображение на карте. Работу сервиса легко объяснить одной картинкой, на фоне которой всегда были карты Google Maps:


Типичная страница нашего сервиса показывает наличие лекарства в аптеках

В 2013 году два айтишника и музыкант собрались и подумали: давайте разобьем всю Землю на квадраты, а потом пометим каждый квадрат тремя словами. И разбили. И пометили.

Получился бесплатный сервис what3words.com, который замахнулся на революцию в геокодировании. Ребята уверяют, что почтовые адреса и координаты не годятся для повседневной жизни. Пора от них отказываться там, где возможно.
Казалось бы, таких революционеров пруд пруди, но у what3words.com есть важное отличие: сервис взлетел. Им пользуются автопроизводители вроде Land Rover, правительства африканских стран и даже ООН.

→ Демо: ссылка
→ Исходники: ссылка

В первый раз столкнувшись с внедрением и кастомизацией Google Maps, я не нашел единой статьи, рассматривающей все необходимые моменты — информацию пришлось искать по крупицам, а что-то выдумывать самому. После чего и было решено написать эту статью, чтобы люди, ранее не работавшие со стилизацией Google Maps, но при этом ограниченные временными рамками (а может, и желанием) для полноценного изучения API, смогли быстро получить необходимую информацию и материалы. Тем более, что и те, кто обладает определенным опытом, смогут почерпнуть для себя из этой статьи какую-нибудь интересную фишку, к примеру — параллакс для элементов информационного окна.

В этой статье мы рассмотрим:

1. Внедрение Google Maps на сайт

• Добавление через вставку iframe в разметку
• Добавление через API

2. Кастомизация маркера

• Инициализация маркера
• Анимация маркера
• Изображение маркера

3. Кастомизация информационного окна

• Добавление информационного окна
• Открытие информационного окна
• Кастомизация элементов информационного окна
• Параллакс-эффект для элементов в информационном окне

4. Кастомизация карты

• Изменение цвета объектов карты
• Кастомизация элементов управления
• Маска для карты

В подмосковном Подольске, в микрорайоне Силикатная-2, есть один лайфхак — когда на дворе уже 9 вечера, и пиво в магазинах уже не продают — достаточно просто перейти дорогу, чтобы его купить. Через дорогу Москва — в ней желаемое до 11 найти можно.

Остается решить только одну проблему — темной ночью, в незнакомом районе, среди однотипных многоэтажек… узнать на какой стороне ты находишься.

Исторически на этот вопрос отвечает «обратный геокодер»(reverse geocoder). Он важная часть практически всех картографических АПИ — Google, Яндекс, и даже OSM. Но в большинстве случаев его ответ предназначается человеку, и содержит исключительно текстовое описание локации.

Это-не-технологично! И уж точно непрактично. Esosedi, кушали этот кактус пару лет, а потом просто сделали свой обратный геокодер. Главное как и зачем.

Совсем недавно на хабре искали Смерть Кащееву (nested set и вложеность административных рубрик), ходили по районам(отображение данных регионов на карте), и (не)попадали на счетчик Яндекса (прямой геокодер). А теперь разберем, что такое обратный геокодер, и зачем он нужен. А потом разберем механики его работы.

Как я делал свою первую карту на Leaflet.js.

Я ничего не понимаю в картографии и геоинформационных сервисах, поэтому эта статья будет скорее ознакомительная и в помощь новичкам, так как многой информации на русском языке в интернете по-моему нету, а до какой-то я дошел случайно.

Итак задание было следующее: есть черно-белый планшет (маленький кусок карты города) размером 5913x7863 пикселей в формате .bmp + .shp слои.

(изначально карты были отрисованы в формате .dwg (формат автокада), но это закрытый формат и с ним ничего не сделаешь, поэтому ребятам пришлось сохранить каждый слой отдельно в .shp + атрибутивные данные в .dbf)

Из этого всего нужно сделать онлайн карту, основной функционал которой — это вывод атрибутов при нажатии на слой и включение/отключение этих слоёв.

Выбор пал на leaflet.js, так как это оболочка с открытым кодом, на ней сделаны OSM и мой любимый 2GIS. К тому же он хорошо работает на мобильных устройствах.

Для организации работы веб-карт по технологии Slippy Map требуется организовать тайловое хранилище, в котором могут предварительно рендериться (генерироваться) тайлы в заранее заданном контексте карты, либо использоваться набор сервисов для генерации тайлов по запросу, либо некий симбиоз из первых двух подходов.
Первый подход имеет недостаток — требуется слишком большое хранилище для тайлов. Так, по данным OpenstreetMap по состоянию на март 2011 года требовалось 54ТБ места для хранения тайлов. По моим подсчетам для актуальных данных на июнь 2015 года эта цифра уже составляет около 100ТБ (это только оценка, на реальный эксперимент я не решился) для хранения тайлов масштабов 0...17. Такой «прирост» оценок вызван тем, что за прошедшее время данные OpenStreetMap существенно пополнились, детализировались районы, которые в марте 2011 года были пустыми. Нельзя также списывать со счетов неоптимальность сжатия (в моем случае по сравнению с OpenStreetMap) формата PNG (у меня средний размер тайла составляет 4.63КБ против 633 байт OpenStreetMap'а в марте 2011 года), сложность стиля рисования карты mapnik'ом и прочие мои нюансы. В любом случае требуется ОЧЕНЬ много места для тайлового хранилища, что может себе позволить далеко не каждый сервер. Ситуация усугубляется еще и тем, что для блочных файловых систем маленькие по размеру тайлы расходуют целый блок (тайл размером 103 байта может занимать целый блок, например, 4КБ), что приводит к неэффективному расходованию физического пространства жесткого диска. Для большого количества тайлов (для крупных масштабов карт) в рамках одной директории может еще наблюдаться проблема невозможности хранения требуемого количества файлов либо директорий больше, чем позволяет файловая система. Но при всем при этом данный поход обеспечивает комфортное время выполнения запроса на отдачу тайла.
Второй подход хоть и не требователен к емкости тайлового сервера, но требует организовать и поддерживать несколько сервисов (PostgreSQL, Postgis, HStore, mapnik, renderd, mod_tile, apache), которые бы надежно генерировали и отдавали тайл запрашиваему клиентскому сервису. Также требуется периодически подчищать кэш тайлов. Иными словами платой за небольшую емкость жесткого диска тайлового сервера является сложность архитектуры и значительное время выполнения запроса на отдачу каждого конкретного тайла (по моим подсчетам до 500мс только для 1 клиента, для высоконагруженного сервиса это время может вырасти до неприемлемых величин).

… эта история началась давным-давно в далекой-далекой стране Краковия, чьи жители беспечно проживали свои жизни и не знали…

Но сам я местный, и сегодня расскажу вам страшную историю, о том, что мешало спать (лично мне) долгие годы. И это не налоги (с ними все нормально), это — геокодер Яндекс.Карт!

Геокодер — это один из HTTP-сервисов Яндекс.Карт, получающий в запросе текстовое представление адреса и возвращающий в ответе найденные на его основании объекты. Либо наоборот: получающий координаты и отвечающий адресом.

Именно геокодер подскажет, где на карте находится чудная страна Краковия. И именно он будет главным героем этой истории, завязка которой была описана совершенно в другой книге — в древнем фолианте Пользовательское соглашение API Яндекс.Карт. Легенда гласит, что существует ограничение на количество запросов к функции геокодирования. Максимально допустимо делать в сутки не более 25 000 запросов к HTTP и JS геокодеру в сутки. Или овсянка, сэр.

И буквально на днях это правило из обычных слов превратилось в угрозу работоспособности сайта. В клубе API Карт было опубликовано сообщение о массовых банах различных сервисов, превышающих лимиты.



Что делать? Для наглядности достанем из кустов рояль — 8 лет назад на Хабре засветился проект «еСоседи» — «Карта интересных мест». Все эти годы я продолжаю работать над ним.

Несмотря на развитие картографических веб-фреймворков, редактирование векторных географических данных всё ещё, по большей части, происходит в настольных приложениях, но пора бы уже переходить к редактированию в браузерах.

Для отрисовки веб-карт существует несколько открытых библиотек, например, OpenLayers и Leaflet. Довольно давно наш выбор пал на Leaflet и мы продолжаем его активно использовать при реализации проектов. Для редактирования геоданных хотелось бы использовать его же и, при этом, иметь возможность интегрироваться с существующими хранилищами пространственных данных.

Для достижения последней цели как правило используются ГИС-сервера (geoserver, mapserver), которые умеют публиковать большое количество разнообразных форматов данных по стандартам OGC. Так, WMS протокол прекрасно справляется с функцией визуализации готовой карты, но не предполагает функции редактирования, для которой резонно использовать WFS-протокол с возможностью изменения данных. Запросы к WMS возвращают уже отрисованные тайлы — картинки, а к WFS — сырую информацию, «исходный код» за этими тайлами. Leaflet поддерживает модули расширения, соответственно, можно поискать готовый компонент, либо написать свой. Т.к. поиск готовых модулей для Leaflet удовлетворяющих результатов не дал, мы приступили к собственной реализации.

По статистике запросов на leaflet.uservoice.com понятно, что данный модуль интересен не только нам.

Хотел бы поведать свою историю об установке геокодера Nominatim на выделенный сервер. Изначально предполагалось, что эта задача займёт у меня около 5-7 часов, но не тут то было… Поэтому было решено написать статью c описанием разворачивания Nominatim на сервер до полной работоспособности сайта. Но обо всём по порядку.

И снова, здравствуйте!

Сегодня мы продолжаем знакомство с картами Bing Maps. В предыдущей статье мы разобрались с тем, как добавить карту в Windows приложение, а также посмотрели, как работать с метками на карте.

В этой части мы будем продолжать улучшать нашу карту и добавлять различные полезные функции, такие как определение GPS-координаты, построение маршрутов и отображение информации о дорожной ситуации.

Перед разработчикам, которые используют API Яндекс.Карт, довольно часто встаёт задача отобразить много объектов на карте. Действительно много — порядка 10 000. Причем эта задача актуальна и для нас самих — попробуйте поискать аптеки на Яндексе. На первый взгляд кажется: «А в чем собственно проблема? Бери да показывай». Но пока не начнешь этим заниматься, не поймешь, что проблем на самом деле целый вагон.



Вопросы по большому количеству меток с завидной регулярностью поступают в наш клуб и техподдержку. Кто все эти люди? Кому может быть интересно показать на карте больше 10 меток? В этом посте я подробно рассмотрю весь вагон проблем и расскажу, как в API появились инструменты, помогающие разработчикам оптимально показать большое количество объектов на карте.

Приветствую вас, сообщество!

Хочу предложить вашему вниманию, все таки доведенную до определенной точки, свою библиотеку для визуализации данных blackHole.js использующую d3.js.
Данная библиотека позволяет создавать визуализации подобного плана:
картинки кликабельные
или

Статья будет посвящена примеру использования blackHole.js совместно с leaflet.js и ей подобными типа mapbox.
Но так же будут рассмотрено использование: google maps, leaflet.heat.

Получится вот так =)

Поведение точки зависит от того где я находился по мнению google в определенный момент времени

Посмотрите, а как перемещались вы?...

Огромное число поселений, наиболее уязвимых для катастроф и эпидемий, оставались белым пятном на карте мира… до сегодняшнего дня. Станьте частью беспрецедентного плана: нанести на карту самые далёкие уголки мира.

Отдел «Guardian Cities» примет у себя картовстречу проекта «Недостающие карты»: нарисуем карту африканского города. Присоединяйтесь: cities@theguardian.com


Карта Монровии (Либерия) до и после. Благодаря команде гуманитарной картопомощи (Humanitarian OpenStreetMap Team, HOT), в борьбе с вирусом Эбола городу поможет свободная электронная карта.

В 2010 году землетрясение ударило по Гаити. Сотни тысяч человек погибли. Но худшее ожидало впереди. Эпидемия холеры вырвалась из-под контроля. С Иваном Гейтоном (Ivan Gayton) из организации «Врачи без границ» (Médecins Sans Frontières, MSF) связалась медсестра из удаленной деревни, затерянной среди гаитянских лесов. «Помогите, пожалуйста,» — просила она, — «Нас настигла жуткая болезнь, с которой мы ещё не сталкивались».

В городе Красноярске намечено проведение Универсиады в 2019 году, в связи с этим и не только администрация Красноярска проводит разработку генерального плана территориального развития города до 2033 года. Недавно чиновники выложили схемы генерального плана на сайте администрации города для общественного обсуждения. Но вот незадача: просмотр и анализ схем неудобен, потому что файлы имеют большие размеры и разрешение. Например, файл основной схемы имеет размер 43,34Мб и разрешение 19256x16019px. У меня компьютер тормозит при просмотре такой картинки.

Немного поскриптовав с коллегами, сделали вот такую интерактивную карту antirek.github.io/krskmap/main/index.html



Далее немного подробнее, как сделать свою карту на leaflet.js из картинки с большим разрешением.

Мы рассказали про новый 2ГИС почти всё. Точнее, почти обо всём, с чем сталкивается пользователь. Настало время рассказать о том, что у него “под капотом”. Угадали, речь об API 2ГИС.

Если вы пользовались новым 2ГИС с момента его появления, вы уже видели 2GIS API 2.0 в деле. Сегодня же он вышел из статуса беты и стал доступен всем желающим. Отдельно хотим поблагодарить тех, кто участвовал в тестировании: ребята, спасибо, вы помогли сделать продукт именно таким, каким он получился. То есть более, чем неплохим.

Если вам не терпится попробовать новый API, то посмотрите сюда. Те, кто любит не только смотреть, но и читать, загляните под кат.