Kuika's Maps element allows you to add location-based interactions to your application. Users can view place markers on the map, zoom in/out, and select specific locations. Maps can be used in many scenarios, such as store locations, car sharing systems, or delivery tracking applications.

It can be used in both web and mobile applications.

Areas of Use

• Car rental or sharing applications
• Delivery/logistics location tracking
• Listing branch or store locations
• Route planning or area restriction
• Providing services based on the user's current location

Use Case – Car Rental Application

In a car rental application, the user views the vehicles closest to their location via the Maps element. Each vehicle is displayed on the map with a pin (marker). When the user clicks on a pin, the vehicle's information (make, model, price, fuel type, distance) is displayed as a card at the bottom. The user can rent this vehicle immediately if they wish.

In the scenario:

1. The map focuses on the user's current location.
2. When the app opens, all vehicles are dynamically loaded onto the map from the data source.
3. When the user taps on a location pin, the relevant vehicle information is displayed in the details panel.
4. When the user presses the “Start Rent” button, the rental process begins.

Connecting the Data Source

• Go to the Datasources module.
• Then click the + icon next to the Tables heading and name the table “VehicleLocation”.
• Create the following table.

• Then create the following actions in the Actions > SQL Actions tab.

GetVehicleLocationsAll: Used to display all vehicles on the map.

SELECT * FROM VehicleLocation;

GetVehicleById: Retrieves the vehicle details when the selected pin is clicked.

SELECT * FROM VehicleLocation WHERE Id = @vehicleId;

UpdateVehicleStatus: Updates the vehicle status when the rental starts.

‍UPDATE VehicleLocationSET IsAvailable = 0WHERE Id = @vehicleId;

Using Properties in a Scenario Context

Datasource:

• Connects to the GetVehicleLocationsAll SQL action.
• This dynamically displays vehicle locations on the map.

Latitude:

• Assigned based on the user's location.
  
  • Example: CurrentUser.location.latitude

Longitude:

• Assigned based on the user's location.
  
  • Example: CurrentUser.location.longitude

Circle Radius In Km:

• Highlights vehicles within a specified radius in kilometers around the user (example: 5 km).

Map Type:

• Selecting Hybrid provides a rich view with both road and building details.

Selected Location Icon:

• Marks the location of the selected vehicle with a special pin icon.

Events

• On Location Click: When the user taps on a pin, the GetVehicleById action is triggered. Vehicle information is displayed on the detail card (e.g., in the bottom panel).
• On Map Load: When the map is opened, the GetVehicleLocationsAll action is triggered and all vehicles are loaded.
• On Zoom Change: When the user zooms in or out, the map is re-centered and the view is updated.

UI Design Module Operations

1. Go to the UI Design module.
2. Select the Elements > Special > Maps element from the left panel.
3. Drag and drop it onto the screen.
4. Configure the following settings in the Properties panel:

• Datasource: GetVehicleLocationsAll
• Latitude: CurrentUser.location.latitude
• Longitude: CurrentUser.location.longitude
• Circle Radius In Km: 5
• Map Type: Hybrid
• Current Location Icon: Active
• Group Picker Icon: Active
• Selected Location Icon: Custom vehicle pin icon
• Keep Center On Zoom: Active

Scenario Flow

1. The user opens the application, the map loads.
2. The map centers on the user's current location.
3. All vehicle locations are loaded onto the map with the GetVehicleLocationsAll action.
4. The user clicks on one of the red pin markers.
5. The On Location Click event is triggered → The GetVehicleById action runs.
6. The selected vehicle card is displayed on the screen:
   
   • Peugeot 208
     
     • Automatic
     • Gasoline
     • 2.1 km away
     • 120 ₺/hour
     • [Start Rent] button
7. When the user clicks the “Start Rent” button, the UpdateVehicleStatus action runs and the vehicle is marked as rented.

Limitations

• The Maps element only works with a single data source.
• A periodic Refresh Action must be defined for real-time location tracking.
• The map loads even if the Latitude and Longitude values are empty (Null), but the center coordinates are not displayed.

Tips and Best Practices

• The ORDER BY Distance ASC query can be used to find the nearest vehicle based on the user's location.
• The interface can be simplified by defining a “nearby vehicles” area with Circle Radius.
• The map type can be changed according to user preferences (Satellite, Hybrid, Terrain).
• The vehicle details page can be accessed with the On Location Click event.
• Auto Center should be enabled for the map to automatically center when the user's location changes.

When the Scenario is Complete

• The user sees the nearest vehicles on the map.
• They can access detailed information by tapping on the vehicle pin.
• They can start the vehicle rental process.
• The map is dynamically updated from the data source, ensuring a seamless user experience.