Места

• Введение
• Интерфейс
  • Элементы и их расположение
    • 1 строка. Шапка.
      • Первая ячейка шапки (центральная верхняя ячейка таблицы)
      • Вторая ячейка шапки (правая верхняя ячейка таблицы)
    • 2 строка. Основная.
      • Первая ячейка основной области (левая центральная ячейка таблицы)
      • Вторая ячейка основной области (центральная ячейка таблицы)
      • Третья ячейка основной области (правая центральная ячейка таблицы)
    • 3 строка. Подвал.
      • Первая ячейка подвала (левая нижняя ячейка таблицы)
      • Вторая ячейка подвала (правая нижняя ячейка таблицы)
• Страница пользователя
  • Удаление аккаунта
• Импорт / экспорт

Введение

Библиотека геометок «Места» — это онлайн сервис, позволяющий создавать свои коллекции мест на карте с подробной информацией о них. Собирать их вместе, сортировать по папкам, просматривать, редактировать и обмениваться с другими. Экспортировать свои (для навигаторов, например), импортировать места других людей.

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

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

Проект свободный, постоянно развивается. Любой желающий может принять участие и делать пул-реквесты или форкать и развивать самостоятельно, создавая свои собственные сервисы. Написан на Vue.js. Сейчас проект находится здесь — https://github.com/assador/places

Интерфейс

Элементы и их расположение

Окно приложения представлено в виде таблицы в 3 колонки с 3 строками. Рассмотрим каждую ячейку этой таблицы.

1 строка. Шапка.

Первая ячейка шапки (центральная верхняя ячейка таблицы)

В ней находятся название сервиса с подписью и ваш логин в виде ссылки. При клике по ссылке открывается окно с информацией по аккаунту («Страница пользователя»), которую можно редактировать. Оно описано ниже.

В правом верхнем углу центральной части шапки расположено два выпадающих списка — с выбором языка и цветовой темы интерфейса. Сейчас доступны два языка — английский и руссккий и восемь цветовых тем — 4 тёмных и 4 светлых. Также в этом месте показываются информационные сообщения и подсказки во всплывающем черном прямоугольнике.

Вторая ячейка шапки (правая верхняя ячейка таблицы)

В ней расположены основные управляющие кнопки самого сервиса:

• «Отменить» (“Undo”, Alt + Shift + z). Отменить последнее действие, то есть, вернуться к предыдущему состоянию. При отмене и повторах текущее состояние не сохраняется в базу данных, так что, при необходимости нужно либо сохраниться вручную, либо произвести какое-либо действие, которое сохраняет состояние в базу.

• «Вернуть» (“Redo”, Alt + Shift + y). Если было отменено, вернуть следующее действие.

• «Сохранить» (Alt + Shift + s). Немедленно сохранить текущее состояние в базу данных.

• «Приложение». Установить сервис на текущее устройство как PWA-приложение.

• «Импорт» (Alt + Shift + i). Импортировать в текущую библиотеку другие места из файла. Подробнее об импорте / экспорте написано в разделе «Импорт / экспорт».

• «Экспорт» (Alt + Shift + e). Экспортировать места текущей библиотеки в файл. Сохраняется (в зависимости от формата файла) вся информация, включая структуру папок и информацию о картинках, кроме самих картинок. Также, подробное описание ниже.

• «Справка» (Alt + Shift + h). Собственно, эта документация.

• «Выход» (Alt + Shift + q). Разлогиниться.

2 строка. Основная.

Первая ячейка основной области (левая центральная ячейка таблицы)

Управляющие кнопки мест и папок и строка поиска мест под этими кнопками. Сами кнопки:

• «Новое» (Alt + Shift + a). Добавляет новое место в центре карты, в конец текущей папки, той, в которой находится текущее, выделенное, место. При этом получает фокус поле ««Название»» (см. ниже).

• «Удалить» (Alt + Shift + d). Удаляет текущее, выделенное, место. Без подтверждения, поскольку в приложении реализован механизм отмены / повтора (кнопки «Отменить» и «Вернуть», см. ниже).

• «Папка» (Alt + Shift + f). Добавляет новую папку в конец текущей папки, той, в которой находится текущее, выделенное, место. При этом всплывает окно с полями ввода названия и описания создаваемой папки и кнопками «Создать папку» и «Закрыть». Последняя нужна потому, что при создании новой папки это окно не закрывается, чтобы было удобнее создавать сразу несколько папок, не кликая каждый раз по кнопке «Добавить папку».

• «Папки» (Alt + Shift + c). Приложение переходит в режим редактирования папок. При этом каждая строка папки (дерево геометок, см. описание ниже) заменяется на поле ввода названия папки, и поле ввода её описания. В правой части поля названия расположен крестик, при клике по которому всплывает окно с параметрами удаления этой папки. В этом окне 2 переключателя: «Оставить содержимое в корне» и «Удалить содержимое». Ну и кнопки «Удалить папку» и «Отмена». При удалении папки, если выбран переключатель «Оставить содержимое в корне», то всё содержимое удаляемой папки не удаляется вместе с ней, а просто переносится в корень дерева. Если же выбран переключатель «Удалить содержимое», то, очевидно, всё, что находится внутри удаляемой папки, удаляется вместе с ней. При всём при этом по-прежнему действует механизм отмены / повтора. Так что, даже если вы удалили папку со всем содержимым, всё это обратимо.

• «В радиусе» (Alt + Shift + r). Оставляет в меню и на карте только те места, которые находятся на указанном в километрах радиусе от текущего места.

• «Измерить» (Alt + Shift + m). Переходит в режим вычисления расстояния между выделенными местами. После нажатия на кнопку нужно последовательно выбирать места правой кнопкой мыши либо в меню, либо на карте. При этом вычисляется расстояние между этими местами, в той же последовательности, в которой они выбраны, расстояние пути по всем этим местам. Эту последовательность можно менять, перетаскивая эти места в списке. Также, каждое место можно заменить на другое, кликнув на кнопку со стрелкой напротив этого места в списке и выбрав другое. Можно также удалить каждое место из списка, кликнув на кнопку с крестиком, либо кликнув правой кнопкой мыши на это выбранное место в меню или на карте.

Поле поиска. Регистр букв не учитывается. После нажатия кнопки «Искать» в меню остаются только места, удовлетворяющие поиску. Кнопка «Очистить» вновь возвращает в меню все места.

Основное дерево мест; меню.

Сами кнопки мест располагаются во вложенных друг в друга папках. Корневая папка — «Мои места». При клике на папке она открывается / закрывается; при клике на место оно становится активным на карте, и в правой колонке показывается вся информация о нём.

Редактировать можно как сами места, так и папки. Места, очевидно, редактируются на карте и в правой колонке, о чём ниже, а папки по нажатию кнопки «Редактировать папки» (Alt + Shift + c), о чём было сказано выше.

Как сами кнопки мест, так и папки можно перетаскивать, сортируя их порядок и вложенность. Можно перетащить место в другую папку, папку в папку и т.д.

Вторая ячейка основной области (центральная ячейка таблицы)

Это, собственно, карта. Сейчас она реализована двумя сервисами: OpenStreetMap и Яндекс.Карты. Это обычные карты этих провайдеров, настроенные для работы в сервисе.

При клике на метку места оно становится активным, текущим, показывается его описание, как и при клике на место в меню слева. При клике на метку места правой кнопкой мыши в шапке всплывает сообщение (и остаётся, пока по нему не кликнешь) с координатами и описанием этого места. Метки можно перетаскивать (свои метки; «общие», не ваши — нет, о чём ниже). При этом, естественно, меняется информация о широте / долготе / высоте этого места.

Третья ячейка основной области (правая центральная ячейка таблицы)

Это область с информацией о месте. В ней расположены следующие поля:

• «Название». Название места. Сервис «реактивен», то есть, при вводе текста он одновременно меняется и на кнопке места, и в подсказке Яндекс.Карт. То же относится вообще практически ко всему в сервисе. Например, при изменении широты / долготы передвигается метка на карте и т.д.

• «Описание». Очевидно, описание места.

• «Широта». Географическая широта это места.

• «Долгота». Географическая долгота это места.

• «Координаты в минутах и секундах». Собственно, те же широта и долгота, но дробная часть градусов в минутах и секундах. Эти координаты взаимосвязаны с описанными выше. Если изменить здесь, изменятся с дробной частью. И наоборот.

• «Высота над уровнем моря (м)». Высота места над уровнем моря в метрах. Рассчитывается автоматически в зависимости от координат.

• «Ссылка». Ссылка на какой-либо внешний ресурс, связанный с этим местом. Например, сайт бара, добавленного вами в вашу библиотеку мест, чтобы не забыть, где он располагается, когда вы там находитесь.

• «Время создания геометки (UTC)». Время создания геометки места в формате всемирного координированного времени. Обычно автоматически выставляется в навигаторах. Если добавляете место в сервисе, тоже ставится автоматически.

• «Сортировка». Местоположение кнопки места среди своих собратьев в дереве мест. Возможны дробные значения. К примеру, в дереве идут по порядку сверху вниз следующие кнопки: «Мой дом» (значение сортировки: 1), «Дом любовницы» (значение сортировки: 1.5), «КВД» (значение сортировки: 2).

• «Место видно другим». Переключатель, отвечающий за то, могут ли другие пользователи сервиса видеть это место и информацию о нём (функционал «общих мест»).

• «Фотографии». У каждого места может быть свой фотоальбом. Вы можете загружать фотографии (и не только; поддерживаются типы image/gif, image/jpeg, image/png, image/svg+xml), просматривать, листая, в полном размере, сортировать их, удалять. Планируется добавить возможность загрузки аудио- и видеофайлов. В этой области показываются миниатюры загруженных к этому месту картинок. Их можно перетаскивать, меняя их порядок. В правом верхнем углу каждой миниатюры находится круглая кнопка с крестиком, по клику на которой картинка удаляется без подтверждения. При клике по самой миниатюре картинка открывается в полный размер. При клике по картинке, открытой в полном размере, показывается следующая картинка. Слева и справа от картинок, открытых в полном размере, есть также стрелки для показа предыдущей / следующей картинки. Под областью с миниатюрами есть кнопка «Добавить фотографии». Вы можете загружать сразу несколько картинок, выбрав их в открывающемся диалоге со списком файлов.

• «Домашнее место». Это переключатель, просто позволяющий сделать это место тем, которое будет активным при следующем заходе на сервис.

3 строка. Подвал.

Первая ячейка подвала (левая нижняя ячейка таблицы)

В ней находятся кнопки-переключатели, отвечающие за видимость разных типов меток на карте:

• «Мои метки». Включена по-умолчанию и показывает / скрывает метки ваших мест на карте. Ну, мало ли. Может, вы решили отдохнуть и просто полюбоваться реками и озёрами Земли.

• «Чужие места». В сервисе регистрируются и пользуются им много людей. У каждого есть своя библиотека мест (или несколько — человек может завести несколько аккаунтов: один аккаунт — одна библиотека; кстати говоря, архитектура спорная; планируется добавить возможность заводить несколько библиотек в одном аккаунте). Так вот, в сервисе предусмотрен функционал «общих мест» — возможность делать какие-либо свои места видимыми всем другим пользователям (опять же, планируется добавить возможность «расшаривать» свои места не для всех, а лишь для определённых пользователей). Разумеется, другие пользователи не могут менять информацию об этих местах, перетаскивать метки и т.д. Они могут просто видеть их, смотреть фотографии, читать названия / описания и пр. Эта кнопка-переключатель позволяет показывать / скрывать места, помеченные другими пользователями как видимые другим.

• «Чужие метки». Показывает / скрывает геометки мест, помеченных другими пользователями как видимые другим, на карте. При этом как кнопки этих мест в дереве слева, так и информация об этих местах остаются доступными.

• «Центр карты». Показывает / скрывает крестик на карте, обозначающий текущий видимый центр карты. Его, как и геометки можно перетаскивать. Он нужен в основном для добавления новых мест. Новое место добавляется на месте этого крестика.

Вторая ячейка подвала (правая нижняя ячейка таблицы)

Здесь находятся выпадающий список провайдера карты и географические координаты текущего видимого центра карты, которые можно посмотреть или задать самому. Может, вы захотите узнать координаты странного домика, на который сейчас смотрите, или у вас есть точные координаты засекреченного объекта (того же бара), и вы хотите посмотреть на него с высоты орбиты Земли…

Страница пользователя

Страница с информацией об аккаунте. Здесь можно посмотреть и поменять при желании:

• «Логин». Логин, идентификатор учётной записи, с которым вместе с паролем вы авторизуетесь на сервисе. Обязательное поле.

• «Новый пароль». Если возникло желание изменить пароль, с которым вы авторизуетесь на сервисе, в этом поле нужно ввести новый пароль.

• «Повторите новый пароль». Для изменения пароля в этом поле нужно повторно ввести новый пароль, во избежание ошибки.

• «Обращение (имя)». Это не логин, а именно то, как вы хотите, чтобы другие пользователи сервиса знали, как к вам обращаться. Вася Полиграфович Пупкин, например. Не обязательное поле.

• «e-mail». Адрес вашей электронной почты. На этот адрес будут приходить запросы на подтверждение некоторых действий. Например, ссылка на восстановление пароля, буде вы его забудете. Так что важно указывать реальный e-mail. Обязательное поле.

• «Телефон». Номер вашего телефона. Не обязательное поле.

Внизу три кнопки:

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

• «Назад». Вернуться в главный интерфейс сервиса без сохранения изменений.

• «Удалить аккаунт». Кнопка для удаления текущего аккаунта. После нажатия на неё всплывёт окно, в котором вы сможете указать, что делать с существующей библиотекой. Об этом следующий раздел.

Удаление аккаунта

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

В первой группе «Места» три переключателя:

• «Удалить все мои места». При удалении аккаунта также будут удалены все места библиотеки.

• «Оставить только видимые всем места». При удалении аккаунта будут оставлены места, отмеченные как видимые другим пользователям, кои и останутся им видимы. Остальные места будут удалены.

• «Оставить все мои места, сделав их видимыми всем». При удалении аккаунта все места сохранятся и станут видимы другим пользователям.

Во второй группе «Фотографии» два переключателя: «Удалить мои фотографии» и «Оставить мои фотографии». При удалении аккаунта фотографии, соответственно, удаляются или сохраняются.

После нажатия на кнопку «Удалить аккаунт» аккаунт будет удалён.

Импорт / экспорт

Сервис позволяет импортировать места в файл и экспортировать места из файла. В зависимости от формата файла импорт и экспорт имеет свои особенности:

• GPX. Стандартный XML-формат хранения и обмена данными GPS. Понимается большинством программ-навигаторов (например, Locus Map, Navitel и т.д.). Импортируются и экспортируются только сами места. Дерево папок не сохраняется. Фотоальбомы тоже. Из информации о месте сохраняются название, описание, ссылка, широта, долгота, высота над уровнем моря и время создания геометки. При импорте из GPX-файла, поскольку формат не хранит деревья, места импортируются в создаваемую папку «Импортированное», в которой находятся в виде дерева подпапки по текущей дате импорта. Например: «Импортированное → 2021 → 07 → 23 → [места]». Если папка «Импортированное» уже существует, то дерево даты с местами импортируется уже в неё.

• JSON. Формат хранения и обмена произвольными данными, основанный на JavaScript. Идеально подходит для обмена данными пользователей этого сервиса. Импортируются и экспортируются как сами места со всей своей информацией, так и деревья папок. Фотоальбомы пока хранят лишь некоторые данные об изображениях: ID, имя файла, размер файла, тип файла, время последнего изменения, сортировка в фотоальбоме и привязка к месту. В дальнейшем, возможно, опционально будут сохраняться сами изображения в формате Base64. При импорте из JSON-файла места по возможности встраиваются в существующее дерево мест. Если в существующем дереве есть папка с тем же ID, что и указанное как родительское у импортируемого места, то это место помещается в неё. Если нет, то для места создаётся то дерево родительских папок, которое есть в импортируемом файле.