We are seeking a skilled React Native developer to improve the usability of our mapbox interface. Our current app was developed in such a way that makes it impossible to use outside of the user’s current location.

Context:
This is an app that shows products and services based on location.

Objective:
Our overall goal is to ensure that users located in any area can pan the map to see what products and services are available in that location. A circle within map defines the area of which events and services are displayed.

1. Default View Setup:

Map Initialization: If user shares the location, center the map on their location. If user does not share location, center in the middle of US and span entire country.
Area Circle: Overlay a visible circle centered. This circle should be large enough to contain approx. 10-25 events. API changes may be needed to support this, please recommend.
Circle Styling: change to white instead of purple.

2. User Interactions:

Centering the Circle:
Action: User presses and holds on any location on the map.
Response: The map centers the area circle on the location where the user pressed, without zooming in or out.
Moving the Circle:
Action: User presses and holds within area circle
Response: the area circle drags around while holding
Adjusting Circle Size:
Action: User pinches inside the area circle.
Response: Adjust the size of the circle based on the pinch gesture. Pinching outwards enlarges the circle, and pinching inwards reduces its size.
Limitations: Set minimum and maximum radius limits for the circle to prevent it from becoming too small to be useful or too large to manage. 500 mile max, 1 mile min.
Visual Feedback: Dynamically update the circle’s radius during the pinch gesture to give immediate visual feedback to the user.
Map Zoom:
Action: User pinches to zoom in or out on the map outside the boundaries of the area circle.
Response: The map zooms in or out accordingly while keeping the area circle’s relative size and position constant. (area circle should look smaller when zooming out, but stay covering the same area.)
Constraints: Ensure that zooming does not affect the size or shape of the area circle. In other words, zooming maintains the circle size, but changes the area that it represents.

  Skills required:
  – React Native
  – Mapbox integration
  – Usability testing
  – Problem-solving
  
We would like to have this project completed within 2 weeks.

Hourly Range: $15.00-$25.00

Posted On: April 29, 2024 02:19 UTC
Category: Front-End Development
Skills:JavaScript, React Native, iOS, React, Android

Country: United States

click to apply