|
| 1 | +--- |
| 2 | +layout: docs |
| 3 | +title: Початок роботи з MapLibre GL |
| 4 | +--- |
| 5 | + |
| 6 | +# {{ title }} |
| 7 | + |
| 8 | +## Вступ |
| 9 | + |
| 10 | +[MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/){: target=blank} — це бібліотека TypeScript, яка використовує WebGL для вбудовування мап. Вона використовує відкриту ліцензію BSD, тому її можна інтегрувати в будь-який сайт без юридичних проблем. Її вихідний код доступний на [GitHub](https://github.com/maplibre/maplibre-gl-js/){: target=blank}. |
| 11 | + |
| 12 | +Тут ми обмежимося невеликим, самостійним прикладом, а для детального ознайомлення зверніться до офіційних [навчальних посібників](https://maplibre.org/maplibre-gl-js/docs/examples/){: target=blank} та [документації](https://maplibre.org/maplibre-gl-js/docs/API/){: target=blank}. |
| 13 | + |
| 14 | +## Швидкий старт |
| 15 | + |
| 16 | +Для показу мапи потрібні три речі: джерело даних, стиль мапи та сайт, на якому все це розміщується. Ми будемо використовувати тайли Shortbread від OpenStreetMap Foundation, стиль Versatiles Colorful та вебсайт, який ви запустите. |
| 17 | + |
| 18 | +!!! info "Хостинг" |
| 19 | + Деякі функції вебоглядача вимагають, щоб сторінка обслуговувалася з безпечного місця. Це вебсайт з HTTPS або ваш локальний компʼютер. Ми припускаємо, що у вас є вебхостинг для «example.com», який дозволяє обслуговувати файли з диска, і що ви знаєте, як копіювати файли на вебхостинг. |
| 20 | + |
| 21 | +## Встановлення програмного забезпечення |
| 22 | + |
| 23 | +Нам потрібна Node.js 18 або пізніша версія. Якщо у вас Ubuntu 24.04 або пізніша версія, або Debian 12 або пізніша версія, ви можете встановити їх за допомогою |
| 24 | + |
| 25 | +```sh |
| 26 | +sudo apt-get install nodejs |
| 27 | +``` |
| 28 | + |
| 29 | +Для інших операційних систем зверніться до їхньої документації. Ви можете перевірити версію Node.js, яку ви маєте, за допомогою команди `node --version`. Якщо вона нижча за 18, вам потрібно буде встановити власну версію Node. Один зі способів зробити це — за допомогою [nvm](https://github.com/nvm-sh/nvm). |
| 30 | + |
| 31 | +## Створення стилю |
| 32 | + |
| 33 | +Ми будемо використовувати яскравий стиль VersaTiles, базовий стиль, який використовує тайли Shortbread. Схема векторних тайлів Shortbread — це універсальна схема векторних тайлів для даних OpenStreetMap. Щоб отримати тайли, ми будемо використовувати службу тайлів Shortbread від OpenStreetMap Foundation. |
| 34 | + |
| 35 | +!!! info "" |
| 36 | + Використання векторних тайлів регулюється [політикою використання векторних тайлів](https://operations.osmfoundation.org/policies/vector/). Ця веб-сторінка відповідає вимогам, але не існує SLA або гарантії щодо використання векторних тайлів. Якщо вам це потрібно, ви повинні розмістити їх самостійно або скористатися послугами комерційного хостингу. |
| 37 | + |
| 38 | +Стиль вимагає визначення стилю, файлів спрайтів для будь-яких піктограм та файлів гліфів для будь-яких шрифтів. Ми створимо визначення стилю, яке вказуватиме на наші власні файли спрайтів та гліфів. |
| 39 | + |
| 40 | +Почніть зі створення нової теки для зберігання файлів, які ви будете створювати. У документації ми назвемо її `style`, але ви можете назвати її як завгодно. У цій теці ми створимо всі необхідні файли та розмістимо їх у підтеці `release`. |
| 41 | + |
| 42 | +```sh |
| 43 | +mkdir style |
| 44 | +cd style |
| 45 | +mkdir release |
| 46 | +``` |
| 47 | + |
| 48 | +Створення спрайтів і гліфів може бути складним процесом, але оскільки нам не потрібно їх модифікувати, ми будемо використовувати готові. |
| 49 | + |
| 50 | +```sh |
| 51 | +curl -OL https://github.com/versatiles-org/versatiles-style/releases/download/v5.7.0/sprites.tar.gz |
| 52 | +mkdir -p release/sprites |
| 53 | +tar -C release/sprites -xzf sprites.tar.gz |
| 54 | + |
| 55 | +curl -OL https://github.com/versatiles-org/versatiles-fonts/releases/download/v2.0.0/fonts.tar.gz |
| 56 | +mkdir -p release/fonts |
| 57 | +tar -C release/fonts -xzf fonts.tar.gz |
| 58 | +``` |
| 59 | + |
| 60 | +Тепер нам потрібно створити стиль, щоб він використовував нашу нову копію гліфів і спрайтів. |
| 61 | + |
| 62 | +Скопіюйте наступний вміст у файл [build.ts](build.ts){: target=_blank}, але замініть «example.com» на URL-адресу, з якої ви будете надавати тайли, включаючи ваше доменне імʼя. |
| 63 | + |
| 64 | +```ts title="build.ts" |
| 65 | +--8<-- "docs/assets/using-tiles/build.ts" |
| 66 | +``` |
| 67 | + |
| 68 | +У тій самій теці встановіть TypeScript і стилі VersaTiles, а потім запустіть вищевказаний скрипт, щоб створити свій стиль.. |
| 69 | + |
| 70 | +```sh |
| 71 | +npm install tsx @versatiles/style@~5.7.0 |
| 72 | +node_modules/.bin/tsx build.ts |
| 73 | +``` |
| 74 | + |
| 75 | +Скопіюйте наступний вміст у файл [maplibre.html](maplibre.html){: target=_blank} і помістіть його в теку `release`. |
| 76 | + |
| 77 | +```html title="maplibre.html" |
| 78 | +--8<-- "docs/en/using-tiles/maplibre.html" |
| 79 | +``` |
| 80 | + |
| 81 | +## Випуск стилю |
| 82 | + |
| 83 | +Скопіюйте вміст теки `release` у вибране раніше місце, з якого ви будете обслуговувати файли. Зазвичай це робиться за допомогою команди scp або rsync, або через вебінтерфейс. |
| 84 | + |
| 85 | +## Поширені проблеми |
| 86 | + |
| 87 | +### `node_modules/.bin/tsx build.ts` не вдається запустити |
| 88 | + |
| 89 | +Якщо у вас застаріла версія node, ця команда не буде працювати. Ви можете виправити це, встановивши оновлену версію за допомогою nvm, як описано раніше. |
| 90 | + |
| 91 | +### На вебсторінці нічого не завантажується |
| 92 | + |
| 93 | +Відкрийте інструменти розробника у своєму вебоглядачі та подивіться в консоль. Найпоширенішою причиною відсутності відображення є неправильні URL-адреси. |
0 commit comments