Рубрика «Maps API» - 2

Введение

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

К сожалению (или к счастью?), готовых решений я не нашёл. Google Карты позволяют накладывать маркеры и фигуры на карты, но эти способы представляют слишком мало информации. С Яндекс картами оказалось не лучше. Но Карты Гугл имеют механизм пользовательских наложений с HTML-содержанием. И для инкапсуляции этой работы с картами и наложениями я создал JavaScript библиотеку GMapsTable. Возможно, кому-нибудь она окажется интересной или полезной. Рабочий пример.

image

Читать полностью »

image

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

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

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

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

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

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

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

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

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

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

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

Читать полностью »

Недавно мы обновили стиль картографического сервиса портала «Спутник». И хотим рассказать, как мы работали над обновлением, с чем экспериментировали и к чему в итоге пришли. Мультимасштабная веб-карта совмещает в себе различные функции, каждая из которых могла бы быть выполнена отдельной бумажной картой – она и топографическая, и дорожная, и туристическая, и основа для различных портальных сервисов. Поэтому создание стиля веб-карты — это непрерывный поиск универсального решения для отображения объектов, которое позволило бы одинаково успешно применять карту для различных задач пользователей.
Читать полностью »

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

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

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

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

Как добавить карты Bing Maps в Windows-приложение на HTML и JavaScript. Часть 2 - 1

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

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

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

Как добавить карты Bing Maps в Windows-приложение на HTML и JavaScript. Часть 1 - 1

Всем привет!

В этой статье мы научимся работать с Bing-картами в Windows-приложениях. В результате мы получим приложение на JavaScript с использованием Bing Maps SDK.

Помимо использования карты в приложении, мы рассмотрим дополнительные возможности SDK. Научимся изменять вид карты, добавлять метки и описания, а также информацию о пробках.

Читать полностью »

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

ObjectManager в API Яндекс.Карт. Как быстро отрисовать 10000 меток на карте и не затормозить всё вокруг - 1

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

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

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

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

Получится вот так =)
BlackHole.js с привязкой к картам leaflet.js

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

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

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

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

image
Карта Монровии (Либерия) до и после. Благодаря команде гуманитарной картопомощи (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

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

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js