Подивитись мапу: https://texty.github.io/trap_aggressor_map/
Вам знадобиться мати node й зробити npm install у папці проєкту
Зазначте адресу, за якою буде карта (базовий шлях), у svelte.config.js:
paths: {
base: process.env.BASE_PATH || '<тут адреса на сайті>',
...
}
Це потрібно для правильного визначення адрес файлів з даними та зображень.
Альтернативно, можете поставити змінну оточення BASE_PATH коли будете запускати npm run build.
Можливо, треба стилістичні зміни. Розміри мапи у файлі src/scss/map.scss у безпосередніх стилях для figure#assets-map
Збудуйте проєкт — vite build. В результаті має з'явитись папка "dist". Її вміст треба перемістити туди, де буде знаходитись карта.
З файла index.html потрібно перемістити вміст тега <head> до head сторінки з мапою; вміст <body> це сама мапа, це треба помістити на відповідне місце в тілі сторінки.
- У папці scripts є пайтонівський скрипт аби перетворити дані з таблиці "ТЗ мапа частина 1" (аркуш "for_map") на geojson для мапи. Дані мають бути збережені у
/scripts/data.csv. Результат відразу записується у папку static і далі використовується мапою. - Додаючи новий актив у таблицю, йому треба дати унікальне id, зараз це номер рядка.
- Щоб додати нову країну, треба її прапор для іконки. Зображення має бути ширини 150 пікселів у форматі jpg. Назва файлу має збігатись з назвою країни в таблиці. Всі прапори лежать у
static/flags. Наприклад,static/flags/Czechia.jpg. - Фотографії активів знаходяться у
static/photo. Назва збігається з ід актива у таблиці. В колонці "photo" має бути вказане ім'я файла, включно з розширенням.
Якщо при оновленні даних не всі країни, де є активи, зафарбовуються, значить назва країни в таблиці не співпадає з назвою в геоданих країн. Джерело цих даних — Natural Earth, назва країни в полі "GEOUNIT". Найпростіше рішення проблеми – поправити назву в таблиці, попередньо подивившись у файлі scripts/countries.geojson як там пишеться (можливі нюанси накшталт Czechia vs Czech Republic).
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openTo create a production version of your app:
npm run build