Kuika's Location Picker element allows users to select a location on the map. It helps users to select the right location by providing navigation, zoom in and zoom out features on the map. In this guide, you will learn how to use the Location Picker element and how to configure location selection.

The Location Picker element can be used in both web and mobile applications.

This training content consists of the following topics:

Add Location Picker Element
Location Picker Element Properties
Location Picker Element Example Usage
Element settings and customization

Add Location Picker Element

Log in to the Kuika platform.
Open the project you will work on from the Apps screen.
Go to the UI Design module.

Select the Select Input category from the Elements panel on the left side.
Drag and drop the Location Picker element to the workspace.

If you drag it to an empty space, the Location Picker element will be added along with a Row element.
If you drag it into Column, only the Location Picker element will be added.

Location Picker Element Properties

Latitude Allows you to enter latitude information manually or from the database.
Longitude: Allows you to enter longitude information manually or from the database.

When Latitude and Longitude values are not entered, the map is initialized at (0,0) by default. The user is asked for location permission and if permission is granted, the current location is selected.

Example Usage of Location Picker Element

In this example, when the application is run, by default the location with latitude 2.219 and longitude 46.76 is selected. Clicking a button switches to the location in London with latitude 51.5072 and longitude -0.1275.

Add the Location Picker element to the workspace.
From the Properties panel, enter 2.219 in the Latitude field and 46.76 in the Longitude field.
Select the Button element from the Elements panel and add it under the Location Picker.
Click +Add Action in the button settings:
- OnClick → UI Control → Set Value Of.
- Select Location Picker1inComponent to Change field.

Select latitude in Prompt name to set field and enter 51.5072 in Value field.
Repeat the same for longitude and enter -0.1275 in the Value field.

Test the application by clicking the Preview button.

By following this guide, you can use the Location Picker element effectively in your application.

‍

Element Settings and Customization

Authorization

Anonymous Access: Allows users to access without entering account information.
All Roles Access: Provides access by verifying users' account information.
For element-level authorization, edit Authorization settings in the Properties panel.

Visibility

Always Visible: Element is always visible.
Hidden: Element is hidden.
Sometimes Visible: The element is visible depending on a specific condition.

To configure the setting:

Select the element on the screen.
Open the Properties panel on the right edge.
In the Visibility field, select an option according to your needs.

Editability

Enabled: Elements can be edited.
Disabled: Element cannot be edited.
Sometimes Enabled: The element can be edited or uneditable according to certain conditions.

Interface Design with Style Panel

By customizing your elements with the Styling Panel, you can create impressive interfaces for your web and mobile applications. In this section, you can configure the following settings:

Layout: Sizing, alignment and padding settings. Settings include Size, Min Size and Align.
Text: Font, style, color, size and spacing settings.
Fill: Customize the background with color or images.
Border: Add borders and corner radius settings.
Shadow: Add a shadow effect to add depth to elements.

By following these steps, you can configure the Area Chart element to suit your needs.

Actions

Kuika supports the following system actions:

Arithmetic, Authorization, Condition, Device, Export, Geolocation, Inversion, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.
You can also use SQL actions that you create yourself.
You can use the +ADD ACTION button from the Properties panel to add an action.