36 заметок с тегом

javascript

Кнопки не нужны

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

Современные интерактивные карты выглядят гораздо проще классических ГИС: нет панели с полусотней слоёв, нет трёх рядов кнопок управления и панели состояния с рядом загадочных чисел. Мы постепенно избавлялись от лишнего, и теперь карту загораживают только строка поиска и несколько кнопок. К сожалению, для хорошего интерфейса недостаточно убрать лишнее: нужно убрать, а затем переизобрести всё остальное.

Кнопки изменения масштаба появились от свойств тайловой схемы вкупе с линукс-мышлением. Тайлы, из которых состоит карта, устроены просто: на нулевом масштабе один тайл, на первом — четыре (2×2), на втором — шестнадцать (4×4) и так далее, каждый квадратик делится пополам в обоих измерениях. Линукс-мышление требует максимальной конфигурируемости: вдруг пользователь захочет посмотреть на карту конкретно на 13 масштабе, а мы ему не дадим? Поэтому развитие карт идёт увеличением количества уровней масштаба как вглубь, так и вширь, добавлением промежуточных уровней и переходом на векторные тайлы с непрерывным масштабированием. Больше контроля пользователю!

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

Эти кнопки — бич веб-картографии. Как не устаёт напоминать Сергей Голубев, при каждом нажатии на «+» вы видите новую карту, с собственным картостилем и свойствами. На сайте osm.org у нас 20 (двадцать) различных картостилей. Каждое изменение стиля osm-carto затрагивает примерно половину из них, поэтому неудивительно, что дискуссии в репозитории обильно иллюстрированы и могут затягиваться. Но если подумать, действительно ли пользователю нужны все эти карты? Вне компьютера хватает трёх-четырёх: атласа мира, атласа области и карты города. Когда масштабов мало, больше времени остаётся на полировку оформления каждого. А точная настройка интерфейса становится излишней.

Изменить масштаб можно многими способами, в зависимости от устройства и сайта:

  • кнопками плюс-минус на экране;
  • теми же кнопками с зажатым shift для большей скорости;
  • ползунком масштабирования;
  • колёсиком мыши;
  • двойным кликом левой кнопкой;
  • растягиванием прямоугольника мышью с зажатым shift;
  • кнопками «+» и «-» на клавиатуре;
  • перетягиванием двумя пальцами на тачпаде или экране;
  • щипком или расщипком на экране;
  • дважды тыкаешь пальцем, второй раз не отпуская удерживаешь и тянешь вниз или вверх.

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

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

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

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

18 июля   javascript   mobile   ВНЕЗАПНО

Пакет не нужен

«Нельзя ли при отправке изменений из maps.me разделять объекты по континентам?» — в очередной раз спрашивают на форуме. А то bbox (ограничительный прямоугольник) слишком большой, неудобно. OpenStreetMap был зачат тысячу лет назад программистом, и это лезет изо всех щелей: удивительно, как самые бессмысленные атрибуты становятся мерилом качества.

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

Но даже когда найдёшь нужный пакет правок, останется только бессильно смотреть на его bbox. И на стастраничный список точек, линий и отношений, каждая строчка которого по-своему бесполезна. Ченджсеты — это псевдоупорядочивание. Кажется, что они полезны присвоением метаданных группе объектов, своего рода над-отношения, но на самом деле — метки времени произвольны, их порядок не зависит от номера пакета, комментарии никто не пишет, источник часто врёт, географически, как видим, тоже никто не группирует. Остаётся один полезный атрибут: created_by. Всему остальному верить нельзя.

То есть, единственная польза от пакета правок — это посмотреть, каким редактором сделаны правки. Все остальные атрибуты: даты, bbox, список объектов — только отвлекают, создавая ложное впечатление группировки и упорядоченности. Которых нет, потому что техническое воплощение API не обещает порядка и не подразумевает удобства. Так, для правок maps.me я игнорирую пакеты и рассматриваю каждую правку отдельно. Правки на mmwatch — это поток объектов, у которых номер ченджсета лишь бесполезный атрибут. Увы, для сложных правок со взаимосвязанными изменениями (таких как сдвиг линии) такой подход не сработает.

Примерно об этом я говорил на схемотехнике год назад. О bbox нужно просто забыть: область применения этих прямоугольников ограничена и точно не касается ваших задач. А проблему пакетирования нужно как-то решать. Развязать топологические структуры, группировать по времени и географии, не давать пользователям и приложениям свободы в объединении правок. Это настоящая тема для какого-нибудь будущего API 0.8. А пока приходится работать с тем, что есть.

Следить за изменениями в регионе можно (нужно!) через WhoDidIt, искать их — в его более быстром форке. Пакет правок из интерфейса этого сайта можно открыть в Achavi, но иногда может не повезти. Если bbox окажется слишком велик, загрузки правок вы можете не дождаться. Потому что даже лучшие инструменты полагаются на bbox, который, повторюсь, плох примерно для всего.

Загружать геометрию ченджсетов часто приходится команде по работе с данными в Mapbox. Для этого они сделали и постоянно улучшают сайт OSM Changeset Analyzer, где есть фильтры по любому атрибуту, вплоть до причины для подозрений. Но самые подозрительные пакеты накрывают весь мир, Achavi тут бессилен. Поэтому в этом месяце они сделали то, что давно было пора: кэширование ченджсетов.

Каждую минуту скрипт скачивает свежие дополненные диффы и складывает их в хранилище Amazon S3. Затем он раздербанивает эти диффы на пакеты правок и результат тоже загружает туда же. И теперь сервис визуализации Changeset Map, встроенный в OSMCHA, загружает пакеты мгновенно. Обновите ваши букмарклеты: Changeset (перетащите в закладки).

Проблемы, конечно, есть, но с ними борются. Например, дополненные диффы не окончательны из-за чехарды с транзакциями в базе данных OSM. Их приходится обновлять и обновлять. То же касается и пакетов правок, которые возможно держать открытыми целые сутки, понемногу доливая в них новые объекты. Наконец, история там только новейшая: пакеты старее марта этого года можно не найти. Их загружают, но медленно. Проблему поиска по региону архив тоже не решает, как показывает опыт фильтрации на сайте OSMCHA. Поэтому пользуйтесь им для просмотра недавних правок, а историю ищите на WhoDidIt и Achavi. Неидеально — но пока мы не избавились от концепции пакетов правок, ничего лучше не сделать.

2017   javascript   mapbox   валидаторы   проекты

Leaflet 1.0

Мы уже не чаяли: 27 сентября, наконец, опубликован релиз библиотеки Leaflet 1.0.0. Спустя целых три года после выхода 0.7 и всего год после объявления «мы на финишной прямой к релизу».

Основным изменением, как всегда, стала скорость: многие функции переписали чуть ли не с нуля. Особенно заметна скорость отрисовки векторных слоёв. Появилась функция flyTo(), анимированными гифками которой когда-то рекламировали эту версию, и дробные уровни масштаба. Плагин Leaflet.label больше не нужен: вместо него в ядро добавили класс L.Tooltip. Ну и взаимодействие между кучей слоёв разных типов теперь должно быть предсказуемее.

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

2016   javascript

Разделяй и оптимизируй

Владимир Агафонкин давно рассказывает про библиотеку geojson-vt: она нарезает большие файлы GeoJSON на векторные тайлы прямо в браузере (или на сервере, или в нативном коде для смартфонов). Это часть большого стека отрисовки всего в виде векторных тайлов (Mapbox GL JS), про который автор делал много одинаковых докладов в первой половине года.

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

2015   javascript

2014

Это был странный год, который проще определить через то, чего в нём не было.

  • Не появилось нового редактора, и старые качественно не улучшались. Никто не выпустил качественно новых плагинов для JOSM. В iD до сих пор нет поддержки сервера смещений. Меркартор жыв: недавно один его пользователь утянул петербуржский перекрёсток в Африку.
  • Никто не взялся даже за планирование API 0.7. Была пара дискуссий в рассылках и EWG, с предсказуемым «хочешь — сделай». Понятно, что новый API полностью уйдёт с Rails на cgi-map. Понятен начальный фронт работ, но заняться этим банально некому. Всё и так работает, неинтересно. А для остального есть Overpass.
  • Несмотря на постоянные «почти готово», в прошлом году не вышла ни одна «мажорная» версия Leaflet. Раньше Владимир делал по 2-3 релиза в год. В грядущей 1.0 поменяется модель тайловых и векторных слоёв и работа с проекциями. На прошлой неделе автор призвал всех участников разработки поднапрячься и выпустить хотя бы бету в этом месяце.
  • Mapbox так ускорялся, что перешёл на сверхсветовую скорость, и пропал из поля зрения обычного человека. TileMill во второй версии перешёл на платную модель хранения тайлов, и из-за сложности настройки векторных тайлов толку от самостоятельной сборки исчезающе мало. Компания бешено набирает людей, уже даже просто так, помапить. Образно выражаясь, конечно: недовольная скоростью обрисовки американских городов, она задействует открытые данные и специалистов по импортам. Всё лучше, чем импорты исподтишка, какими балуются некоторые русские компании.
  • Мы очень хотели изменений в Совете OSMF, но не срослось: только отвлекли его участников спорами на месяц. Он продолжает свою полуоткрытую работу, 16-17 февраля они встретятся вживую, и кто-нибудь даст кому-нибудь по лицу, если повезёт. Под шумок Хэнк тянет с выбором места проведения SotM 2015 из двух вариантов. Неопределённость и закрытость — кажется, имманентное свойство Совета.
  • Конечно, новый OWL так и не закончен, а старый никому не интересен. Единственным средством слежения за правками остаётся Who Did It, который я делал как временное решение, не ожидая, что он будет актуальным и через два года. Ладно хоть Achavi сделал просмотр ченджсетов веселее.

И хотя никаких технических прорывов не произошло, год был богат на неожиданности.

  • Главной из которых, конечно, стала карта национального поисковика «Спутник», полностью завязанная на OpenStreetMap и данные в PD.
  • Затем Mail.Ru Group купил белорусскую команду Maps.me и вывез её в Москву. Затем устроил аттракцион щедрости, сделав приложение бесплатным. И, наконец, убил собственную онлайн-карту, заменив страницу ссылкой на Maps.me.
  • Обычно работы многочисленных студентов с Google Summer of Code медленно покрываются пылью, но в этом году всё наоборот: у нас был только один человек, но тем, что он написал, пользуются сотни осмеров. Да, комментариями к ченджсетам. И они даже года не провисели в пул-реквестах: благодаря шумихе в OSMF, их быстро влили в сайт. Чаще бы выборы.
  • Не появился второй новостной блог, но проект WeeklyOSM с сентября стабильно переводит немецкие новости на восемь языков (есть добровольцы на русский?), а во вконтакте выросло несколько осмосообществ с очень активными ведущими: псковское, курское, самарское. Ещё у нас летсплеи по JOSM делают, это вообще космос. И радио.
  • Мы редко выбирались на картовстречи в этом году, но качество проведения онлайн-встреч выросло неимоверно: вспомнить крымскую, например, или серию мероприятий Missing Maps. Такие встречи вербуют в OSM сразу кучу картографов, и о них широко пишут в крупных газетах (не в России, увы). И по теме вербовки — мы впервые с 2011 года пришли в школу и показали детям редактор карты. Скоро ещё пойдём.

Отсутствие громких новостей непривычно: ни перелицензирования, ни нового редактора — но именно такой год показал, как бурно прогрессирует OSM в мелочах. Вместо одного лидера обнаружились сотни мапперов, программистов и писателей, неукротимо двигавших все аспекты проекта. Чёрт возьми, OpenStreetMap действительно неостановим.

Две тысячи пятнадцатый будет годом больших игроков: Mapbox и Telenav в Штатах, Спутник и Mail.ru в России. Как бы мне ни хотелось завести старую сказку про редакторов и программистов, осенью стало особенно ясно, что направление развития задают не участники, не OSMF и не Совет, а те, кто вкладывает в OpenStreetMap деньги и рабочее время. Принцип do-ocracy повернулся неожиданной стороной, и большинству участников только предстоит осмыслить, хорошо это или вредно. Год обещает быть интересным.

Зрелищного видео правок за год никто не сделал, но Дмитрий Афонин прислал отличную картинку, которая и показывает, чего мы добились (это не уникальная карта, а целая серия), и напоминает о первом принципе проверки открытости (распечатать и продать), и намекает на тренд будущего года, когда ввиду обстоятельств люди в России начнут понимать, где в OSM деньги.

2015   javascript   mapbox   mobile   блоги   штосм
Ранее Ctrl + ↓