1. Log in to the Kuika platform.
2. Open the project you will work on from the Apps screen.

3. In the UI Design module, drag and drop the Maps element under the Special category from the Elements panel on the left edge to the workspace.

• Datasource: Specifies the data source for locations to be displayed on the map. Sources such as REST API and SQL Actions are supported.
• Latitude: The latitude value on which the map will focus when first opened. Can be assigned statically or dynamically.
• Longitude: The longitude value on which the map will focus when first opened.
• Circle Radius In Km: Highlights a specific area on the map within a circular boundary.
• Auto Center: Determines how the map will be positioned upon opening.
  
  • True: The map automatically centers to cover all locations in the data source and determines the appropriate zoom level itself. It positions itself to include all markers.
  • False: The map does not perform any automatic centering. The opening position is set according to the values specified in the Latitude and Longitude fields. If these fields are empty, the map opens at the default starting position.
  • When Auto Center = True, the Latitude and Longitude values are not used.
• Group Picker Icon: Allows nearby locations to be grouped under a single icon when zooming out.
• Current Location Icon: Shows the user's current location.
• Selected Location Icon: Marks the location selected by the user.
• Keep Center On Zoom: The map center remains fixed during zooming.
• Map Type: Determines the map's display style. Supported map types are:
  
  • Roadmap: Standard road map. Highways, streets, and city details are clearly shown.
  • Terrain: A map type that shows elevation differences and natural terrain features. Mountains, hills, and valleys become prominent.
  • Satellite: Displays the map with real-world images using satellite imagery. Buildings, natural areas, and water sources are clearly visible.
  • Hybrid: A map mode that combines satellite images with road and settlement information. Road and city names are added to the satellite images to provide a more comprehensive view.
• HideTrafficLayer: Controls whether the traffic density layer (road congestion) is displayed on the map. The default value is false.
• HideTransitLayer: Controls whether public transportation routes (train, subway, tram, etc.) are displayed on the map. The default value is false.
• Waypoints: Enables automatic route drawing from the user's current location to entered locations.
• FullScreenControl: Controls whether the map can be switched to full-screen mode.
• StreetViewControl (Web): Enables switching to street view.
• ScaleControl (Web): Determines whether the distance scale is displayed on the map.
• ZoomControl (Web): Determines whether the map zoom in and zoom out buttons are displayed.
• CameraControl (Web): Allows control of the map perspective and camera angle.
• EnableLocationTracking (Web + Mobile): Enables real-time tracking of the user's current location on the map.

Latitude and Longitude values must be in “Decimal” format.

The Maps element opens the map screen and displays other locations even when the latitude and longitude values are Null (empty).

Getting Location

• To get the latitude and longitude values of a location via Google Maps, right-click on the map and copy the coordinates from the menu that appears. Add these values to the Latitude and Longitude fields of the Maps element.

Events

• On Location Click: Triggered when the user clicks on a location on the map.
• On Map Load: Runs when the map loads.
• On Zoom Change: Activates when the user zooms in or out.

The Maps element dynamically displays information from different data sources on the map. This allows your application to offer location-based services in a more user-friendly and interactive way.

Authorization

To manage access control at the element level, you can use the Authorization section in the Properties panel.

Access Types

Anonymous

Allows all users to view the element without logging in.

Restricted

Restricts access to only verified users or specific roles.

• Everyone: When enabled, all logged-in users can access the element.
• Roles: The roles allowed to access the element are selected here. To edit the role list, click the gear (⚙️) icon next to the Roles field to open the Role Management window. From this window, you can add new roles, create folders, or manage existing roles.

Unauthorized Behavior (Hide / Disable)

If the user does not have the required role, you can specify how the element should behave in the Choose field:

• Hide: If the user is not authorized, the element is completely hidden and does not appear on the screen.
• Disable: The element remains visible but becomes unclickable / unusable.

This setting is used to manage how unauthorized users encounter the element.

Visibility

Always Visible: The element is always visible.
Hidden: The element is hidden.
Sometimes Visible: The element becomes visible based on specific conditions.

When Sometimes Visible is used, AND / OR groups can be added directly, allowing visibility rules to be grouped and more complex scenarios to be managed easily.

To configure the setting:

• Select the element on the screen.
• Open the Properties panel on the right.
• Choose the appropriate option under Visibility.

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.