diff --git a/src/customFields/GeoPicker/GeoPicker.tsx b/src/customFields/GeoPicker/GeoPicker.tsx new file mode 100644 index 0000000..41baa0e --- /dev/null +++ b/src/customFields/GeoPicker/GeoPicker.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { useField } from 'payload/components/forms'; + +export const GeoPicker: React.FC<{ path: string }> = ({ path }) => { + const { value, setValue } = useField({ path }); + const [latitude, setLatitude] = React.useState(null); + const [longitude, setLongitude] = React.useState(null); + + const handleKeyPress = async (e) => { + if (e.key === 'Enter') { + try { + const response = await fetch( + `https://nominatim.openstreetmap.org/search?format=json&q=${value}` + ); + const data = await response.json(); + if (data && data.length > 0) { + setLatitude(parseFloat(data[0].lat)); + setLongitude(parseFloat(data[0].lon)); + } + } catch (error) { + console.error('Error fetching geolocation:', error); + } + } + }; + + return ( +
+
+ + setValue(e.target.value)} + onKeyDown={handleKeyPress} + placeholder="Enter city to get coordinates" + /> +
+
+
    +
  • + + +
  • +
  • + + +
  • +
+
+
+ ); +}; diff --git a/src/customFields/GeoPicker/field.ts b/src/customFields/GeoPicker/field.ts new file mode 100644 index 0000000..eb913bf --- /dev/null +++ b/src/customFields/GeoPicker/field.ts @@ -0,0 +1,12 @@ +import { Field } from 'payload/types'; +import { GeoPicker} from './GeoPicker'; + +export const GeoPickerField: Field = { + name: 'GeoPicker', + type: 'point', + admin: { + components: { + Field: GeoPicker, + }, + } +} \ No newline at end of file