Interactive game map with markers and tooltips (Satisfactory)
123 USD No backend · Static JSON · Desktop + Mobile
Task
Implement a page with an interactive game world map. Markers of objects are displayed over the map by categories. When hovering or clicking on a marker, a tooltip with information appears. The map supports zoom and pan. There is a filter panel to toggle categories on/off.
Reference: satisfactory-calculator.com/en/interactive-map
Functionality
Display of the map (large PNG or tiles) with correct rendering on desktop and mobile
Markers over the map in the correct coordinates by categories
Tooltip on hover (desktop) and click (mobile) — does not go off-screen
Zoom with mouse wheel and pinch gesture on touchscreen devices
Pan by dragging on the map
Filters by categories — hide/show markers without reloading
Stable operation with 500+ markers
Technical stack
Option A — Leaflet.js
Recommended. Zoom/pan out of the box, supports tiles and large PNGs. Quick to start.
Option B — Pixi.js / canvas
Better performance with 1000+ markers. More work. Only if Leaflet lags.
Vanilla JS or Reactmarkers.jsond3-zoom (optional)
The stack is open to suggestions — please justify your choice in the response.
Marker data format
Marker data is transmitted in JSON. The structure of each object:
{
"id": "iron-001",
"category": "resource",
"subtype": "iron",
"x": 1240,
"y": 3870,
"label": "Iron Ore",
"description": "Pure node. Yield: 120/min",
"icon": "/icons/iron.png"
}
Coordinates can be pixels or game units — conversion is needed if game units. We will clarify before starting.
What needs to be agreed upon before starting
Map file — PNG or tiles. Is it available or does it need to be prepared?
JSON with marker data — is it available or is the developer preparing the structure for filling?
Category icons — from the designer or is the developer using placeholders?
Format of marker coordinates — pixels or game units?
Not included in the task
Login, registration, server-side, saving user progress, custom markers from the player.
Materials
-
3 days123 USD
5556 12 0 3 days123 USD
Hello, I am ready to complete your project. I have experience using Pixi.js but I can easily learn leafletjs.com. If you want to achieve a quality result in a reasonable time frame - feel free to write.
-
5 days123 USD
272 5 days123 USD
Good day! I am implementing an interactive game world map without a backend: static JSON, desktop + mobile, based on the reference satisfactory-calculator.com.
Stack (justification): I recommend Leaflet.js + vanilla JS (or lightweight React if you already have a project). Zoom, pan, pinch, large PNG and tiles — out of the box; 500+ markers with clustering or Leaflet Canvas layer work stably. Pixi.js only makes sense if after testing Leaflet there is lag with 1000+ markers — for a start, this is an unnecessary complication.
Functionality: map (PNG/tiles), markers by categories in the correct coordinates (conversion from game → pixels if needed), tooltip on hover (desktop) and tap (mobile) with retention in the viewport, category filters without reloading, smooth zoom/pan.
Before starting, we will agree on: map file, ready JSON or template for filling, icons vs placeholders, coordinate format.
I will provide: HTML/CSS/JS, markers.json, instructions for adding objects.
…
Examples: https://yegor10.github.io/PortFolioWeb3/ (responsive, interactive, clean JS)
-
3 days122 USD
3976 113 6 1 3 days122 USD
Good day! I have played Satisfactory for quite a few hours, I can complete your project.
-
14 days123 USD
536 9 0 14 days123 USD
I reviewed the task and see that it suits me. I have experience with mapping interfaces and complex interactive components on the frontend, so I understand where difficulties may arise in this project.
With Leaflet.js, I will implement custom tiles or a large PNG using CRS.Simple (without geocoordinates), category markers from static JSON, tooltips separately for hover and touch-click. 500+ markers without performance drops are handled through L.DivIcon with CSS instead of heavy SVG, plus I can add clustering or virtualization if needed. Category filters update without reloading through show/hide layers in Leaflet, meaning the state is preserved after zooming and panning.
Technically, I write in React or Vanilla JS depending on your preferences, TypeScript, responsive layout for mobile with pinch-zoom through Leaflet touch handlers. I write clean code without unnecessary dependencies.
I am ready to start immediately. If you have questions about implementation details, feel free to ask.
-
5 days123 USD
12912 67 0 5 days123 USD
Hello! I will complete your task quickly and efficiently.
My recent works
https://indexfast.pp.ua - fast website indexing
https://mono-bank.pp.ua - everything about Monobank
https://mamamia.pp.ua - online store
https://programist.pp.ua/ua/portfolio/ - portfolio of works
https://monitortest.pp.ua - monitor testing
https://keytest.pp.ua - keyboard testing
… https://pctest.pp.ua - computer testing
https://vseetut.matviy.pp.ua - layout
My portfolio: https://freelancehunt.com/ua/freelancer/romas6ka.html#portfolio
Message me, I will start working today. I will be glad to cooperate with you!
-
5 days123 USD
278 5 days123 USD
Good day! I have created interactive maps on Leaflet — custom tiles, markers on layers, and category filters, so the reference satisfactory-calculator is clear to me. I will implement zoom/pan, tooltips that do not go off the edge of the screen, and stability with 500+ markers; I will keep the markers in a separate JSON file so you can easily add to it without code changes. Approximately 5 days. One clarification: will you provide the map as one large PNG or cut it into tiles — this affects loading speed on mobile.
-
3 days123 USD
6590 56 1 2 3 days123 USD
Good day, I would be happy to do it. I have over 10 years of experience. Feel free to contact me.
-
4 days123 USD
2008 36 3 4 days123 USD
Good day, I can implement an interactive map with markers and tooltips using pure JS/TS without a backend without any problems. I have over 5 years of experience in frontend development, working with custom interactive elements and responsiveness for mobile and desktop devices. Feel free to reach out!
-
4 days123 USD
196 4 days123 USD
We already have almost a ready foundation for such an interactive map, it can be quickly adapted to your PNG or tiles and discussed here on the exchange now ))
The benchmark is 5500 UAH and 4 days, if the map, JSON, and basic icons are already available.
If we need to cut the map into tiles or do the conversion of game coordinates, then we will assess more accurately after receiving the files.
For the stack, I would go with Leaflet.js - this is sufficient for 500+ markers, zoom, pan, mouse wheel, and touch gestures are already stable.
Pixi.js makes sense only if there will be 1000+ markers or heavy animation is required.
Regarding implementation - we assemble the map as CRS.Simple, bind the coordinates to the image size, extract categories into filters, limit the tooltip to the screen boundaries, and for mobile, we make it open on click.
Before delivery, I will check on a computer, phone, pinch, drag, and a scenario with 500+ points - because the map should work, not meditate over each marker ))
…
Additionally, we can later add an AI assistant for filling markers from a table or descriptions, but I wouldn't overload the basic map.
Questions to start:
- Will the map be a single PNG or are there already tiles?
- Are the coordinates in JSON in pixels or in game units?
Similar experience:
- https://business.ingello.com/svitbus - interactive logic with geography, routes, and states
- https://business.ingello.com/busticket - booking and complex user scenarios with data
- https://systems-fl.ingello.com/ua - Ingello Systems profile for FLH
-
3 days123 USD
423 3 days123 USD
Hello!
The task is clear. I can implement an interactive map using React + Leaflet: zoom, pan, markers from JSON, category filters, tooltips for desktop and mobile.
I will also consider responsiveness, correct positioning of markers, and stable performance with 500+ objects.
I can showcase similar works.
Before starting, we will need to clarify the map format, coordinates, and whether there are ready icons.
I am ready to discuss the details and start working.
Kyiv