Интерактивная игровая карта с маркерами и тултипами (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
Лучшая производительность при 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, десктоп + мобильный, по референсу satisfactory-calculator.com.
Стек (обоснование): рекомендую Leaflet.js + vanilla JS (или легкий React, если у вас уже есть проект). Zoom, pan, pinch, большой PNG и тайлы — из коробки; 500+ маркеров с кластеризацией или Canvas-слоем Leaflet работают стабильно. Pixi.js имеет смысл только если после теста Leaflet будет лаг на 1000+ маркерах — для старта это лишнее усложнение.
Функционал: карта (PNG/тайлы), маркеры по категориям в правильных координатах (конвертация игровых → пиксели, если нужно), тултип на hover (десктоп) и tap (мобильный) с удержанием в 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, плюс при необходимости добавлю кластеризацию или виртуализацию, если нужно. Фильтры по категориям обновляются без перезагрузки через 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: зум, панорамирование, маркеры из JSON, фильтры по категориям, тултипы на десктопе и мобильных устройствах.
Также учту адаптивность, корректное позиционирование маркеров и стабильную работу с 500+ объектами.
Могу продемонстрировать похожие работы.
Перед стартом нужно будет уточнить формат карты, координаты и есть ли готовые иконки.
Готов обсудить детали и начать работу.
Киев