Побачте, як міста співвідносяться насправді: на одній мапі, в реальному масштабі
Покладіть два міста на одну мапу, перетягніть одне на інше й одразу побачите різницю. Сторінки порівнянь додають населення й густоту, а за посиланням ті самі міста відкриє кожен, кому ви його надішлете. Безкоштовно, у браузері, а з акаунтом — до десяти міст.
Завдання
Статистику про міста легко знайти, але важко відчути. Кількість жителів чи квадратних кілометрів не скаже, наскільки великим є одне місце порівняно з іншим, особливо якщо вони в різних країнах чи на різних континентах.
Підхід
CompareCitySizes накладає міста одне на одне в реальному масштабі на одній мапі. Ви обираєте два, перетягуєте одне на інше й одразу бачите різницю, а сторінки порівнянь додають до площі населення й густоту. За посиланням ті самі міста відкриє кожен, кому ви його надішлете.
Введіть назву й виберіть потрібне місце з підказок. Мапа відцентрується на ньому.
Наступне місто ляже на перше в тому самому масштабі. Перетягніть будь-яке, щоб їх вирівняти.
Площа кожного міста вказана на бічній панелі, а решту покаже накладання. За потреби поверніть форму.
Скопіюйте посилання в статтю, урок чи чат. Кожен, хто його відкриє, побачить ті самі міста.
Міста відображаються в географічному масштабі на одній базовій мапі, тож «більше на екрані» означає більше насправді, а не обрізаний скриншот з іншим наближенням.
Обертайте форму кроками по 15° або повзунком, щоб вона лягла вздовж узбережжя чи річки, як і місто для порівняння, — так накладання читається чесніше.
Два без акаунта, десять з акаунтом: столиці, агломерації чи схожі міста на одному полотні.
Кнопка поширення копіює посилання, яке відкриває ті самі міста кожному, хто за ним перейде: зі статті, уроку чи групового чату.
Кожна пара має власну сторінку з площею, населенням і густотою поруч — таблиця на випадок, коли форми недостатньо.
Працює в будь-якому браузері, зокрема на телефоні. Без ліцензії на ГІС, без завантаження, без реєстрації для старту.
Допитливі люди посеред суперечки
Більшість відвідувачів приходять саме з таким запитом, «city size comparison», кладуть на мапу Нью-Йорк, Токіо чи Лондон і починають перетягувати. Перетягування і є продуктом: 260 000 перетягувань від 13 000 людей за одне літо, приблизно по двадцять на кожного.
Вчителі й учні
Педагоги знаходять сервіс самі: публічний освітній портал за три дні надіслав сплеск відвідувань розміром із клас, а платформи для уроків і посилання з Teams постійно з’являються серед джерел трафіку. Два міста, одна мапа, без акаунта: це працює і на проєкторі, і на телефонах учнів.
Усі, кому потрібне число
Сторінки ВВП, населення, густоти й найбільших міст відповідають на запитання одразу: понад тисячу відвідувань на місяць припадає на таблицю, а не на мапу. Чверть читачів рейтингу найбільших міст переходять далі на мапу.
Журналісти й автори пояснень
Поки що не основне джерело відвідувачів, але саме для цього інструмент і створювали: накладання в реальному масштабі показує те, чого не покаже таблиця, а посилання відкриває ті самі міста просто в матеріалі.
Люди шукають саме те, чим є сайт: «city size comparison» — найпопулярніший запит, і мапа входить за ним у трійку лідерів. Сторінки рейтингів ВВП, населення й найбільших міст приводять власний пошуковий трафік. За рік переходи з пошуку зросли вп’ятеро: приблизно з 2200 до 11 000 на місяць.
В основі — окрема сторінка для кожної пари міст із заголовком, описом, канонічним URL і структурованими даними. Таких сторінок 373. Вони вже стоять на позиціях із третьої по шосту; попит на окремі пари поки невеликий, тож це інвестиція на випередження запитів.
Підтримувати продукт — це більша частина роботи над ним. Тому разом із мапою ми створили потрібну для неї панель: скриньку підтримки, що виросла в поштовий клієнт, редактор форм міст і кеш, завдяки якому пошук працює швидко.
Відгуки й підтримка
Звіти про помилки виявляють те, що пропустили тести, а запити на функції підказують, що робити далі. Замість підключати хелпдеск ми вбудували підтримку у власну адмінпанель продукту.
Заповнює форму зв’язку (загальний відгук · звіт про помилку · запит на функцію) або просто пише на support@comparecitysizes.com.
Кожне повідомлення стає тікетом із категорією та повною історією листування. Прямі листи приймає AWS і автоматично збирає їх у ланцюжки, навіть коли користувач відповідає з телефона.
Відкриває в адмінпанелі вкладку відгуків, фільтрує за статусом «відкрито», помилками чи запитами, читає всю розмову й відповідає з панелі. Відповідь надходить із support@ і лишається в тікеті.
Жодного спільного пароля до Gmail, жодного місця в Zendesk, жодних повідомлень, загублених в особистій скриньці. Одне джерело правди, яким можна керувати з браузера.
Відгуки за типами, а не суцільний текст
Для помилок, запитів на функції й загальних відгуків форма одразу питає потрібне: кроки відтворення для помилок, «навіщо» для нових функцій.
Справжні ланцюжки листів
Стандартні заголовки Message-ID / In-Reply-To і запасна плюс-адреса (support+ticket@) прив’язують відповіді до потрібного тікета, хоч би яким поштовим клієнтом користувалася людина.
Виросло в повноцінний поштовий клієнт
Той самий механізм тепер обслуговує всі адреси @comparecitysizes.com на вкладці пошти в стилі Gmail: автоматично визначені скриньки, область читання з ланцюжками, надсилання з будь-якої адреси домену, шаблони й розсилка зареєстрованим користувачам.
Редактор форм
Кожне порівняння спирається на контур, який малює мапа, а контури надходять з OpenStreetMap, що іноді видає регіон замість містечка або аеропорт замість міста.
Тому будь-яку межу можна відкрити в редакторі на мапі: намалювати полігон за точками чи від руки, перетягнути вершини, об’єднати кілька полігонів в одну форму, скасувати чи повторити дію або вставити GeoJSON. Після збереження всі відвідувачі бачать уже виправлений контур.
Малюйте або обводьте
Полігони за точками для точності, малювання від руки для швидкості; кілька полігонів об’єднуються в MultiPolygon для міст з островами чи ексклавами.
Правки важливіші за джерело
Відредагована межа зберігається як перевизначення, тож наступне оновлення з OpenStreetMap не поверне непомітно неправильну форму.
Замикає коло з підтримкою
Звіт про «неправильний контур» виправляють у тій самій панелі, куди він надійшов: відкрити тікет, відкрити місто, перемалювати, відповісти.
Метадані поруч
Площа, населення, координати й нотатка зберігаються разом із формою, тому сторінка порівняння оновлюється слідом за нею.
Кешування
Контури міст надходять із Nominatim, геокодера OpenStreetMap: він повільний, має обмеження на кількість запитів, і звертатися до нього щоразу, коли хтось вводить «Токіо», не варто. Тому під час першого запиту кожна межа зберігається у власній базі даних сайту й далі віддається звідти, а повторні запити не виходять за межі сервера.
Сьогодні в цьому кеші 20 948 меж міст, і для кожної записане джерело. Це та сама таблиця, яку редагує редактор форм: перевизначення — це просто запис у кеші, який виправила людина.
Що ми зробили
Контури — це адміністративні межі з OpenStreetMap, а кілька з них у застосунку позначені як приблизні. Вони підходять для порівняння й навчання, але не для юридичних, геодезичних, планувальних чи статистичних цілей.
Так, до десяти на одній мапі, якщо ви ввійдете через Google, Facebook або електронну пошту. Посилання відкриє весь набір.
Ні. Порівнювати два міста й ділитися посиланням можна без нього, а з акаунтом ліміт зростає до десяти.
Відкрийте продукт або поговоріть із нами про створення чогось подібного для вашої команди.