Application for working with an interactive map on a touchscreen

• Preference for developers in REACT or GODOT
• Deadlines are tight.
• Design is ready in FIGMA and Adobe Illustrator

The program is a multi-page navigator for the map of the national nature park (Polushye).

The main page contains 4 buttons with animated images

Button 1 «Places» - when clicked, redirects to page type 1-1. Page 1-1 is a large map that marks the locations on the map that park visitors can reach on foot, by bicycle, or by kayak.

Functionality of pages «1-1» and «1-2»:

• On page 1-1, there is a static banner (title) at the top and a menu at the bottom, with buttons that are the same as on the main page (4 in total).
• Map – original resolution 6264x8488 px. The map can be zoomed in and moved. When zooming in on the map, the top banner and menu remain static (the map does not overlap them).
• Places – these are points on the map that are linked to an image (icon or thumbnail) and a text name. When zooming in on the map, the size of the icons and the text block with the name does not change.
• The user can «tap» any of the «places» and then a PopUp window opens displaying information about the object (place). The PopUp window is conditionally called page 1-
• Each object has its own standard content:
• Object name
• Photo
• Text description

Among the active elements in the PopUp (page 1-2) are buttons for flipping through photos (if there is more than one) – arrows right/left and a close window button – a cross.

Closing the PopUp window returns the user to page 1-1

Buttons 2-4 – these are options for the type of travel: kayak, on foot, by bicycle. All three buttons, when «tapped», redirect the user to page type 2-1. This page is standard. However, for each of the three types of routes, it differs slightly. The difference lies in:

The top banner indicates one of the three types of travel (displayed tracks) – kayak, on foot, and by bicycle.

The active button in the menu – if a type of travel is selected, for example, «kayak», then the button with the kayak image is displayed in an active state (the text color and the button itself are inverted). Similarly for the other two types of routes.

If, for example, the type of travel «Kayak» is selected, then all types of water travel (trajectories) will be displayed on the map – currently there are 3 (V1, V2, V3).

Routes – this is a dotted line that the designer (me:) drew according to the GPX file with the coordinates of the route points. Each route is clickable and when «tapped» redirects to page 2-2.

Page 2-2 – this is the route page. It displays:

• Route name
• Route symbol (colored diamond)
• Duration and length of the route
• Route identification sign (image of the sign. For example, a guy in a kayak)
• Text content
• Cropped map showing only one specific route and the objects (places) linked to this route (others are not shown).
• Close window button and return to page 2-1

When tapping any of the objects, a PopUp (page 1-2) with a description of the object (place) is displayed.

An admin panel will be needed to add new points and routes. Details upon personal communication.