Pull to refresh

Kothic JS: рендерер OpenStreetMap, поддерживающий MapCSS/0.2, портировали на джаваскрипт, рисующий по холсту

Reading time1 min
Views4K
Многим поклонникам OpenStreetMap хорошо известен рендерер (отрисовщик) под названием Kothic, отличающийся неплохою поддержкою перспективного черновика стандарта картографических стилей MapCSS/0.2 и способный рисовать зрелищные векторные карты (даже и псевдо-3D — в косоугольной проекции, судя по скриншотам).

Несколько дней назад без особого шума (если не считать отдельной страницы в вики OSM да ещё одной записи в твиттере у автора другой небезынтересной библиотеки — Leaflet, о которой упоминалось ужé на Хабрахабре и которая успела с тех пор заметно подразвиться) на свет Божий вышла версия Kothic, портированная на JavaScript и называющаяся по такому случаю Kothic JS. Взаимодействуя с Leaflet, скрипт Kothic JS отрисовывает векторную карту на холстах (HTML5 canvas) и формирует из этих холстов квадратные плитки («тайлы») для картографического движка Leaflet. Всё это происходит прямо во браузере.

Читать дальше →
Total votes 30: ↑22 and ↓8+14
Comments37

Интернет картография с открытым исходным кодом

Reading time7 min
Views8.8K
Здравствуйте. Я продолжаю серию статей, про картографирование в интернете с использованием набора программного обеспечения с открытым исходным кодом MapBox, от компании Development Seed.

Предыдущие части:
  1. Обзор студии
  2. Введение в TileMill
  3. Расширенные возможности

Сегодня я рассмотрю:
  • Высокопроизводительный тайловый сервер TileStream
  • Легковесные картографические библиотеки Modest Maps и LeafLet
  • Использование TileStream вместе с картографической библиотекой OpenLayers
  • Использование расширенных возможностей TileMill с помощью библиотеки Wax


Интересно? Приглашаю под кат.
Читать дальше →
Total votes 34: ↑33 and ↓1+32
Comments7

Карты для всех, даром

Reading time9 min
Views52K
Программисты — редкие люди. Мы можем сделать абсолютно всё, но интернет отвечает на это зияющей пустотой, где нужно делать абсолютно всё. Особенно если живёшь в непрофильных сообществах. Запросы со всех сторон, тут нужно подлатать, там плагинчик дописать, и никто, кроме тебя. Эта история — про один из таких пробелов, который я надеялся закрыть за неделю, и та неделя всё продолжается. В программе: дорожное строительство и велосипедисты, сайт для обмена картами лучше яндекса, осмеры без осма, архитектура плагинов в форумных движках и интерактивные карты прямо в хабре.

Читать дальше →
Total votes 107: ↑103 and ↓4+99
Comments35

2GIS API 2.0

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

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

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


Читать дальше →
Total votes 82: ↑76 and ↓6+70
Comments32

Моя первая карта на Leaflet.js

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

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

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

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

Выбор пал на leaflet.js, так как это оболочка с открытым кодом, на ней сделаны OSM и мой любимый 2GIS. К тому же он хорошо работает на мобильных устройствах.
Читать дальше →
Total votes 17: ↑15 and ↓2+13
Comments25

Редактирование пространственных данных в Leaflet

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

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

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

По статистике запросов на leaflet.uservoice.com понятно, что данный модуль интересен не только нам.
Приступим к реализации
Total votes 13: ↑13 and ↓0+13
Comments5

Выборы-2016. Часть 1 — результаты и сравнения

Reading time3 min
Views17K

В сентябре прошли выборы в Госдуму РФ VII созыва. При голосовании вся территория России была разделена на 225 округов. В каких округах каждая из партий получила высокие (или низкие) результаты? Какие значения принимала явка избирателей и как она влияла на результаты партий? Ответы на эти вопросы и ряд других наблюдений представлены в этой публикации.


Читать дальше →
Total votes 46: ↑44 and ↓2+42
Comments20

Прощай, Google Maps

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

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


Типичная страница нашего сервиса показывает наличие лекарства в аптеках
Читать дальше →
Total votes 130: ↑128 and ↓2+126
Comments203

Leaflet. Дружим Image с Canvas

Reading time4 min
Views10K
Leaflet Map

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

Leaflet — библиотека, позволяющая добавить интерактивные карты на Ваш сайт и легко их кастомизировать. Сегодня рассмотрим то, как можно разместить изображения на Canvas-слое карт, совместно с базовыми маркерами.
Читать дальше →
Total votes 10: ↑10 and ↓0+10
Comments1

Почему я отказался от Google Maps API

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

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


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

Сегодня изменилось почти всё. В кодовую базу API практически перестали добавлять реально полезные функции (многие классные фичи были удалены или тихо устарели; добавляемые новые функции, как правило, инкрементальные или примитивные). Это действительно весьма примечательный факт, поскольку на свой собственный веб-сайт Google Maps они добавили много классных штук, например, режим 3D. Но в API их не портировали.
Читать дальше →
Total votes 86: ↑84 and ↓2+82
Comments45

Как подключить карты в эллипсоидной проекции, если это не предусмотрено?

Reading time4 min
Views3.6K
Или как подогнать тайлы Яндекс карт под проекцию OpenStreetMaps?

Вступление


Каждый раз, когда открываете какую-нибудь онлайн-карту, вы не скачиваете ее целиком. Для ускорения загрузки карты разделена на небольшие кусочки (тайлы), чтобы можно было скачать только нужную область. Проблем в том, что разрезать на эти квадратики можно несколькими способами.
Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments1

Как  делали онлайн карту объектов культурного наследия

Reading time5 min
Views3.3K

В нашем рассказе речь пойдет про то, как мы реализовывали проект “Сохраним наследие” и делали онлайн карту памятников истории и культуры historymap.online. Это небольшая обзорная статья про наш проект. Она не содержит каких либо решений только общую концепцию. В дальнейшем планируем более детально описать этапы работ. 

Читать далее
Total votes 15: ↑15 and ↓0+15
Comments19

Интерактивная карта развития Московского метрополитена

Reading time11 min
Views22K

15 мая 1935 была открыта первая очередь Московского метрополитена. С этого момента началась новая эра в истории города, в котором подземка, безусловно, играет важную роль.

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

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

Давайте создадим интерактивную карту линий Московского метрополитена и посмотрим на его историю — как развивалась одна из самых больших сетей мира.

Читать далее
Total votes 63: ↑63 and ↓0+63
Comments35

Tile server на коленке: навигация по старинным картам

Reading time5 min
Views7.7K

Я являюсь full stack разработчиком на культурно-историческом IT портале Königsland, который успешно начал свою работу примерно месяц назад. Этот ресурс посвящается культуре и истории Восточной Пруссии и является своеобразной летописью времен, которая больше всего напоминает вирутальный музей, где можно получить довольно полную информацию об истории этого великого края, а эта информация пополняется по мере возникновения у меня свободного времени.

Страницы этой летописи приоткрывают завесу тайны и позволяют получить пользу от современных технологий тем, кто увлекается стариной.

Читать далее
Total votes 12: ↑12 and ↓0+12
Comments14

Интерактивная карта Московского метрополитена: наводим красоту

Reading time3 min
Views6.1K

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

Читать далее
Total votes 19: ↑19 and ↓0+19
Comments10

Как мы с друзьями собрали сервис для построения маршрутов для походов и велопутешествий ActiveTrip.me

Reading time7 min
Views22K

Всем привет! Меня зовут Александр, я разработчик ActiveTrip.me — cервиса для построения маршрутов для пеших, велосипедных, водных походов и путешествий, а также для хранения и группировки интересных мест в виде меток.

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

Читать далее
Total votes 33: ↑33 and ↓0+33
Comments55

Как работают сервисы карт и маршрутизации

Level of difficultyEasy
Reading time8 min
Views5.9K

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

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

Как работают сервисы карт и маршрутизации?
Total votes 13: ↑12 and ↓1+11
Comments3

Карты в браузере без сети: open source наносит ответный удар

Reading time14 min
Views41K
Как-то давно я писал о том как можно в вебе использовать карты без сети и пытался сделать это с помощью гугло карт. К сожалению условия использования запрещали модифицировать ресурсы, а написанный мною код работал только с localStorage, поэтому я решил перейти на светлую сторону силы, где код открыт, прост и понятен.
Читать дальше →
Total votes 61: ↑59 and ↓2+57
Comments21

Для этого есть карта

Reading time1 min
Views18K
Не так давно мы начали рендерить 3D-модели на Гитхабе. Сегодня мы с удовольствием объявляем о новейшем прибавлении в семействе визуализаций — о геоданных. Любой файл .geojson в репозитории на Гитхабе теперь станет автоматически отображаться в качестве интерактивной карты (с возможностью листания), снабжённой вашими геоданными.

[скриншот 2013-06-13 10:23:32]

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

«Под капотом» мы используем Leaflet.js для отображения данных geoJSON поверх специальной версии базового слоя карты улиц MapBox упрощённого, чтобы данные ваши на нём воссияли. Лучше же всего — то, что картооснова использует данные OpenStreetMap; так что, если пожелаете улучшить какой-либо участок её, редактируйте тотчас же.

Карты на Гитхабе поддерживают отображение данных ГИС как точек, линий и многоугольников. Вы даже можете донастроить способ отображения ваших данных — например, изменить цвета и размеры отдельных пометок, указать более понятные значки, указать дополнительные свéдения для чтения читателем, ткнувшим по заинтересовавшей его пометке на карте.

Читать дальше →
Total votes 74: ↑68 and ↓6+62
Comments17

Мы хотим от тебя сына!

Reading time3 min
Views54K
Хабравчане, привет.

Вкратце: этот пост про неофициальный рейтинг зданий, Хакатон компании 2ГИС и про то, как мы сами немного обалдели от того, что натворили.



Читать дальше →
Total votes 136: ↑103 and ↓33+70
Comments70
1