Эта история про то, как обычная задача «собрать маршрут на выходные» превратилась в сервис, которым сейчас пользуюсь не только я. Без кода и сложных терминов — просто что я хотел, что из этого вышло и где я ошибался.
Рубрика «Leaflet»
Планировщик маршрутов для походов, который я писал для себя и почему другие сервисы заставили меня это сделать
2026-09-23 в 13:18, admin, рубрики: gpx, Leaflet, maplibre, OpenStreetMap, PMTiles, векторные тайлы, растровые тайлы, туризмКарта чёрная, в консоли ни одной ошибки. Три бага одной подложки
2026-09-22 в 15:54, admin, рубрики: Leaflet, maplibre, openfreemap, svelte, vite, web-worker, карты, отладкаМы делаем карту загруженности московских парковок — parkout.ru. Раз в полчаса собираем данные по 210 муниципальным парковкам, показываем теплокарту и прогноз.
Подложка у нас была растровая, от Esri. И она была мыльная. На максимальном зуме вместо домов — кашица из пикселей, подписи не читаются. Стали разбираться: оказалось, что тайлы z17 и z18 приходят одинаковыми — байт в байт, 2521 байт каждый. Это заглушка. Выше z16 у этого слоя данных просто нет, а сервер вместо 404 отдаёт растянутую картинку.
Решение очевидное: переходим на векторные тайлы. Взяли OpenFreeMap (стиль positron), MapLibre GL и адаптер @maplibre/maplibre-gl-leafletЧитать полностью »
1000 объектов, React и Claude: как я сделал интерактивную карту завода не будучи программистом
2026-03-19 в 13:29, admin, рубрики: gis, Leaflet, qgis, React, вайбкодинг, карта завода, сезон heavy digital, цифровизацияС чего всё началось
Создание интерактивных карт с D3.js и Leaflet: Визуализация объектов и графов
2025-05-02 в 6:15, admin, рубрики: d3.js, frontend-разработка, javascript, Leaflet, графы, картаКомбинация библиотек D3.js и Leaflet предоставляет мощный инструментарий для создания интерактивных географических визуализаций. Leaflet отвечает за отображение карт и управление слоями, а D3.js позволяет добавлять кастомные элементы, такие как маркеры, линии или сложные графы. В этой статье мы рассмотрим, как интегрировать D3.js с Leaflet для размещения объектов и построения графов на карте, центрированной в Казани, а также предоставим пример кода для практического применения.
Почему выбирают D3.js и 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, Геоинформационные сервисы, Гибдд, ДТП, карта, краудфандинг, открытые данные
Расскажу вам о проекте “Карта ДТП” – интерактивной карте аварий в России. Карта упрощает анализ ДТП и помогает найти реальные причины происшествий. Как пришла идея, где брали данные и зачем открыли исходный код.