@awesome-cordova-library/geolocation

@awesome-cordova-library/geolocation

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

Cordova documentation

MDN

Installation

npm i @awesome-cordova-library/geolocation
# Optionnal if you don't use cordova
cordova plugin add cordova-plugin-geolocation

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>
  );
}