Інтерактивна ігрова карта з маркерами і тултіпами ( Satisfactory )
5500 UAHБез бекенду · Статичний JSON · Desktop + Mobile
Завдання
Реалізувати сторінку з інтерактивною картою ігрового світу. Поверх карти відображаються маркери об'єктів по категоріях. При наведенні або кліку на маркер з'являється тултіп з інформацією. Карта підтримує zoom і pan. Є панель фільтрів для вмикання/вимикання категорій.
Референс: satisfactory-calculator.com/en/interactive-map
Функціонал
Відображення карти (великий PNG або тайли) з коректним рендером на desktop і mobile
Маркери поверх карти у правильних координатах по категоріях
Тултіп при hover (desktop) і кліку (mobile) — не виходить за межі екрана
Zoom колесом миші та pinch-жестом на тачскрін пристроях
Pan drag-ом по карті
Фільтри по категоріях — приховують/показують маркери без перезавантаження
Стабільна робота при 500+ маркерах
Технічний стек
Варіант A — Leaflet.js
Рекомендовано. Zoom/pan з коробки, підтримує тайли і великі PNG. Швидко стартує.
Варіант B — Pixi.js / canvas
Кращa продуктивність при 1000+ маркерах. Більше роботи. Тільки якщо Leaflet лагає.
Vanilla JS або Reactmarkers.jsond3-zoom (опція)
Стек відкритий до пропозиції — просимо обґрунтувати вибір у відповіді.
Формат даних маркерів
Дані маркерів передаються у JSON. Структура кожного об'єкта:
{
"id": "iron-001",
"category": "resource",
"subtype": "iron",
"x": 1240,
"y": 3870,
"label": "Iron Ore",
"description": "Pure node. Yield: 120/min",
"icon": "/icons/iron.png"
}
Координати можуть бути пікселями або ігровими — потрібна конвертація, якщо ігрові. Уточнюємо до старту.
Що потрібно узгодити до старту
Файл карти — PNG або тайли. Є чи треба готувати?
JSON з даними маркерів — є чи розробник готує структуру під наповнення?
Іконки категорій — від дизайнера або розробник використовує placeholder?
Формат координат маркерів — пікселі чи ігрові одиниці?
Не входить у завдання
Логін, реєстрація, серверна частина, збереження прогресу користувача, кастомні маркери від гравця.
Матеріали
-
3 дні5500 UAH
5556 12 0 3 дні5500 UAH
Привіт, готовий виконати ваш проект. Є досвід у використанні Pixi.js, але без проблем вивчу leafletjs.com. Якщо хочете отримати якісний результат у розумні терміни - пишіть.
-
5 днів5500 UAH
272 5 днів5500 UAH
Доброго дня! Реалізую інтерактивну карту ігрового світу без бекенду: статичний JSON, desktop + mobile, за референсом satisfactory-calculator.com.
Стек (обґрунтування): рекомендую Leaflet.js + vanilla JS (або легкий React, якщо у вас уже є проєкт). Zoom, pan, pinch, великий PNG і тайли — з коробки; 500+ маркерів з кластеризацією або Canvas-шаром Leaflet працюють стабільно. Pixi.js має сенс лише якщо після тесту Leaflet буде лаг на 1000+ маркерах — для старту це зайве ускладнення.
Функціонал: карта (PNG/тайли), маркери по категоріях у правильних координатах (конвертація ігрових → пікселі, якщо потрібно), тултіп на hover (desktop) і tap (mobile) з утриманням у viewport, фільтри категорій без перезавантаження, плавний zoom/pan.
До старту узгодимо: файл карти, готовий JSON чи шаблон під наповнення, іконки vs placeholder, формат координат.
Передаю: HTML/CSS/JS, markers.json, інструкція по додаванню об'єктів.
…
Приклади: https://yegor10.github.io/PortFolioWeb3/ (адаптив, інтерактив, чистий JS)
-
3 дні5495 UAH
3976 113 6 1 3 дні5495 UAH
Доброго дня!
Сам награв в Satisfactory не мало годин , можу виконать ваш проект
_________________________________________________________________________________
-
14 днів5500 UAH
536 9 0 14 днів5500 UAH
Переглянув завдання, бачу що воно мені підходить. Маю досвід з картографічними інтерфейсами та складними інтерактивними компонентами на фронтенді, тому розумію де можуть виникнути складнощі саме в цьому проєкті.
З Leaflet.js реалізую кастомні тайли або великий PNG через CRS.Simple (без геокоординат), маркери по категоріях зі статичного JSON, тултіпи окремо для hover і touch-кліку. 500+ маркерів без просідання продуктивності вирішується через L.DivIcon з CSS замість важких SVG, плюс за потреби додам clustering або virtualization якщо потрібно. Фільтри по категоріях оновлюються без перезавантаження через show/hide шарів Leaflet, тобто стан зберігається після зуму і пану.
Технічно пишу на React або Vanilla JS залежно від ваших вподобань, TypeScript, адаптивна верстка під mobile з pinch-zoom через Leaflet touch handlers. Код пишу чисто, без зайвих залежностей.
Готовий стартувати одразу. Якщо є питання по деталях реалізації, пишіть.
-
5 днів5500 UAH
12912 67 0 5 днів5500 UAH
Вітаю! Виконаю ваше завдання швидко і якісно.
Останні мої роботи
https://indexfast.pp.ua - швидка індексація сайту
https://mono-bank.pp.ua - все про монобанк
https://mamamia.pp.ua - інтернет магазин
https://programist.pp.ua/ua/portfolio/ - портфоліо робіт
https://monitortest.pp.ua - тестування монітора
https://keytest.pp.ua - тестування клавіатури
… https://pctest.pp.ua - тестування компютера
https://vseetut.matviy.pp.ua - верстка
Моє портфоліо: https://freelancehunt.com/ua/freelancer/romas6ka.html#portfolio
Пишіть, почну сьогодні працювати. Буду радий співпраці з Вами!
-
5 днів5500 UAH
278 5 днів5500 UAH
Доброго дня! Робив інтерактивні карти на Leaflet — кастомні тайли, маркери по шарах і фільтри категорій, тож референс satisfactory-calculator мені зрозумілий. Zoom/pan, тултіпи що не вилазять за край екрана і стабільність на 500+ маркерах зроблю; самі маркери триматиму в окремому JSON, щоб ви легко доповнювали без правок коду. Орієнтовно 5 днів. Одне уточнення: карту дасте одним великим PNG чи нарізати на тайли — це впливає на швидкість завантаження на мобільному.
-
3 дні5500 UAH
6590 56 1 2 3 дні5500 UAH
Доброго дня, залюбки виконаю. Досвід більше 10 років. Звертайтесь
-
4 дні5500 UAH
2008 36 3 4 дні5500 UAH
Доброго дня, без проблем реалізую інтерактивну карту з маркерами і тултіпами на чистому JS/TS без бекенду. Маю більше 5ти років досвіду у фронтенд розробці, працював з кастомними інтерактивними елементами, адаптивністю під мобільні та десктоп пристрої. Звертайтесь!
-
4 дні5500 UAH
196 4 дні5500 UAH
МИ вже маємо майже готову основу для такої інтерактивної карти, її можна швидко адаптувати під ваш PNG або тайли і обговорити тут на біржі зараз ))
орієнтир - 5500 грн і 4 дні, якщо карта, JSON і базові іконки вже є.
якщо треба різати карту на тайли або робити конвертацію ігрових координат, тоді точніше оцінимо після файлів.
по стеку я б ішов через Leaflet.js - для 500+ маркерів цього вистачить, zoom, pan, колесо миші і touch-жести вже стабільні.
Pixi.js має сенс лише якщо маркерів буде 1000+ або потрібна важка анімація.
по реалзацією - збираємо карту як CRS.Simple, прив'язуємо координати до розміру зображення, категорії виносимо в фільтри, тултіп обмежуємо межами екрана, для телефону робимо відкриття по кліку.
перед здачею перевірю комп'ютер, телефон, pinch, drag і сценарій з 500+ точками - бо карта має працювати, а не медитувати над кожним маркером ))
…
додатково можна пізніше додати ШІ-помічника для наповнення маркерів із таблиці або описів, але базову карту я б не перевантажував.
питання до старту
- карта буде одним PNG чи вже є тайли
- координати в JSON у пікселях чи в ігрових одиницях
схожий досвід
- https://business.ingello.com/svitbus - інтерактивна логіка з географією, маршрутами і станами
- https://business.ingello.com/busticket - бронювання і складні користувацькі сценарії з даними
- https://systems-fl.ingello.com/ua - профіль Ingello Systems для FLH
-
3 дні5500 UAH
423 3 дні5500 UAH
Вітаю!
Завдання зрозуміле. Можу реалізувати інтерактивну карту на React + Leaflet: zoom, pan, маркери з JSON, фільтри по категоріях, тултіпи на desktop і mobile.
Також врахую адаптивність, коректне позиціонування маркерів і стабільну роботу з 500+ об’єктами.
Можу продемонстувати схожі роботи.
Перед стартом потрібно буде уточнити формат карти, координати та чи є готові іконки.
Готовий обговорити деталі та почати роботу.
Київ