Комбинация библиотек D3.js и Leaflet предоставляет мощный инструментарий для создания интерактивных географических визуализаций. Leaflet отвечает за отображение карт и управление слоями, а D3.js позволяет добавлять кастомные элементы, такие как маркеры, линии или сложные графы. В этой статье мы рассмотрим, как интегрировать D3.js с Leaflet для размещения объектов и построения графов на карте, центрированной в Казани, а также предоставим пример кода для практического применения.
Рубрика «Leaflet»
Создание интерактивных карт с D3.js и Leaflet: Визуализация объектов и графов
2025-05-02 в 6:15, admin, рубрики: d3.js, frontend-разработка, javascript, Leaflet, графы, картаБесплатные векторные карты на своём хостинге
2024-01-29 в 9:00, admin, рубрики: COG, GeoTIFF, gis, google maps api, Leaflet, Mapbox GL, Mapbox Vector Tile, MapLibre GL, MapLibre GL JS, Maputnik, openlayers, OpenMapTiles, OpenStreetMap, PMTiles, postgis, protocol buffers, Protomaps, protomaps-leaflet, protomaps.js, ruvds_статьи, векторные карты, тайлы
Векторные карты Protomaps на базе OSM
Каждый веб-разработчик знает о OpenStreetMap (OSM), свободной альтернативе Google Maps. Несмотря на всеобщую известность OSM, у некоторых всё-таки возникают вопросы: как сделать веб-карту с открытыми данными OSM, как самостоятельно публиковать карты?
На эту тему есть популярные руководства, в том числе по работе с базами PostGIS и запуску тайлсерверов для реализации бесшовных карт OSM. Но есть принципиально иной подход — векторные карты Protomaps, которые обеспечивают более высокое разрешение, настройку внешнего вида и наложение произвольных меток. Они изначально предполагают максимальную простоту в создании своих карт. А главное, что разместить тайлы можно на своём хостинге или в облаке.
Читать полностью »
Как мы с друзьями собрали сервис для построения маршрутов для походов и велопутешествий ActiveTrip.me
2022-03-26 в 10:45, admin, рубрики: brouter, graphhopper, Leaflet, MapBox, OpenStreetMap, valhalla, Геоинформационные сервисы, планировщик, походы, путешествия, Развитие стартапаВсем привет! Меня зовут Александр, я разрабатываю ActiveTrip.me — cервис для построения маршрутов для пеших, велосипедных, водных походов и путешествий, а также для хранения и группировки интересных мест в виде меток.
О том, почему мы начали делать такой сервис, расскажем подробно в отдельной статье, а здесь осветим технические особенности.
Leaflet. Дружим Image с Canvas
2020-01-30 в 13:16, admin, рубрики: canvas, javascript, Leaflet, Maps API, Разработка веб-сайтов
Доброго времени суток, дорогие хабрахабровцы!
Leaflet — библиотека, позволяющая добавить интерактивные карты на Ваш сайт и легко их кастомизировать. Сегодня рассмотрим то, как можно разместить изображения на Canvas-слое карт, совместно с базовыми маркерами.
Читать полностью »
Как подключить карты в эллипсоидной проекции, если это не предусмотрено?
2020-01-07 в 17:59, admin, рубрики: Leaflet, OpenStreetMap, osmand, swift, yandex map, Геоинформационные сервисы, картографические сервисыИли как подогнать тайлы Яндекс карт под проекцию OpenStreetMaps?
Вступление
Каждый раз, когда открываете какую-нибудь онлайн-карту, вы не скачиваете ее целиком. Для ускорения загрузки карты разделена на небольшие кусочки (тайлы), чтобы можно было скачать только нужную область. Проблем в том, что разрезать на эти квадратики можно несколькими способами.
Читать полностью »
Почему я отказался от Google Maps API
2019-12-18 в 16:25, admin, рубрики: api, google maps api, Leaflet, MapBox, Maps API, NUKEMAP, Геоинформационные сервисы, грибовидные облака, Разработка веб-сайтов, физика, ядерные взрывыTL;DR Недавние изменения в модели ценообразования, мягко говоря, безумны.
Когда я в 2012 году запустил NUKEMAP, у Google Maps были просто потрясающие программные интерфейсы. Абсолютно лучшие API для создания картографических мэшапов на JavaScript, практически бесплатные, с активным сообществом разработчиков, которое регулярно добавляло новые функции. На самом деле создавалось впечатление, что компания заинтересована в людях, которые используют их продукт для создания крутых, полезных инструментов.
Старые версии NUKEMAP: слева оригинальная версия от марта 2005 года на скриншотах MapQuest (она была чрезвычайно ограничена и никогда не публиковалась), полностью на PHP. Я разработал её для личного пользования и обучения. Справа переделанный NUKEMAP от 2012 года на Google Maps API и Javascript.
Сегодня изменилось почти всё. В кодовую базу API практически перестали добавлять реально полезные функции (многие классные фичи были удалены или тихо устарели; добавляемые новые функции, как правило, инкрементальные или примитивные). Это действительно весьма примечательный факт, поскольку на свой собственный веб-сайт Google Maps они добавили много классных штук, например, режим 3D. Но в API их не портировали.Читать полностью »
Карта ДТП
2019-02-03 в 19:54, admin, рубрики: django, Leaflet, open source, python, python 3, ReactJS, vision zero, Геоинформационные сервисы, Гибдд, ДТП, карта, краудфандинг, открытые данные
Расскажу вам о проекте “Карта ДТП” – интерактивной карте аварий в России. Карта упрощает анализ ДТП и помогает найти реальные причины происшествий. Как пришла идея, где брали данные и зачем открыли исходный код.
За 2018 год в ДТП на дорогах России погибли 19088 человек
Прощай, Google Maps
2018-07-20 в 13:25, admin, рубрики: api, Google Maps, Leaflet, MapBox, Maps API, MapTiler, Монетизация веб-сервисовGoogle решил сделать из Google Maps новый миллиардный бизнес, подняв цены в 14 раз и уменьшив лимит бесплатного использования почти в 30 раз, всё с минимальным периодом уведомления. К счастью, это немедленно стимулировало конкуренцию. Apple Maps, MapBox, TomTom — что выбрать?
Наш стартап GdziePoLek.pl позволяет пациентам находить нужные лекарства в обычных аптеках. И даже по названию («где найти лекарства») понятно, насколько важно отображение на карте. Работу сервиса легко объяснить одной картинкой, на фоне которой всегда были карты Google Maps:
Типичная страница нашего сервиса показывает наличие лекарства в аптеках
Читать полностью »
Leaflet 1.x.x vs Openlayers 4.x.x. Часть 2. Как рисуются карты
2017-10-09 в 6:23, admin, рубрики: canvas, gis, javascript, Leaflet, open source, openlayers, Геоинформационные сервисыВ прошлой статье обещал, что эта будет про сообщества и плагины, но потом решил, что правильней будет сначала рассказать о том, как в данных фреймворках рисуются карты. Начну с Openlayers, потом Leaflet, потом его плагины.
Leaflet 1.x.x vs Openlayers 4.x.x. Часть 1. Исходный код
2017-06-29 в 8:26, admin, рубрики: gis, javascript, Leaflet, open source, openlayers, Геоинформационные сервисыХочу поделиться опытом работы с данными JS-картографическими фреймворками, надеюсь материалы помогут сделать выбор в вопросе: какую библиотеку использовать именно в вашем проекте. Чтобы не утомлять, разобью его на несколько логических частей. Начнем с основного и исходного — кода.
