Interaktywna mapa gry z znacznikami i podpowiedziami (Satisfactory)
461 PLN
Bez backendu · Statyczny JSON · Desktop + Mobile
Zadanie
Zrealizować stronę z interaktywną mapą świata gry. Na mapie wyświetlane są znaczniki obiektów według kategorii. Po najechaniu lub kliknięciu na znacznik pojawia się tooltip z informacją. Mapa wspiera zoom i pan. Jest panel filtrów do włączania/wyłączania kategorii.
Referencja: satisfactory-calculator.com/en/interactive-map
Funkcjonalność
Wyświetlanie mapy (duży PNG lub kafelki) z poprawnym renderowaniem na desktopie i mobile
Znaczniki na mapie w poprawnych współrzędnych według kategorii
Tooltip przy hover (desktop) i kliknięciu (mobile) — nie wychodzi poza ekran
Zoom kółkiem myszy oraz gestem pinch na urządzeniach dotykowych
Pan dragiem po mapie
Filtry według kategorii — ukrywają/pokazują znaczniki bez przeładowania
Stabilna praca przy 500+ znacznikach
Stos technologiczny
Opcja A — Leaflet.js
Rekomendowane. Zoom/pan z pudełka, wspiera kafelki i duże PNG. Szybko się uruchamia.
Opcja B — Pixi.js / canvas
Lepsza wydajność przy 1000+ znacznikach. Więcej pracy. Tylko jeśli Leaflet laguje.
Vanilla JS lub Reactmarkers.jsond3-zoom (opcja)
Stos otwarty na propozycje — prosimy uzasadnić wybór w odpowiedzi.
Format danych znaczników
Dane znaczników przekazywane są w JSON. Struktura każdego obiektu:
{
"id": "iron-001",
"category": "resource",
"subtype": "iron",
"x": 1240,
"y": 3870,
"label": "Iron Ore",
"description": "Pure node. Yield: 120/min",
"icon": "/icons/iron.png"
}
Współrzędne mogą być pikselami lub jednostkami gry — potrzebna konwersja, jeśli są jednostkami gry. Ustalimy przed rozpoczęciem.
Co należy uzgodnić przed rozpoczęciem
Plik mapy — PNG lub kafelki. Czy jest, czy trzeba przygotować?
JSON z danymi znaczników — jest, czy deweloper przygotowuje strukturę pod napełnienie?
Ikony kategorii — od projektanta czy deweloper używa placeholdera?
Format współrzędnych znaczników — piksele czy jednostki gry?
Nie wchodzi w zakres zadania
Logowanie, rejestracja, część serwerowa, zapisywanie postępu użytkownika, niestandardowe znaczniki od gracza.
Materiały
-
3 dni461 PLN
5556 12 0 3 dni461 PLN
Cześć, jestem gotów zrealizować Twój projekt. Mam doświadczenie w używaniu Pixi.js, ale bez problemu nauczę się leafletjs.com. Jeśli chcesz uzyskać wysoką jakość w rozsądnych terminach - pisz.
-
5 dni461 PLN
272 5 dni461 PLN
Dzień dobry! Realizuję interaktywną mapę świata gry bez backendu: statyczny JSON, desktop + mobile, według referencji satisfactory-calculator.com.
Stos (uzasadnienie): polecam Leaflet.js + vanilla JS (lub lekki React, jeśli już masz projekt). Zoom, pan, pinch, duży PNG i kafelki — z pudełka; 500+ znaczników z klasteryzacją lub warstwą Canvas Leaflet działają stabilnie. Pixi.js ma sens tylko jeśli po teście Leaflet będzie lag przy 1000+ znacznikach — na start to zbędne skomplikowanie.
Funkcjonalność: mapa (PNG/kafelki), znaczniki według kategorii w odpowiednich współrzędnych (konwersja z gry → piksele, jeśli to konieczne), tooltip na hover (desktop) i tap (mobile) z utrzymywaniem w viewport, filtry kategorii bez przeładowania, płynny zoom/pan.
Przed rozpoczęciem uzgodnimy: plik mapy, gotowy JSON lub szablon do wypełnienia, ikony vs placeholder, format współrzędnych.
Przekazuję: HTML/CSS/JS, markers.json, instrukcję dodawania obiektów.
…
Przykłady: https://yegor10.github.io/PortFolioWeb3/ (responsywny, interaktywny, czysty JS)
-
3 dni461 PLN
3976 113 6 1 3 dni461 PLN
Dzień dobry!\nSam spędziłem w Satisfactory sporo godzin, mogę zrealizować twój projekt\n_________________________________________________________________________________
-
14 dni461 PLN
536 9 0 14 dni461 PLN
Przejrzałem zadanie i widzę, że mi odpowiada. Mam doświadczenie z interfejsami kartograficznymi oraz złożonymi komponentami interaktywnymi na froncie, więc rozumiem, gdzie mogą wystąpić trudności w tym projekcie.
Z Leaflet.js zrealizuję niestandardowe kafelki lub dużego PNG przez CRS.Simple (bez geokoordynatów), znaczniki według kategorii ze statycznego JSON, tooltipy osobno dla hover i touch-click. 500+ znaczników bez spadku wydajności rozwiązuje się przez L.DivIcon z CSS zamiast ciężkich SVG, a w razie potrzeby dodam clustering lub wirtualizację, jeśli będzie to konieczne. Filtry według kategorii aktualizują się bez przeładowania przez show/hide warstw Leaflet, co oznacza, że stan jest zachowywany po powiększeniu i przesunięciu.
Technicznie piszę w React lub Vanilla JS w zależności od waszych preferencji, TypeScript, responsywne układy pod mobile z pinch-zoom przez Leaflet touch handlers. Kod piszę czysto, bez zbędnych zależności.
Jestem gotów do rozpoczęcia od razu. Jeśli są pytania dotyczące szczegółów realizacji, piszcie.
-
5 dni461 PLN
12912 67 0 5 dni461 PLN
Cześć! Wykonam Twoje zadanie szybko i jakościowo.
Moje ostatnie prace
https://indexfast.pp.ua - szybka indeksacja strony
https://mono-bank.pp.ua - wszystko o monobank
https://mamamia.pp.ua - sklep internetowy
https://programist.pp.ua/ua/portfolio/ - portfolio prac
https://monitortest.pp.ua - testowanie monitora
https://keytest.pp.ua - testowanie klawiatury
… https://pctest.pp.ua - testowanie komputera
https://vseetut.matviy.pp.ua - składanie
Moje portfolio: https://freelancehunt.com/ua/freelancer/romas6ka.html#portfolio
Pisz, zacznę pracować dzisiaj. Będę zadowolony ze współpracy z Tobą!
-
5 dni461 PLN
278 5 dni461 PLN
Dzień dobry! Robiłem interaktywne mapy na Leaflet — niestandardowe kafelki, znaczniki na warstwach i filtry kategorii, więc referencja satisfactory-calculator jest mi znana. Zoom/pan, tooltipy, które nie wychodzą poza krawędź ekranu i stabilność przy 500+ znacznikach zrobię; same znaczniki będę trzymał w osobnym JSON, abyście mogli łatwo je uzupełniać bez zmian w kodzie. Orientacyjnie 5 dni. Jedno wyjaśnienie: czy mapa będzie w jednym dużym PNG, czy pokroicie ją na kafelki — to wpływa na szybkość ładowania na urządzeniach mobilnych.
-
3 dni461 PLN
6590 56 1 2 3 dni461 PLN
Dzień dobry, chętnie wykonam. Doświadczenie ponad 10 lat. Proszę o kontakt.
-
4 dni461 PLN
2008 36 3 4 dni461 PLN
Dzień dobry, bez problemu zrealizuję interaktywną mapę z markerami i tooltipami w czystym JS/TS bez backendu. Mam ponad 5 lat doświadczenia w frontendzie, pracowałem z niestandardowymi interaktywnymi elementami, responsywnością na urządzenia mobilne i desktopowe. Proszę o kontakt!
-
4 dni461 PLN
196 4 dni461 PLN
Mamy już prawie gotową podstawę do takiej interaktywnej mapy, którą można szybko dostosować do waszego PNG lub kafelków i omówić tutaj na giełdzie teraz ))
punkt odniesienia - 5500 UAH i 4 dni, jeśli mapa, JSON i podstawowe ikony już istnieją.
jeśli trzeba przyciąć mapę na kafelki lub zrobić konwersję współrzędnych gry, wtedy dokładniej ocenimy po plikach.
co do stacku, poszedłbym przez Leaflet.js - dla 500+ znaczników to wystarczy, zoom, pan, kółko myszy i gesty dotykowe są już stabilne.
Pixi.js ma sens tylko jeśli znaczników będzie 1000+ lub potrzebna jest ciężka animacja.
co do realizacji - zbieramy mapę jako CRS.Simple, przypisujemy współrzędne do rozmiaru obrazu, kategorie przenosimy do filtrów, tooltip ograniczamy do granic ekranu, dla telefonu robimy otwieranie po kliknięciu.
przed oddaniem sprawdzę komputer, telefon, pinch, drag i scenariusz z 500+ punktami - bo mapa ma działać, a nie medytować nad każdym znacznikiem ))
…
dodatkowo można później dodać AI-asystenta do wypełniania znaczników z tabeli lub opisów, ale podstawowej mapy nie chciałbym przeciążać.
pytania do startu
- mapa będzie jednym PNG czy już są kafelki
- współrzędne w JSON w pikselach czy w jednostkach gry
podobne doświadczenie
- https://business.ingello.com/svitbus - interaktywna logika z geografią, trasami i stanami
- https://business.ingello.com/busticket - rezerwacje i skomplikowane scenariusze użytkowników z danymi
- https://systems-fl.ingello.com/ua - profil Ingello Systems dla FLH
-
3 dni461 PLN
423 3 dni461 PLN
Cześć!
Zadanie jest zrozumiałe. Mogę zrealizować interaktywną mapę na React + Leaflet: zoom, pan, znaczniki z JSON, filtry według kategorii, tooltipy na desktopie i mobile.
Również uwzględnię responsywność, poprawne pozycjonowanie znaczników i stabilną pracę z 500+ obiektami.
Mogę zaprezentować podobne prace.
Przed rozpoczęciem trzeba będzie doprecyzować format mapy, współrzędne oraz czy są gotowe ikony.
Jestem gotów omówić szczegóły i rozpocząć pracę.
Kijów