README.md

id	title	tags
plugin-geolocation	Geolocation	cordova capacitor ionic javascript typescript plugin mobile geolocation

Geolocation

This plugin provides information about the device's location, such as latitude and longitude.

Online documentation

Cordova documentation

MDN

Installation

Typescript/JS

npm install @awesome-cordova-library/geolocation

Cordova

cordova plugin add cordova-plugin-geolocation
npm install @awesome-cordova-library/geolocation

Capacitor / Ionic

npm install cordova-plugin-geolocation
npm install @awesome-cordova-library/geolocation
npx cap sync

Vanilla

Declaration

class Geolocation {
  static getCurrentPosition(
    successCallback: PositionCallback,
    errorCallback?: PositionErrorCallback | null,
    options?: PositionOptions
  ): void;
  static watchPosition(
    successCallback: PositionCallback,
    errorCallback?: PositionErrorCallback | null,
    options?: PositionOptions
  ): number;
  static clearWatch(watchId: number): void;
}

Usages

import Geolocation from "@awesome-cordova-library/geolocation";

Geolocation.getCurrentPosition(
  () => {},
  () => {},
  {}
);
const watchid = Geolocation.watchPosition(
  () => {},
  () => {},
  {}
);
Geolocation.clearWatch(watchid);

React

Declaration

const useGeolocation: () => {
  getCurrentPosition: (
    options?: PositionOptions
  ) => Promise<GeolocationPosition>;
  watchPosition: (
    successCallback: PositionCallback,
    errorCallback?: PositionErrorCallback | null,
    options?: PositionOptions
  ) => number;
  clearWatch: (watchId: number) => void;
};

Usages

import { useState } from "react";
import useGeolocation from "@awesome-cordova-library/geolocation/lib/react";

function App() {
  const [loading, setLoading] = useState<boolean>(false);
  const [position, setPosition] = useState<GeolocationPosition | undefined>();
  const { getCurrentPosition } = useGeolocation();

  return (
    <div>
      {position && (
        <div>
          <p>
            Latitude: {position.coords.latitude} <br /> Longitude:{" "}
            {position.coords.longitude}
          </p>
        </div>
      )}
      <div>
        <button
          onClick={() => {
            setLoading(true);
            getCurrentPosition()
              .then((p) => {
                setPosition(p);
              })
              .finally(() => {
                setLoading(false);
              });
          }}
        >
          Get current position
        </button>
      </div>
    </div>
  );
}