Kuika's Location Picker element allows users to select locations on a map. With zoom, pan, and drag features, users can pinpoint exactly where they want on the map. It is used in scenarios such as delivery addresses, appointment locations, or event locations.
The Location Picker element can be used in both web and mobile applications.
Areas of Use
Delivery address or location determination
Map-based search and filtering
Appointment or event location selection
Navigation and route starting point setting
Usage Scenario – Selecting a Location on a Map
In a travel planning application, users use the Location Picker element to select their destination on a map.
In the scenario:
A map appears on the screen.
Users can search for a location by clicking on the “Search on the map” field.
The map starts at a specific coordinate (e.g., Paris) by default.
If desired, users can change the location by tapping on a different point on the map.
When the location is selected, the latitude and longitude information is automatically updated.
UI Design Module Operations
Go to the UI Design module.
Drag and drop the Location Picker element from the Elements > Select Input category.
In the Properties panel, configure the following settings:
Latitude: 48.8566 (example latitude for Paris)
Longitude: 2.3522 (example Paris longitude)
Placeholder: “Search on the map”
Zoom: Map zoom level (e.g., 14)
Add Elements > Button.
Label: “Go to London”
Action:
OnClick → UI Control → Set Value Of → Location Picker
Latitude: 51.5072
Longitude: -0.1275
Using Features in a Scenario Context
Latitude: Sets the starting latitude value for the map.
Longitude: Sets the starting longitude value for the map.
Placeholder: This is the description text for the text field where the user can search.
Zoom: Controls the zoom level of the map.
OnClick Action: The map location can be dynamically changed with a different button or action.
When the Scenario is Complete
The user sees the map on the screen.
They can click on the “Search on the map” field to search for an address or make a manual selection on the map.
The Latitude and Longitude values of the selected location are dynamically updated.
When the “Go to London” button is clicked, the map automatically moves to the London coordinates.
Limitations
The Location Picker element is available on both web and mobile, but requires location permission (GPS).
If the user denies location permission, the map starts at the default coordinates (0,0).
For dynamic actions, the Set Value Of operation must be correctly connected.
Tips and Best Practices
Dynamically set the map starting point based on the user's location.
Keep the placeholder text visible (“Search or select location”).
You can log coordinate changes to create a user selection history.
Optimize zoom and scroll behavior for map interactions on mobile devices.
