lumbung-kios-cms/src/customFields/geoPicker/GeoPicker.tsx

import * as React from 'react';
import { useField } from 'payload/components/forms';

export const GeoPicker: React.FC<{ path: string }> = ({ path }) => {
  const { value, setValue } = useField<string>({ path });
  const [longitude, setLongitude] = React.useState(value[0] || 0);
  const [latitude, setLatitude] = React.useState(value[1] || 0);
  const [error, setError] = React.useState("")

  const handleCityEnter = async (e) => {
    if (e.key === 'Enter') {
      try {
        const response = await fetch(
          `https://nominatim.openstreetmap.org/search?format=json&q=${e.target.value}`
        );
        const data = await response.json();
        if (data && data.length > 0) {
          const { lat, lon } = data[0];
          setLatitude(lat);
          setLongitude(lon);
          setValue([lon, lat]);
        }
      } catch (err) {
        setError(e)
        console.error('Error fetching geolocation:', e);
      }
    }
  };

  const handleLatitudeChange = (e) => {
    setLatitude(e.target.value);
  };

  const handleLongitudeChange = (e) => {
    setLongitude(e.target.value);
  };

  return (
    <div>
      <div className='field-type text'>
        <label className='field-label'>
          City
        </label>
        <input
          type="text"
          className='field-name'
          onKeyDown={handleCityEnter}
          placeholder="Enter city to get coordinates"
        />
      </div>
      {error != "" && 
        <p>{error}</p>
      }
      <div className="field-type point">
        <ul className='point__wrap'>
          <li>
            <label className='field-label'>Location - Longitude</label>
            <input id="field-longitude-location" type="number" name="location.longitude" value={longitude} onChange={handleLongitudeChange}></input>
          </li>
          <li>
            <label className='field-label'>Location - Latitude</label>
            <input id="field-latitude-latitude" type="number" name="location.latitude" value={latitude} onChange={handleLatitudeChange}></input>
          </li>
        </ul>
      </div>
    </div>
  );
};