Overview
The Mapbox API Address Lookup prefab connects to the Mapbox API to search for and retrieve address information based on keywords. Users can input search terms and receive formatted address results that can be displayed in various elements.
Important Note About Using API Keys in Play
If you are using any sensitive API keys in your Fetch nodes, these keys are exposed and can be seen by users of your prototypes and apps.
For prototypes, make sure you have your App Clip's password protected and that you are sending to trusted sources.
For Export to Xcode, we recommend you store your keys server side using services like Firebase Cloud Functions, Supabase Edge Functions, or AWS Lambda for secure request handling.
Prefab Controls
Fetch Onload
Choose if the Fetch API should occur immediately when the page loads.
API Key
Enter your API key for the Mapbox API. You can create an API key here.
Search Result
Set the number of search results the API will return.
Search Keyword
Enter a keyword for the Mapbox API to use to search for an address. To update this prompt based on a user's input, read the Get API Data section below.
API Loading
Add actions to fire while the API loads.
API Response
Add actions to fire when the API responds (loads successfully).
API Error
Add actions to fire if the API fails to load.
Get API Data
To dynamically update the Mapbox API "address results," you can update the prefab's keyword variable through user interaction.
Textfield Input
To set the keyword based on what a user types into a text field, set the keyword variable to the value of the textfield:
Page.API/MapboxAPIAddressLookup.#SearchKeyword = self.value
Break the expression down
Break the expression down
Variable Expression:
Page—The location of the prefab
API/MapboxAPIAddressLookup—The prefab name
#SearchKeyword—The prefab variable
Value Expression:
self—The object the interaction is on
value—The textfield property for the value of the textfield
Trigger this interaction while the user is typing, so the API continuously updates as the user types an address.
Populate Data
To display the top search results based on the keyword, you can output the #responseText variable to a text element. This Set Text action should be placed on the API Response section on the prefab.
To display the top search results based on the keyword, you can save the address (place_name) to the #address component variable. Then use that variable to set the text in the component.
