Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Niurka77/tf-app/llms.txt

Use this file to discover all available pages before exploring further.

Field real estate agents frequently need to record the precise location of a property — whether for a new listing, a site visit, or a buyer tour. TF-App runs inside Capacitor’s Android WebView, which bridges the standard Web Geolocation JavaScript API to the device’s native GPS hardware. This means location features can be built using navigator.geolocation in plain JavaScript and run with full native accuracy on Android without requiring a separate native codebase. The @capacitor/geolocation plugin is not installed in this project by default but can be added for an extended API surface — see Using the @capacitor/geolocation Plugin below.

​
How Geolocation Works in Capacitor

Capacitor wraps the Android application in a native shell that hosts a WebView. When JavaScript inside that WebView calls navigator.geolocation, Capacitor delegates the call to the Android platform layer, which accesses the device GPS using the ACCESS_FINE_LOCATION permission. The result (latitude, longitude, accuracy, and timestamp) is returned to JavaScript as a standard GeolocationPosition object, identical to what a browser would return on a desktop. This bridge means:
  • No platform-specific code is needed for the core location logic
  • The same JS functions run in both the Vite dev server (browser geolocation) and the Android APK (native GPS)
  • Permission prompts are shown natively by Android, following the OS’s standard location consent flow

​
Requesting the User’s Position

The Web Geolocation API works directly inside Capacitor’s WebView. Use navigator.geolocation.getCurrentPosition to request a one-time GPS fix: 
navigator.geolocation.getCurrentPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    console.log(`Property at: ${latitude}, ${longitude}`);
    // Pass coordinates to your map renderer or send to the backend
  },
  (error) => {
    showMessage('Location Error', 'Unable to retrieve location. Check permissions.');
  }
);
The success callback receives a GeolocationPosition object. position.coords also exposes accuracy (metres), altitude, and speed if the device provides them. The error callback receives a GeolocationPositionError whose code property distinguishes between permission denied (1), position unavailable (2), and timeout (3).
On Android, the OS displays a permission prompt the first time your code requests location access. If the user denies the permission, getCurrentPosition will call the error callback with code 1 (PERMISSION_DENIED). Always handle this case gracefully — use showMessage to explain why location access is needed and guide the user to the app’s permission settings if required.

​
Android Permission

The current AndroidManifest.xml in android/app/src/main/ already declares the INTERNET permission. To enable GPS access, add the location permissions directly below it: 
<!-- Permissions -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
ACCESS_FINE_LOCATION enables high-accuracy GPS positioning, which is appropriate for tagging property coordinates. ACCESS_COARSE_LOCATION is required as a fallback and is needed by ACCESS_FINE_LOCATION on Android 12 and above. After editing the manifest, rebuild and sync: 
npm run build
npx cap sync

​
Using the @capacitor/geolocation Plugin

@capacitor/geolocation is not installed in this project. The sections above use navigator.geolocation, which works out of the box inside Capacitor’s WebView without any additional package. Install the plugin only if you need its extended options such as watchPosition, precise permission management, or additional position metadata beyond what the Web API provides.
For a richer API — including heading, speed, altitude, and better permission management — optionally install the official Capacitor Geolocation plugin: 
npm install @capacitor/geolocation
npx cap sync
Then import and call it in your view scripts: 
import { Geolocation } from '@capacitor/geolocation';

const position = await Geolocation.getCurrentPosition();
console.log(position.coords.latitude, position.coords.longitude);
The plugin API mirrors the Web Geolocation API but adds Capacitor-specific options such as enableHighAccuracy, timeout, and maximumAge: 
const position = await Geolocation.getCurrentPosition({
  enableHighAccuracy: true,
  timeout: 10000
});

const { latitude, longitude, accuracy } = position.coords;
showMessage('Ubicación Registrada', `Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`);
If you install @capacitor/geolocation, use Geolocation.watchPosition instead of getCurrentPosition for property tours where an agent walks through a site. It fires the callback continuously as the device moves, letting you draw a live route or update a map marker in real time. Call Geolocation.clearWatch({ id: watchId }) when the tour ends to stop GPS polling and conserve battery. With the plain navigator.geolocation API, the equivalent is navigator.geolocation.watchPosition and navigator.geolocation.clearWatch.

​
Displaying on a Map

Once you have a coordinate pair, render it inside any map library embedded in a dashboard or property-detail view. Two common options that work well in a Capacitor WebView: Leaflet.js (open-source, no API key required): 
import L from 'leaflet';

const map = L.map('map-container').setView([latitude, longitude], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.marker([latitude, longitude])
  .addTo(map)
  .bindPopup('Ubicación de la propiedad')
  .openPopup();
Google Maps JavaScript API (requires an API key): 
const map = new google.maps.Map(document.getElementById('map-container'), {
  center: { lat: latitude, lng: longitude },
  zoom: 15
});
new google.maps.Marker({
  position: { lat: latitude, lng: longitude },
  map,
  title: 'Propiedad'
});
In both cases, add a <div id="map-container" style="height: 300px;"></div> to the relevant view in src/views/ and load the library via a <script> tag or npm import. Run npm run build && npx cap sync to push the updated view into the Android project.

Build docs developers (and LLMs) love

Get started for freeTalk to us