Interactive Map
An interactive map serving as a support for an exploration video game. The challenge is to provide information quickly to the player so they can progress efficiently. The map format was the most relevant. As it's a console game, the interface must be simple and ergonomic on mobile, while still having an adapted interface for larger screens.
Project Link
Key points
Search Functionality
One of the main features is searching for points of interest via text input. For this, I use Fuse.js, a very powerful and fast search engine that handles partial words, for example.
Filtering Functionality
For readability and performance reasons, it's necessary to limit the number of elements displayed on the map. To do this, I use a filter that only displays the points of interest corresponding to the player's search.
Challenges
There is a huge amount of data to display on the map, so performance needs to be managed.
Managing screens of different sizes, ergonomics, and UX is complicated because a map is not a common visual element for me to handle.
Creating the base map required cutting a gigantic image at each zoom level. I had to develop an algorithm to manage this cutting and optimize loading time.