🗺 Як зробити свій лендінг з інтерактивною мапою — без API, платних підписок і React-комбайнів

Минулого тижня я зробила те, що відкладала місяцями — мапу, яка при кліку на країну показує XXX з цього регіону. Усе на чистому HTML + JS + MapLibre.

💡 Ідеально підходить для:

— локалізованих лендінгів
— сторінок з розподілом по регіонах
— лінкбейтових інфографік
— R&D проєктів для Digital PR

Що вам потрібно:
🔹 geojson-файл (я використала Natural Earth)
🔹 базовий MapLibre стиль (можна локально)
🔹 простий fetch з JSON з даними по кожній країні
🔹 один HTML-файл з JS-логікою

👩‍💻 Бекенд не потрібен. Все працює прямо з браузера.

⚙️ Працює навіть у Safari (що вже межує з дивом)

Моя мапа як бачите дуже красива, але так як це повноцінна мапа, яку можна зумити та крутити туди-сюди, було трошки важко її відредагувати

Для цього ми з Вінстоном видалили всі координати рф зі стилю мапи, відредагувавши GeoJSON-файл Natural Earth і виключивши країну з поля iso_a3 перед підключенням до MapLibre.
і це зайняло найбільше часу.
але тепер в мене є карта світу без рф , яку можна множити під будь яку нішу

і напевно це єдина в світі така мапа )))))))

просто у фотошопі взяти і вирізати - не варіант, бо це json, тому одразу відкидаємо такий варіант


📦 Якщо треба — поділюсь шаблоном, а може навіть відос пульну, пишіть в коментарях якщо вам таке цікаво

Плюс — це класна база, яку можна потім вивести на будь-який сайт

але як то кажуть - важливо тепер це донести , тому stay tuned.
побачим як буржуї відреагують на таку мапу))