We are looking for an experienced Javascript/Mapbox UI developer to create a custom map search interface in HTML and Javascript. The interface should be a simple, guided search page to help a user select a location from pre-defined categories using custom GeoJSON data, or search for a valid street address that’s validated by Mapbox’s API.

The page will use both custom GeoJSON location data (retrieved via an API endpoint) and Mapbox’s search/autocomplete API to send a resulting address back to our application. A category drop-down menu will limit which locations a user can search for (e.g. selecting a custom category will only allow the user to search for GeoJSON locations matching that category – they will be able to search using the facility name and address). If a user selects an "other" category, they will be allowed to enter any street address which will be validated against Mapbox’s API. GeoJSON of the selected location will be sent back to our application via an asynchronous Javascript function.

Once a location result is found, a location marker should be displayed on a standard Mapbox street map (with an option for the user to see an aerial view). The location marker for "other" locations (e.g. a custom address search) should be adjustable by the user and a reverse geocode API call made back to Mapbox once the user moves the location pin to retrieve the updated address. The location marker for pre-defined GeoJSON locations retrieved via the custom API should *not* be modifiable by the user.

For example:
1) A user selects a pre-defined category named "offices" from a drop-down menu to the left of the search box. Only "office" locations will be returned via the GeoJSON API (e.g. /api/locations?category=offices). The user searches for "ABC Inc" and the autocomplete search box displays the matching location, ABC Inc, 123 Main St, Anytown, US. Once the user clicks this address, they see the location of ABC Inc on the map with a marker and they cannot move the location marker. They can only confirm the location or select another category/search for another location.
2) A user selects the "other" category. They’re able to enter any address which searches Mapbox’s API. They enter 122 Maple Ave and see a list of corresponding addresses in the autocomplete menu. They pick the first address, and the map shows them the location and places a marker on a house. They can move the marker to refine the location (e.g. they move the marker to another house on the street, which reverse geocodes back to 134 Maple Ave). They can then confirm the updated location or enter a new search/select another category.

The custom API endpoint delivering the GeoJSON location data is in active development, so will work with the developer to ensure the resulting data is formatted for effective querying. The final deliverable should be HTML/JS source code compatible with modern browsers (Chrome, Edge, Safari and Firefox) and will work with the developer to pick an appropriate/basic style for the user interface.

Hourly Range: $25.00-$75.00

Posted On: July 20, 2024 03:52 UTC
Category: Front-End Development
Skills:JavaScript, Mapbox, API, HTML5

Country: United States

click to apply