Пользователь
0,0
рейтинг
26 декабря 2013 в 17:48

Разработка → Карты для всех, даром

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


Пятьдесят четвёртый километр

Я интересуюсь многим. Когда-то водил пятничные ночные велосипедные покатушки, сейчас помогаю людям понять, что OpenStreetMap — лучшая карта в мире, и попутно слежу на форуме «Проектов Петербурга» за дорожным строительством в городе и области. Федеральный бюджет означает новости каждый день: там перекрыли и раскопали, тут неудобный переход возвели, ВАД снова досрочно построил идеальную развязку. Участники форума быстро освоили OSM, поэтому на карте Ленинградской области дороги открываются ровно в день перерезания ленточки, и все планы настолько точны, что распечатки OpenStreetMap висят в офисах строительных компаний.

Одно неудобно: нет карт под рукой. В городе ещё можно на словах привязаться к улицам (все знают, где Солунская улица пересекается с Тбилисской), а за городом — либо «ограничат движение на трассе с 54 по 81 километр», либо «база строителей стоит за развязкой в Скотном, шесть километров на север и один на запад»: всё непонятно. Поэтому участники фотографируют Яндекс.Карты и прикрепляют картинку. Это в лучшем случае, иначе просто дают ссылку. Расставлять точки фотографирования на карте — это вообще особая уличная магия. Фотоотчёт со стройки железной дороги от Лосева до Каменногорска я сделал на отдельном сайте, чтобы карта была под рукой, но открытость и простота инструмента поможет никому: у многих даже своей страницы нет. Нужна настоящая карта, полнофункциональная и простая.

Весной я понял, что 1) библиотека Leaflet делает встраивание карты элементарным, 2) никто, кроме меня, не напишет нормального плагина карт. Потому что главный принцип open source: кому нужно — тот и пишет. Сразу придумал формат кода. Базовая предпосылка: карты неотделимы от текста, как картинки и ссылки, поэтому они должны выражаться в обычном bb-коде, разумеется, [map]. Внутри тега через точку с запятой перечисляются объекты, выражаемые последовательностью координат. Одна пара «широта, долгота» — будет маркер, две и более через пробел — линия, первая точка равна последней — многоугольник. После координат в скобках может идти подпись. Примерно вот так:

[map]59.939,30.316(Дворцовая); 59.937,30.3127 59.9312,30.36[/map]

Целевой форум работает на движке 2006 года (то было время IE 7 и Opera 9), поэтому завязываться на него неразумно. Я решил всю функциональность, включая парсер, вынести в библиотеку на JavaScript, чтобы потом подключать её к разным движкам. Благодаря Leaflet.draw, моя работа свелась к разработке API и плагина. Дело спорилось: комментарий к коммиту от 1 октября сообщает «almost final». Но технологическая демка — одно, а промэксплуатация требует доводки: причесать и разбить на модули исходник, проверить в куче браузеров, дописать важные функции, отполировать форматы и параметры. Спустя неделю после начала разработки исходники переехали из личного svn на гитхаб, и начался необычно длинный гитхабовский streak: аж 23 дня (до этого было 5). Игра в поддержание цепочки дней увлекает: после пары недель иногда хочется просто добавить тикет, чтобы участие зарегистрировалось.

28 октября плагин установили на форум, 31 октября вышел релиз 1.0.0.



После выпуска я понял, что хранить документацию на гитхабе — не дело: как её переводить? Появился mapbbcode.org с демонстрацией библиотеки, ссылкой на плагины и, на сегодня, 80 килобайтами документации на английском и 50 — на русском языках. Библиотека, тем временем, научилась подключать проприетарные слои гуглояндекса, потому что это был второй вопрос всех администраторов (первый — «почему слой не хранится в bb-коде?»). Сразу комментарий с форума OpenStreetMap: «начиналось как инструмент ОСМа, а получится очередной гуглоплагин». ЯРОСТЬ. Добавил в релевантные классы проверку, не как гуглоплагин ли библиотеку используют. Другой осмер: «по-моему, это как-то мелочно». Всё им не так.

Формат bb-кода предусматривает расширение через параметры, и это отозвалось в библиотеке. Обработку подписей и параметров цвета, подсчёт длины линий и прореживание точек ломаных — всё можно сделать через хэндлеры. С появлением задач их API быстро перерос API для пользователей библиотеки: там и модификация объектов, и управление картой, и тонкая настройка редактора. Через них вполне реально встроить в редактор ещё один редактор, или вырезать дырки из бубликов.

Когда за полтора месяца после релиза никто не перевёл ни слова на новые языки, я заподозрил, что перевод методом пул-реквестов бесперспективен. Стащив скрипт из репозитория редактора iD, я отправил все строки на Transifex, и скачиваю их перед сборкой релиза. «Ну офигеть заживём теперь» — потирая руки, удовлетворил чей-то запрос на добавление немецкого языка в проект. Затем ещё добавил французский язык. Я ещё много могу добавить — только толку, когда даже тот немец куда-то сбежал. Видимо, проблема была не в пул-реквестах.

Сделать хотел утюг — слон получился вдруг

Пользовательские карты — это обычные строки. А что если их хранить в базе данных? MapBBCode + БД = простой сервис для обмена картами, MapBBCode Share. Исходный код карты доступен — его можно скопировать на форум или в блог. Вдохновляясь openstreetmap.ru, я сделал выдачу двух ссылок после сохранения: на просмотр и на изменение. И тут на форуме организатор московской картовстречи выложил ссылку на редактирование плана, сломав мне шаблон. Внезапно оказалось, что я написал замечательный инструмент для совместного планирования маршрутов и встреч.



Сайт анонимен и ничего не требует: зашёл, нарисовал линии с маркерами, нажал «Сохранить», получил ссылку. Чтобы не захламлять закладки браузера ссылками на редактирование, сделал вход через OAuth: полученный идентификатор хэшируется, чтобы даже администратор не знал, кто рисует карты, а API не позволяет связать хэши и карты, поэтому даже косвенное узнавание исключено. Это не гугль, который записывает в базу каждый чих: в некотором роде я захотел сделать абсолютно безопасный сервис.

Затем — кнопки импорта и экспорта. Я обожаю обрабатывать данные, поэтому сайт поддерживает около 11 основных форматов, включая CSV, GPX, GeoJSON (куда ж без него), форматы OziExplorer и HTML. В отличие от всех остальных сайтов, MapBBCode Share выдаёт абсолютно самодостаточный HTML (не считая зависимости от Leaflet): никаких ссылок на MapBBCode, никаких условий. А учитывая остальные форматы, сервис можно использовать для преобразований: CSV→HTML для визуализации таблицы, или PLT→GPX.

Ну и API. Сделав ключ ?format=raw, меня осенило в очередной раз, какой эпичный сайт я написал. У класса MapBBCode появился новый метод: банальным вызовом showExternal('divid', 'код') можно загрузить и показать внешнюю карту. Например, увидев, как здорово в OSM прорисована олимпийская инфраструктура, сделал таким образом сайт-открытку про Сочи. Во всех форумных плагинах появился код [mapid], одну и ту же карту можно вставить везде, где поддерживается код, можно её совместно редактировать, и можно скачивать трек прямо кнопкой из форума. Безо всяких <iframe>. Разумеется, исходный код сервера открыт, и плагины позволяют администратору направить запросы к себе.

Ваш плагин очень важен для нас, оставайтесь на линии

Быстро пришло понимание, что несмотря на простоту API (реально, объект с двумя методами, show и editor) и подробное руководство по интеграции, плагины для форумов никто не напишет. Первый принцип open source, вы помните. А планы наполеоновские: захватить велопитер (FUDForum), велороад (местные марафонцы, phpBB 3), форум OSM (FluxBB), веломанию (vBulletin), псковский внедорожный клуб (SMF). Позже в них вписались форумы ситигида (IP.Board) и краснодарских джиперов (PunBB). Ёлки-палки, зачем столько разных движков? Это какой-то ад.

Процесс программирования неинтересен: ну сел, ну про… 4-5 дней, получил плагин и опыт. Расскажу про системы модификаций.

Форумы делятся на два типа: которые нужно менять построчно (плагины называются модификациями и являются облагороженными диффами) и которые истыканы хуками (плагины делятся на мелкие функции, вызываемые из разных точек). Первые — ужасны. Просто мрак. Это phpBB3, SMF и FluxBB — уникальный движок, превозносимый за свою скорость, а систему модификаций рецензенты тактично пропускают. Немудрено: её нет. Совсем. Движок концептуально минималистичен, даже без кнопок bb-кода в редакторе (а для MapBBCode кнопка открытия редактора важна: пользователь не будет писать координаты руками), при этом нет абсолютно никакого способа установки расширений, кроме как лезть в дебри кода и вручную править строки. Безумие.

При этом писать плагины под другую его ветвь, PunBB, — непрерывное удовольствие. Сотня хуков, всё чисто и ясно, из минимализма следует простота, из простоты — понимание, как всё работает, и куда встраиваться. Установка плагинов элементарна: распаковать архив, нажать в панели администратора кнопку «установить». И, конечно, есть кнопка удаления, с которой у форумов первого типа проблема. Но жизнь жестока: у PunBB последний релиз был два года назад, и он медленно умирает, а на форуме FluxBB жизнь бурлит. FUDForum, тоже быстрый и с хуками, еле дышит, поддерживаемый одним человеком.

На сегодня я выпустил плагины для phpBB 2, phpBB 3 (они сильно различаются), FUDForum, PunBB и FluxBB. Ожидание: «спасибо за плагин, мы его установили и все пользуемся!» Реальность: «спасибо, но не хочу ничего трогать», «внедрю, только чуть позже», «в Грузии надписи не переведены и у треков метки времени не сохраняются, лучше по-старинке». На одном из форумов на phpBB 3 администратор с энтузиазмом начал ставить, но AutoMOD внезапно сглючил, не сумев банально скопировать файлы, и больше вестей оттуда нет. Администратор форума OpenStreetMap не отзывается. Карты никому не нужны: на строительном форуме пригодились, а велосипедистам и джиперам проще GPSies и озик.



Все платят


Где-то на горизонте маячит грааль, форум, который придаст всей этой нескончаемой работе смысл. SkyscraperCity тоже посвящён строительству, но в масштабах всей планеты. Он входит во все десятки крупнейших форумов сети. Администратор заинтересован в плагине. Одно «но»: форум, как и первая сотня других крупнейших, работает на vBulletin. А этот движок кругом закрыт: никаких исходников, никакой документации, никакого кода на форуме пользователей (!), пока не купишь лицензию (от 250$). Даже если не собираешься его устанавливать, а хочешь лишь расширить каталог плагинов. Служба поддержки отвечает односложно:

— You would need a license to get access to the vBulletin code.
— We do not offer any sort of development license, sorry.

С другой стороны множатся просьбы окучить IP.Board. Который весь такой красивый, дружелюбный и с документацией, вот только тоже платный и «извините, до свидания». Полагаю, продавцы этих движков считают, что администраторы пускай и пишут плагины, а сторонних разработчиков так мало, что ими можно пренебречь. Хотя… Наверное, это правда.

Насильное проникновение

Наконец, движок моего новостного блога «ШТОСМ» намертво закрыт. Хватит это терпеть: к чёрту руководство по интеграции, у меня за плечами 100 килобайт кода, смогу обойти и эту проблему. И смог. MapBBCode Loader — маленький скрипт, который втихую рассматривает страницу, и едва завидит bb-код карты, подключает все нужные библиотеки и превращает коды (желательно, обёрнутые в <div class="mapbbcode">) в интерактивные карты, а на кнопки с class="mapbbcode_edit" вешает редактор. По сути, это плагин для чего угодно в одну строку.

Зачем объяснять, когда можно показать? Скопируйте следующую строку в поле адреса браузера. В IE и Chrome потребуется восстановить префикс «javascript:», в Firefox нужно нажать Shift+F4, скопировать в окно и нажать Ctrl+R. Спасибо jsDelivr за отзывчивый CDN.

javascript:(function(){document.body.appendChild(document.createElement('script')).src = '//cdn.jsdelivr.net/mapbbcode-loader/1.2.0/MapBBCodeLoader.plain.js';})();

[map]56.4077,40.44374(B); 56.12384,40.38076(R ); 57.61273,39.83042(R ); 57.75955,40.9372(A); 56.31796,38.12943(H); 57.18758,39.41592(B); 56.73446,38.85856(A); 57.51117,41.23761(H); 55.7574,37.6623 58.0721,40.5286 57.439,41.3635 56.0414,40.188 55.9247,39.4626(black|); 56.9995,40.9675(A)[/map]

И победа: в штосме появились карты, а модификация для FluxBB свелась к четырём правкам: одна на загрузчик, две на bb-код и одна на кнопку редактора. Добавить карту на сайт может любой, а некоторые движки позволяют это сделать, совсем не касаясь файлов (например, phpBB 3 и, теоретически, vBulletin).

Так близко, и так далеко


(рисунок восхитительной Тани Задорожной)

Проект изнуряющ. Три месяца я каждый день, по несколько часов вечерами, закрываю тикеты библиотеки, дописываю внезапно важные функции, бьюсь с форумными движками и IE, строчу документацию на английском и перевожу на русский. Проект отъедает время у остального: фильмов, картирования, друзей, секса. Закончил одну функцию — придумал две других, написал плагин к форуму — он никому не нужен, зато трое человек попросили другой движок. Помогают версионирование и milestones: когда закрыты 90% тикетов для очередной версии, нет стимулов добавлять себе работы. Всегда нужна цель, достижение которой осязаемо и не вызывает чувства незавершённости.

Это ночью вышел очередной релиз, MapBBCode 1.2. Все важные задачи, наконец, сделаны, документация почти полна: осталось пошаговое руководство разработчика (#нозачем). Transifex ждёт переводчиков, плагины ждут администраторов. Я безуспешно борюсь с желанием утонуть в программировании, закрыть абсолютно все тикеты, покрыть все движки, включая Joomla и Drupal (битрикс?..). Разработку нельзя завершить, можно лишь прекратить, и пора заняться другими идеями, ждущими на страницах записной книжки. MapBBCode никуда не денется: я в ответе за то, что написал, и минорные версии с исправленными ошибками неминуемы, да и vBulletin рано или поздно покорится.
Илья Зверев @Zverik
карма
125,7
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (33)

  • +1
    отличный проект и описание, прямо взгляд во внутренний мир разработчика

    какие планы по развитию проекта, если вкратце, основными идеями/вехами?
    • +2
      Все планы — в трекере гитхаба :) Самое важное — это прикрутить роутинг к рисованию (как в GPSies, но удобнее) и написать плагины для WordPress и vBulletin. А потом править найденные тысячами пользователей ошибки. Основную часть работы по библиотеке я с выходом версии 1.2.0 считаю завершённой.
      • +1
        Ну извиняй, со временем сейчас не очень, потому и вордпрессовый плагин завис на версии 0.1. Может, после НГ поковыряюсь…
        • 0
          Кстати, я его тестил — не работает. Т.е. вообще.
  • +1
    Вдохновляет.
  • +5
    Человече, удачи тебе!
  • 0
    А не хотите использовать библиотеку и сократить свой код наполовину или даже больше?
  • +2
    реально, объект с двумя методами, show и editor

    Развести неконсистентность в API из двух методов — это, я считаю, успех.
    • 0
      Если вы про второй параметр, то там это обосновано: editor желает получить редактируемое поле по понятным причинам. Завёл тикет, но не уверен, что правильно вычислил предмет иронии.
      • +2
        Возможно, речь о том, что один метод — глагол, а другой — существительное.
        • 0
          Хм, логично. Но названия обдуманные: show показывает (карту), editor (открывает) редактор. Если вместо editor делать showEditor, то show нужно переименовать, и editorWindow превращается в showEditorWindow (или openEditorWindow) и API становится громоздким. Либо переименовать show в viewer/browser, но как-то коряво звучит. Смысла в этом нет, методов всего ничего, и их состав не меняется. По-моему, консистентность важна в растущем API, а не в фиксированном.
          • 0
            show показывает (карту), editor (открывает) редактор. Если вместо editor делать showEditor

            Либо переименовать show в viewer/browser, но как-то коряво звучит.

            А почему не view и edit? Показать (карту), изменить (карту).
            • 0
              Потому что не метод же смотрит и редактирует карту, он лишь выдаёт панель просмотра или редактирования. Поэтому editor, а не edit.
              • 0
                Тогда show_editor и show_map.
                • 0
                  Прикольно, уже пятый участник обсуждения названий :)

                  Я не очень понимаю, зачем весь этот bikeshedding. Одно дело, если бы неконсистентны были два метода из пятидесяти, но два из пяти — можно же понять и принять? Я хотел именовать два основных метода односложно, и из всех вариантов выбрал, на мой взгляд, самые удачные. Альтернативы добавляют избыточность (showMap, showExternal, showEditor, showEditorWindow) или делают суть методов непонятной (show, edit, ...?).
              • 0
                Вот тоже предложу свои 5 копеек по названиям: showEditor, showViewer — с одинаковым глаголом или viewMap, editMap — с одинаковым существительным.
  • +1
    Замечательно получилось. Магнитка уже вовсю пользуется со словами благодарности! Респектище, Илья :)
  • 0
    Добавьте, пожалуйста, возможность встраивания расшаренных карт через iframe (без лишних элементов интерфейса), тогда я смогу добавить поддержку вашего сервиса в phpBB [media].
    • 0
      Можно, например, реализовать это таким образом. Ссылка на карту: share.mapbbcode.org/xzeiy. Встраиваемая ссылка: share.mapbbcode.org/embed/xzeiy. Либо можно на оригинальной страничке через JS определять, что карта запущена в iframe, и убирать лишние элементы интерфейса, но при этом можно ещё отображать, допустим, ссылку для открытия полноценной страницы просмотра этой же карты.
    • +1
      В принципе, можно использовать API экспорта в html MapBBCode Share:
      http://share.mapbbcode.org/?format=html&direct&bbcode=[map]60,30(marker)[/map]

      У такого решения три минуса: только один слой (OSM, покатит), нет ссылки на MapBBCode (хотя она не обязательна) и не будет круглого маркера для 1-2 букв (это не критично). Зато страница минимальна по размеру и ссылается только на два файла Leaflet из CDN.

      Для [mapid] (внешних карт) достаточно вместо параметра bbcode использовать обычный экспорт: share.mapbbcode.org/gttvz?format=html&direct
      • +1
        Спасибо, поддержка вашего сервиса добавлена. А ссылку на себя вы можете добавить, например, слева внизу. Как раз есть пустое место :)
        • +1
          Я сделал формат iframe (http://share.mapbbcode.org/gttvz?format=iframe&direct), он выглядит точь-в-точь как если бы код внешней карты обрабатывала библиотека mapbbcode: есть экспорт в разные форматы и ссылка на сайт. Наверное, лучше его задействовать.
  • 0
    Какой-то поток сознания.
  • 0
    Ты забыл окучить пятничные покатушки, которые водил :) Написать приложение вконтакте? Смотри, какой опыт появится :)
    • 0
      Вообще-то форум пин-микс недавно обновили, теперь туда можно поставить плагин с картами :) Правда, все участники уже разбежались.

      А про вконтакте — мысль интересная, но я не знаю, как там работают приложения. Можно ссылку на какую-нибудь заметку во вконтакте, где в текст вставлено любое приложение на javascript?
      • 0
        О, кстати, надо будет в выходные выпилить все ссылки на форумы из группы. А то нет-нет, да кто-нибудь вспомнит.

        А они так не работают. Придётся делать снапшотик картинки и делать внешнюю ссылку. На самом деле можно и приложением не оформлять. Просто сделать «разместить там-то». А можно и оформить — чтобы например работать прямо из приложения. Ну, т.е. приложение вконтакте работает на отдельной странице и всё тут. При этом приложение в теории может что-то куда-то постить. Раньше была система виджетов, но сплыла. Так бы конечно Гамовский мониторинг прямо в анонс вставлять :) Тут надо изобретательность проявить.
        • +1
          Смотрю на анонс гамовского маршрута и думаю, что пин-миксу интерактивные карты не нужны: пусть ведущие и дальше рисуют красивые и оригинальные картинки, а не пользуются типовой рисовалкой :)

          Приложения в каталоге, я смотрю, вообще не работают с параметрами. То есть, нельзя никуда добавить приложение — например, для проигрывания определённой песни, — только запустить отдельно. Непонятно, какой в этом смысл. Или где-то есть другой список приложений?
          • 0
            Такая штука нужна в основном во время обкатки и обсуждения. Собственно 100% заявленная функциональность твоего сервиса. Рисовать всё равно будут, обрати внимание — скриншоты gpsies никто в анонсы не выкладывает.

            А посмотри документацию :) Заодно нам сюда расскажешь. Я пять раз брался, но меня всё время что-то отвлекало.
  • 0
    Всячески плюсую за то, что нашлись и желание и силы все это реализовать и поддерживать. Здорово!
  • 0
    Здорово!

    // me пошёл разбираться в этом и внедрять в ВелоУфу.
  • +1
    Оу, чуть не пропустил этот замечательный пост. Его тут сильно не хватало, что бы увидеть кухню сей прекрасной разработки. Теперь окончательно верю что shtosm заглох не просто так! :))

    Слушай, меня всё не покидает мечта сделать расставлялку точек для OSMAnd с декстопа.
    Как я уже говорил, когда я смотрю на BBCodeShare — возникает понимание что мечта уже почти реальна.

    Фактически чего не хватает — только удобного импорта-экспорта точек в OSMAnd.
    Удобный редактор и работающие парсеры разных форматов — уже есть.

    Помня все тот же принцип опенсорс, уже взялся разбираться сам (пиарить идею пока что-то не сделано действительно толку нет, не работает:). Но нужна будет помощь советами.

    Поможешь? Сделаем? :))
    • +2
      Сам плагин я пока не осилю, но выглядит он не слишком сложным. У MapBBCode Share есть нужный API для получения карты в любом формате (можно даже gpx, через ?format=gpx) и для загрузки bb-кода на сервер (см. здесь, параметры save, api=1, tilte и bbcode).

      Как я понимаю, в OsmAnd можно сделать отдельный слой, как POI, который при включении будет запрашивать пятибуквенный код слоя и загружать его с сервера. Так же можно сделать отправку на сервер любого слоя с выводом на экран (и, возможно, добавлением в закладка) кода карты Share.
      • 0
        Спасибо! Теперь есть главное — направление куда копать.

        Я тут немного в джунглях был, и все еще в пути, когда путешествие закончу — попробую что-нить накодить. Застряну — напишу еще вопросов. :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.