Das Blog. Рассказываю о "хомяках", и технологиях ими используемыми.

Настало время приоткрыть завесу того, как работают два сайд-проекта к журналу - это карта терминалов етикет, и таблица временных изменений транспорта в Харькове.

Оба проекта были запущены ради самообучения - код сам себя не напишет, а плохо написанный код - это повод самосовершенствования. Первым был давно потушенный проект отслеживания харьковского транспорта по GPS-трекингу с проекта transport.kh.ua (не путать с известным порталом, это другая тема), и получил имя xt.akirich.pp.ua. На долгое время он сменил свою направленность и использовался без транспортных целей в личных необходимостях. Почти год назад на обновленном ядре появился проект карты терминалов Е-Тикет, так что та карта что с трекингом и та что сейчас - могут считаться родственными.

Планировался етикетовский проект как временный, пока инвестор или город не создадут что-то подобное и хотя бы на том же уровне. Нет ничего более постоянного чем временное.

Что оно умеет:
- хранить базу терминалов;
- показывать расположение терминалов по нескольким правилам: включенные и работающие, отключенные полностью, отказавшие и все наличествующие;
- можно увидеть список терминалов по аналогичным правилам, страницы увязаны между собой.
- точки на карте сворачиваются в кластеры, что сокращает нагрузку на слабые устройства, в том числе на смартфонах;
- старые браузеры подхватывают местоположение, вопрос с SSL не решается из-за хостера;
- у каждого терминала есть своя карточка с данными о месторасположении, адресе терминала, и времени когда эту информацию в последний раз изменили или подтвердили;
- возможность редактирования и добавления данных с модерацией; (И я очень надеюсь на вашу пользовательскую поддержку.)
- сервис при редактировании или модерировании автоматически подхватывает адрес из OSM, официальный адрес с экрана надо вводить самому;
- из нового добавлены разные варианты подложки карт - т.е. можно выбрать стиль и его информативность.

Т.к. я и так имею хостинг для хранения данных и для наличия сайта визитки, я не думая решил сделать подобную карту. Схема базы данных, базовые элементы кода были созданы за несколько часов свободного времени, и в принципе - за последние полгода было много чисто косметических патчей. Изначально проект имел только leaflet для работы с картами OpenStreetMap и pure-css для оформления. Только недавно он начал обростать js библиотеками, а на днях потребовался jquery. С учетом стандартной карты до готовности страница грузит около мегабайта, что сравнительно неплохо. Первая версия без кластеров съедала почти 40 мб оперативы, так что правка успешная.

Несмотря на наличие purecss, фреймворка для оформления, большинство элементов управления стандартные. Но это сделано только для понимания. Кнопка "Подтвердить" позволяет лишь указать, что информация в проекте и по факту не отличается, а кнопка "Ошиблись" - перейти к форме редактирования и предложить правки. Довольно часто правки указывают на неисправность терминала. Кнопка "Добавить" в шапке карты открывает тот же редактор, но для указания терминала которого нет на карте.

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

Сам же редактор, сделан максимально просто для заполнения. Ткнул в карту, подхватились координаты, дальше заполняются характеристики. Часть характеристик - обязательна к заполнению, это: название и направление остановки, вид транспорта и данные для обратной связи. Остальное - по возможности, если есть такая информация. Там внутренняя карта пока не так богата по функционалу, но скоро там точно так же добавятся стили и поиск места на карте, как и в версии для модераторов. Поиск на главной - серьезный вопрос, и пока я сомневаюсь в его необходимости на главной странице (есть проблемы с оформлением и памятью).

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


Из мелких удобств - это попытка сохранить статус карты, если её закрыть. Некоторое время карта будет хранить последний вид перед закрытием браузера: положение и фильтры. Во-вторых, маааленький скрипт регулирует время изменений в карточках, чтобы не писать это время цифрами. То есть сразу видно, что эту точку видели две недели назад в этом состоянии, а не 17-10-2018 в 12:39:41.

Теперь о проблемах, с которыми я столкнулся во время проекта.

Взаимодействие с OpenStreetMap в автоматическом режиме ведется только на получение данных. Вообще ручками недавно приходилось вбивать кучу данных OSM только ради слоя с транспортом, который доступен на главной уже сейчас. Переносить базу етикетов прямо в OSM автоматически не получится - часть точек уже расставили другие пользователи openstreetmap и не вариант плодить дубликаты.

Последние дня три я рисовал маршруты трамваев и троллейбусов на карте, кое-что сломал (модераторы - мои извинения), но сейчас и овцы целы, и волки сыты. Вполне могут быть проблемы с недоработкой по остановкам, но так уж получилось, что самыми трудными были маршруты на юге города, где я бываю раз в пятилетку. Особо трудно то, что веб-клиент работает не всегда стабильно и можно зацепится за некоторые элементы интерфейса случайно. А еще доставляют боты и пользователи JOSM, которые рисуют как попало, из-за чего есть проблемы с прописыванием свойств и отношений в элементах карты. Как четкий пример - большая дыра на Гагарина у автовокзала, там привязать 304 и 305 автобусы для порядка не получалось чисто из-за корявости интерфейса, и отдельных авторов правок.

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

tickets.png

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

***

Второй "хомяк" - это самописный проект списка изменений маршрутов электротранспорта, но основанный на реальном решении ребят из Львова. Там урбанисты отличные ребята, и посмотрев на их проект я решил не только запилить подобный, но и сделать его более доступным по занимаемой памяти. Но уже чисто для Харькова. Плохо, что Львовяне на свой проект подзабили, мой пока жив. На идею навел пост уважаемого alex_shutyuk.

Надпись "© Дизайн та програмування: Єгор Каліберда (www.kaliberda.com), 2017)." справедлива, т.к. сохранен подход к отображению информации. Хотя в моем случае все написано на связке purecss+jquerymin, в исходнике стоит более тяжелый bootstrap. Калиберда очень прикольно придумал с сохранением элементов дизайна маршрутных табличек, но так как в Харькове дизайн-кода для наземки нет, то и здесь удалось сэкономить килобайты. Не указать авторов оригинала я просто не мог.

Единственное - что привнес в базовую канву - это отказ от вкладок вверху. Логически в них нет необходимости - видов транспорта "раз, два и обчелся", а вторую вкладку с реально полезным местом работ скрывать не совсем оправданно.

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

Что скажете?

Subscribe to  akirich_pcroom
promo akirich_pcroom september 1, 2013 01:18
Buy for 10 tokens
Размещайте рекламу в промо по уникально низким ставкам! Правила размещения промо в моем ЖЖ. Даже несмотря на непостоянство показов в данном журнале действуют ограничения по тематике промоутируемых материалов. Рекламируемый материал должен содержать материалы подходящие для группы 12+.…