Source: maps/MapGeolocationOqt.js

import { createContext, useEffect } from "react";
import useGeolocation from "react-hook-geolocation";
import { useMap } from 'react-leaflet'

/**
 * Componente que desplaza el centro del mapa a la ubicación actual del dispositivo 
 * (solicita permisos para obtener la ubicación)
 * @name Reactor.Components.Maps.MapGeolocationOqt
 * @param {("true"|"false")} [debug = "false"] Determina si se hará una salida de consola con datos de depuración
 * @class 
 * @example 
<map lat="38.2111" lng="54.0121" zoom="13">
  <map_geolocation>
    <map_marker_geo name="seguimiento" lat="38.2111" lng="54.0121" text="aca estas vos" readonly="true" use_change="true"></map_marker_geo>
  </map_geolocation>
  <map_marker name="marca_estatica" lat="38.2111" lng="54.0121" text="una marca" readonly="true" use_change="false"></map_marker>
</map>
*/

export const MapGeolocationOqt = ({debug = "false", children}) => {
  
  const map = useMap();
  const {latitude, longitude, error, speed} = useGeolocation(geoOptions);

  useEffect(()=>{
    const coors = [
      (!error && latitude) ? latitude : 0, 
      (!error && longitude) ? longitude : 0
    ];
    debug === "true" && console.log({coors, latitude, longitude, error});
    map.setView(coors);
  }, [latitude, longitude, error] )
  
  return (
    <MapGeolocationOqtContext.Provider value={{latitude, longitude, error, speed}}>
      {children}
    </MapGeolocationOqtContext.Provider>
  );
}

const geoOptions = {
  enableHighAccuracy: true
}


export const MapGeolocationOqtContext = createContext({latitude: 0, longitude: 0, speed: 0, error: null})