Commit 77f6bd73 authored by Omar Luna Hernández's avatar Omar Luna Hernández
Browse files

Se mejora el geolocalizador de mapbox

parent faffa104

web/src/components/geocoding/geocoding_mapbox.tsx

+24 −27
Original line number Diff line number Diff line 
import { useMapsLibrary } from "@vis.gl/react-google-maps";

import { useState, useEffect, Dispatch, SetStateAction } from "react";

import { Dispatch, SetStateAction } from "react";

import {

  UseFormGetValues,

  UseFormRegister,
@@ -8,6 +7,7 @@ import { 
import { Place } from "../../infraestructure/entities/place";

import { Position } from "../map/map_google";

import "./assets/css/styles.css";

import axios from "axios";



interface props {

  getValues: UseFormGetValues<Place>;
@@ -17,44 +17,41 @@ interface props { 
  setLoading: Dispatch<SetStateAction<boolean>>;

}



export const GeocodingGoogle = ({

export const GeocodingMapbox = ({

  getValues,

  register,

  errors,

  setPosition,

  setLoading,

}: props) => {

  const geocodingApiLoaded = useMapsLibrary("geocoding");

  const [geocodingService, setGeocodingService] =

    useState<google.maps.Geocoder>();

  const [geocodingResult, setGeocodingResult] =

    useState<google.maps.GeocoderResult>();

  const getResultsAPI = async (address: string) => {

    try {

      const { data } = await axios.get(

        "https://api.mapbox.com/search/geocode/v6/forward",

        {

          params: {

            q: address,

            access_token: process.env.REACT_APP_MAP_BOX || "",

          },

        }

      );

      setPosition({

        latitude: data.features[0].geometry.coordinates[1],

        longitude: data.features[0].geometry.coordinates[0],

      });

    } catch (error) {

      console.log("Hubo un error al obtener la direccion", error);

    }

  };



  const getPositionByAddress = () => {

    const address = getValues("address");

    if (!geocodingService || !address) return;

    if (!address) return;

    setLoading(true);

    geocodingService?.geocode({ address }, (results, status) => {

      if (results && status === "OK") {

        setGeocodingResult(results[0]);

      }

    });

    getResultsAPI(address);

    setLoading(false);

  };



  useEffect(() => {

    if (!geocodingApiLoaded) return;

    setGeocodingService(new window.google.maps.Geocoder());

  }, [geocodingApiLoaded]);



  useEffect(() => {

    if (!geocodingResult) return;

    setPosition({

      latitude: geocodingResult.geometry.location.lat(),

      longitude: geocodingResult.geometry.location.lng(),

    });

  }, [geocodingResult]);



  return (

    <div className="address_input_cnt">

      <label>Dirección</label>