Back to Tauri

Geolocation

src/content/docs/plugin/geolocation.mdx

latest4.9 KB
Original Source

import PluginLinks from '@components/PluginLinks.astro'; import Compatibility from '@components/plugins/Compatibility.astro';

import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; import CommandTabs from '@components/CommandTabs.astro'; import PluginPermissions from '@components/PluginPermissions.astro';

<PluginLinks plugin={frontmatter.plugin} />

Get and track the device's current position, including information about altitude, heading, and speed (if available).

Supported Platforms

<Compatibility plugin={frontmatter.plugin} />

Setup

Install the geolocation plugin to get started.

<Tabs> <TabItem label="Automatic">
Use your project's package manager to add the dependency:

{' '}

<CommandTabs
  npm="npm run tauri add geolocation"
  yarn="yarn run tauri add geolocation"
  pnpm="pnpm tauri add geolocation"
  deno="deno task tauri add geolocation"
  bun="bun tauri add geolocation"
  cargo="cargo tauri add geolocation"
/>
</TabItem> <TabItem label="Manual"> <Steps>
  1.  Run the following command in the `src-tauri` folder to add the plugin to the project's dependencies in `Cargo.toml`:

      ```sh frame=none
      cargo add tauri-plugin-geolocation --target 'cfg(any(target_os = "android", target_os = "ios"))'
      ```

  2.  Modify `lib.rs` to initialize the plugin:

      ```rust title="src-tauri/src/lib.rs" ins={5-6}
      #[cfg_attr(mobile, tauri::mobile_entry_point)]
      pub fn run() {
          tauri::Builder::default()
              .setup(|app| {
                  #[cfg(mobile)]
                  app.handle().plugin(tauri_plugin_geolocation::init());
                  Ok(())
              })
              .run(tauri::generate_context!())
              .expect("error while running tauri application");
      }
      ```

  3.  Install the JavaScript Guest bindings using your preferred JavaScript package manager:

      <CommandTabs
          npm="npm install @tauri-apps/plugin-geolocation"
          yarn="yarn add @tauri-apps/plugin-geolocation"
          pnpm="pnpm add @tauri-apps/plugin-geolocation"
          deno="deno add npm:@tauri-apps/plugin-geolocation"
          bun="bun add @tauri-apps/plugin-geolocation"
      />

</Steps>
</TabItem> </Tabs>

Configuration

iOS

Apple requires privacy descriptions to be specified in Info.plist for location information, where you should describe why your app needs to access it. Illustrated below is an example description:

xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>NSLocationWhenInUseUsageDescription</key>
        <string>Required to do XY</string>
    </dict>
</plist>

Android

This plugin automatically adds the following permissions to your AndroidManifest.xml file:

xml
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

If your app requires GPS functionality to function, you should add the following to your AndroidManifest.xml file:

xml
<uses-feature android:name="android.hardware.location.gps" android:required="true" />

The Google Play Store uses this property to decide whether it should show the app to devices without GPS capabilities.

Usage

The geolocation plugin is available in JavaScript.

javascript
import {
  checkPermissions,
  requestPermissions,
  getCurrentPosition,
  watchPosition,
} from '@tauri-apps/plugin-geolocation';

let permissions = await checkPermissions();
if (
  permissions.location === 'prompt' ||
  permissions.location === 'prompt-with-rationale'
) {
  permissions = await requestPermissions(['location']);
}

if (permissions.location === 'granted') {
  const pos = await getCurrentPosition();

  await watchPosition(
    { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 },
    (pos) => {
      console.log(pos);
    }
  );
}

Permissions

By default all potentially dangerous plugin commands and scopes are blocked and cannot be accessed. You must modify the permissions in your capabilities configuration to enable these.

See the Capabilities Overview for more information and the step by step guide to use plugin permissions.

json
{
  "$schema": "../gen/schemas/mobile-schema.json",
  "identifier": "mobile-capability",
  "windows": ["main"],
  "platforms": ["iOS", "android"],
  "permissions": [
    "core:default",
    "geolocation:allow-check-permissions",
    "geolocation:allow-request-permissions",
    "geolocation:allow-get-current-position",
    "geolocation:allow-watch-position"
  ]
}
<PluginPermissions plugin={frontmatter.plugin} />