Интерактивная игровая карта с маркерами и тултипами (Satisfactory)

Бюджет: 5500 UAH Срок: 5 дней

Добрый день! Делал интерактивные карты на Leaflet — кастомные тайлы, маркеры по слоям и фильтры категорий, так что референс satisfactory-calculator мне понятен. Zoom/pan, тултипы, которые не выходят за край экрана, и стабильность на 500+ маркерах сделаю; сами маркеры буду хранить в отдельном JSON, чтобы вы могли легко дополнять без правок кода. Ориентировочно 5 дней. Одно уточнение: карту дадите одним большим PNG или нарезать на тайлы — это влияет на скорость загрузки на мобильном.

Бюджет: 5500 UAH Срок: 3 дня

Здравствуйте, готов выполнить ваш проект. Есть опыт в использовании Pixi.js но без проблем изучу leafletjs.com. Если хотите получить качественный результат в разумные сроки - пишите.

Бюджет: 5500 UAH Срок: 5 дней

Доброго дня! Реализую интерактивную карту игрового мира без бэкенда: статический 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) Развернуть

Бюджет: 5500 UAH Срок: 14 дней

Просмотрев задание, вижу, что оно мне подходит. У меня есть опыт с картографическими интерфейсами и сложными интерактивными компонентами на фронтенде, поэтому я понимаю, где могут возникнуть сложности именно в этом проекте.

С помощью 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. Код пишу чисто, без лишних зависимостей.

Готов начать сразу. Если есть вопросы по деталям реализации, пишите.

Бюджет: 5500 UAH Срок: 5 дней

Здравствуйте! Выполню ваше задание быстро и качественно.

Последние мои работы
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
Пишите, начну сегодня работать. Буду рад сотрудничеству с Вами! Развернуть

Бюджет: 5500 UAH Срок: 3 дня

Добрый день, с удовольствием выполню. Опыт более 10 лет. Обращайтесь.

Бюджет: 5500 UAH Срок: 4 дня

У нас уже почти готова основа для такой интерактивной карты, её можно быстро адаптировать под ваш 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 Развернуть

Бюджет: 5500 UAH Срок: 3 дня

Здравствуйте!

Задача понятна. Могу реализовать интерактивную карту на React + Leaflet: зум, панорамирование, маркеры из JSON, фильтры по категориям, тултипы на десктопе и мобильных устройствах.
Также учту адаптивность, корректное позиционирование маркеров и стабильную работу с 500+ объектами.
Могу продемонстрировать похожие работы.
Перед стартом нужно будет уточнить формат карты, координаты и есть ли готовые иконки.
Готов обсудить детали и начать работу.