@sanity/google-maps-input 4.1.1 → 4.2.1

package/src/index.ts

@@ -1,8 +1,20 @@
 export {GeopointInput, type GeopointInputProps} from './input/GeopointInput'
+export {GeopointRadiusInput, type GeopointRadiusInputProps} from './input/GeopointRadiusInput'
 
 export {GeopointArrayDiff, type DiffProps as GeopointArrayDiffProps} from './diff/GeopointArrayDiff'
 export {GeopointFieldDiff, type DiffProps as GeopointFieldDiffProps} from './diff/GeopointFieldDiff'
+export {
+  GeopointRadiusFieldDiff,
+  type DiffProps as GeopointRadiusFieldDiffProps,
+} from './diff/GeopointRadiusFieldDiff'
 
-export type {LatLng, GeopointSchemaType, Geopoint, GoogleMapsInputConfig} from './types'
+export type {
+  LatLng,
+  GeopointSchemaType,
+  Geopoint,
+  GeopointRadius,
+  GeopointRadiusSchemaType,
+  GoogleMapsInputConfig,
+} from './types'
 
 export {googleMapsInput} from './plugin'

package/src/input/GeopointRadiusInput.tsx

@@ -0,0 +1,258 @@
+import React, {useCallback, useEffect, useId, useRef, useState} from 'react'
+import {Box, Button, Dialog, Grid, Stack, TextInput, Label} from '@sanity/ui'
+import {EditIcon, TrashIcon} from '@sanity/icons'
+import {ObjectInputProps, set, setIfMissing, unset, ChangeIndicator, Path} from 'sanity'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import type {
+  GeopointRadius,
+  GeopointRadiusSchemaType,
+  GoogleMapsInputConfig,
+  LatLng,
+} from '../types'
+import {getGeoConfig} from '../global-workaround'
+import {DialogInnerContainer, PreviewImage} from './GeopointInput.styles'
+import {GeopointRadiusSelect} from './GeopointRadiusSelect'
+
+const EMPTY_PATH: Path = []
+
+// Helper function to generate circle points
+const generateCirclePoints = (
+  lat: number,
+  lng: number,
+  radius: number,
+): Array<{lat: number; lng: number}> => {
+  const points = []
+  const steps = 32 // Number of points to create the circle
+
+  for (let i = 0; i <= steps; i++) {
+    const angle = (i / steps) * 2 * Math.PI
+    const latOffset = (radius / 111000) * Math.cos(angle) // Rough conversion to degrees
+    const lngOffset = (radius / (111000 * Math.cos((lat * Math.PI) / 180))) * Math.sin(angle)
+
+    points.push({
+      lat: lat + latOffset,
+      lng: lng + lngOffset,
+    })
+  }
+
+  return points
+}
+
+const getStaticImageUrl = (value: LatLng & {radius?: number}, apiKey: string) => {
+  const loc = `${value.lat},${value.lng}`
+
+  // Calculate appropriate zoom level based on radius
+  let zoom = 13
+  if (value.radius) {
+    // Use logarithmic formula for better zoom calculation
+    // Add padding to ensure circle is fully visible
+    const radius = value.radius + value.radius / 2
+    const scale = radius / 500
+    const calculatedZoom = 16 - Math.log(scale) / Math.log(2)
+    // Add small offset to ensure circle fits well in view
+    zoom = Math.max(8, Math.min(16, Math.round(calculatedZoom - 0.4)))
+  }
+
+  const qs = new URLSearchParams({
+    key: apiKey,
+    center: loc,
+    markers: loc,
+    zoom: zoom.toString(),
+    scale: '2',
+    size: '640x300',
+  })
+
+  // Add circle if radius is present
+  if (value.radius) {
+    // Create a circle path using multiple points
+    const points = generateCirclePoints(value.lat, value.lng, value.radius)
+    const path = points.map((p) => `${p.lat},${p.lng}`).join('|')
+    qs.append('path', `fillcolor:0x4285F480|color:0x4285F4|weight:2|${path}`)
+  }
+
+  return `https://maps.googleapis.com/maps/api/staticmap?${qs.toString()}`
+}
+
+export type GeopointRadiusInputProps = ObjectInputProps<
+  GeopointRadius,
+  GeopointRadiusSchemaType
+> & {
+  geoConfig: GoogleMapsInputConfig
+}
+
+export function GeopointRadiusInput(props: GeopointRadiusInputProps) {
+  const {
+    changed,
+    elementProps,
+    focused,
+    geoConfig: config,
+    onChange,
+    onPathFocus,
+    path,
+    readOnly,
+    schemaType,
+    value,
+  } = props
+
+  const {
+    id,
+    ref: inputRef,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    'aria-describedby': ariaDescribedBy,
+  } = elementProps
+
+  const schemaTypeName = schemaType.name
+  const dialogId = useId()
+  const dialogRef = useRef<HTMLDivElement | null>(null)
+  const handleFocusButton = useCallback(() => inputRef?.current?.focus(), [inputRef])
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const handleCloseModal = useCallback(() => {
+    if (dialogRef.current) dialogRef.current.blur()
+    setModalOpen(false)
+    handleFocusButton()
+  }, [setModalOpen, handleFocusButton])
+
+  const handleToggleModal = useCallback(
+    () => setModalOpen((currentState) => !currentState),
+    [setModalOpen],
+  )
+
+  const handleChange = useCallback(
+    (latLng: google.maps.LatLng, radius?: number) => {
+      const currentRadius = radius ?? value?.radius ?? config.defaultRadius ?? 1000
+      onChange([
+        setIfMissing({_type: schemaTypeName}),
+        set(latLng.lat(), ['lat']),
+        set(latLng.lng(), ['lng']),
+        set(currentRadius, ['radius']),
+      ])
+    },
+    [schemaTypeName, onChange, value?.radius, config.defaultRadius],
+  )
+
+  const handleRadiusChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (value) {
+        onChange([set(Math.round(Number(event.currentTarget.value)), ['radius'])])
+      }
+    },
+    [onChange, value],
+  )
+
+  const handleClear = useCallback(() => {
+    onChange(unset())
+  }, [onChange])
+
+  useEffect(() => {
+    if (modalOpen) {
+      onPathFocus(EMPTY_PATH)
+    }
+  }, [modalOpen, onPathFocus])
+
+  if (!config || !config.apiKey) {
+    return (
+      <div>
+        <p>
+          The <a href="https://sanity.io/docs/schema-types/geopoint-type">Geopoint Radius type</a>{' '}
+          needs a Google Maps API key with access to:
+        </p>
+        <ul>
+          <li>Google Maps JavaScript API</li>
+          <li>Google Places API Web Service</li>
+          <li>Google Static Maps API</li>
+        </ul>
+        <p>
+          Please enter the API key with access to these services in your googleMapsInput plugin
+          config.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <Stack space={3}>
+      {value && (
+        <ChangeIndicator path={path} isChanged={changed} hasFocus={!!focused}>
+          <PreviewImage
+            src={getStaticImageUrl(value, config.apiKey)}
+            alt="Map location with radius"
+            onClick={handleFocusButton}
+            onDoubleClick={handleToggleModal}
+          />
+        </ChangeIndicator>
+      )}
+
+      {value && (
+        <Stack space={2}>
+          <Label>Radius (meters)</Label>
+          <TextInput
+            type="number"
+            value={Math.round(value.radius || config.defaultRadius || 1000)}
+            onChange={handleRadiusChange}
+            disabled={readOnly}
+            min={1}
+            max={50000}
+            step={1}
+          />
+        </Stack>
+      )}
+
+      <Box>
+        <Grid columns={value ? 2 : 1} gap={3}>
+          <Button
+            aria-describedby={ariaDescribedBy}
+            disabled={readOnly}
+            icon={value && EditIcon}
+            id={id}
+            mode="ghost"
+            onClick={handleToggleModal}
+            onFocus={handleFocus}
+            padding={3}
+            ref={inputRef}
+            text={value ? 'Edit' : 'Set location and radius'}
+          />
+
+          {value && (
+            <Button
+              disabled={readOnly}
+              icon={TrashIcon}
+              mode="ghost"
+              onClick={handleClear}
+              padding={3}
+              text="Remove"
+              tone="critical"
+            />
+          )}
+        </Grid>
+      </Box>
+
+      {modalOpen && (
+        <Dialog
+          header="Place the marker and set radius on the map"
+          id={`${dialogId}_dialog`}
+          onBlur={handleBlur}
+          onClose={handleCloseModal}
+          ref={dialogRef}
+          width={1}
+        >
+          <DialogInnerContainer>
+            <GoogleMapsLoadProxy config={getGeoConfig()}>
+              {(api) => (
+                <GeopointRadiusSelect
+                  api={api}
+                  value={value || undefined}
+                  onChange={readOnly ? undefined : handleChange}
+                  defaultLocation={config.defaultLocation}
+                  defaultRadiusZoom={config.defaultRadiusZoom}
+                  defaultRadius={config.defaultRadius}
+                />
+              )}
+            </GoogleMapsLoadProxy>
+          </DialogInnerContainer>
+        </Dialog>
+      )}
+    </Stack>
+  )
+}

package/src/input/GeopointRadiusSelect.tsx

@@ -0,0 +1,193 @@
+import React, {type FC, useCallback, useEffect, useRef} from 'react'
+import {SearchInput} from '../map/SearchInput'
+import {GoogleMap} from '../map/Map'
+import {Marker} from '../map/Marker'
+import type {LatLng, GeopointRadius} from '../types'
+
+const fallbackLatLng: LatLng = {lat: 40.7058254, lng: -74.1180863}
+
+// Component to sync marker drag with circle position
+const MarkerDragSync: FC<{
+  api: typeof window.google.maps
+  marker: google.maps.Marker
+  circleRef: React.MutableRefObject<google.maps.Circle | null>
+  isMarkerDragging: React.MutableRefObject<boolean>
+}> = ({api, marker, circleRef, isMarkerDragging}) => {
+  useEffect(() => {
+    const handleDrag = () => {
+      isMarkerDragging.current = true
+    }
+
+    const handleDragEnd = () => {
+      isMarkerDragging.current = false
+    }
+
+    const dragListener = api.event.addListener(marker, 'drag', handleDrag)
+    const dragEndListener = api.event.addListener(marker, 'dragend', handleDragEnd)
+
+    return () => {
+      api.event.removeListener(dragListener)
+      api.event.removeListener(dragEndListener)
+    }
+  }, [api, marker, circleRef, isMarkerDragging])
+
+  return null
+}
+
+interface SelectProps {
+  api: typeof window.google.maps
+  value?: GeopointRadius
+  onChange?: (latLng: google.maps.LatLng, radius?: number) => void
+  defaultLocation?: LatLng
+  defaultRadiusZoom?: number
+  defaultRadius?: number
+}
+
+export const GeopointRadiusSelect: FC<SelectProps> = ({
+  api,
+  value,
+  onChange,
+  defaultLocation = {lng: 10.74609, lat: 59.91273},
+  defaultRadiusZoom = 12,
+  defaultRadius = 1000,
+}) => {
+  const circleRef = useRef<google.maps.Circle | null>(null)
+  const markerRef = useRef<google.maps.Marker | undefined>(undefined)
+  const isMarkerDragging = useRef(false)
+
+  const getCenter = useCallback(() => {
+    const point: LatLng = {...fallbackLatLng, ...defaultLocation, ...value}
+    return point
+  }, [value, defaultLocation])
+
+  const setValue = useCallback(
+    (geoPoint: google.maps.LatLng, radius?: number) => {
+      if (onChange) {
+        const roundedRadius = radius ? Math.round(radius) : undefined
+        onChange(geoPoint, roundedRadius)
+      }
+    },
+    [onChange],
+  )
+
+  const handlePlaceChanged = useCallback(
+    (place: google.maps.places.PlaceResult) => {
+      if (!place.geometry?.location) {
+        return
+      }
+      setValue(place.geometry.location, value?.radius || defaultRadius)
+    },
+    [setValue, value?.radius, defaultRadius],
+  )
+
+  const handleMarkerDragEnd = useCallback(
+    (event: google.maps.MapMouseEvent) => {
+      if (event.latLng) {
+        // Update circle position when marker drag ends
+        if (circleRef.current) {
+          circleRef.current.setCenter(event.latLng)
+        }
+        setValue(event.latLng, value?.radius || defaultRadius)
+      }
+    },
+    [setValue, value?.radius, defaultRadius],
+  )
+
+  const handleMapClick = useCallback(
+    (event: google.maps.MapMouseEvent) => {
+      if (event.latLng) {
+        setValue(event.latLng, value?.radius || defaultRadius)
+      }
+    },
+    [setValue, value?.radius, defaultRadius],
+  )
+
+  // Create or update circle when value changes
+  useEffect(() => {
+    if (value && circleRef.current) {
+      circleRef.current.setCenter({lat: value.lat, lng: value.lng})
+      circleRef.current.setRadius(value.radius)
+    }
+  }, [value])
+
+  return (
+    <GoogleMap
+      api={api}
+      location={getCenter()}
+      onClick={handleMapClick}
+      defaultZoom={defaultRadiusZoom}
+    >
+      {(map) => {
+        // Create circle if it doesn't exist and we have a value
+        if (value && !circleRef.current) {
+          circleRef.current = new api.Circle({
+            map,
+            center: {lat: value.lat, lng: value.lng},
+            radius: value.radius,
+            fillColor: '#4285F4',
+            fillOpacity: 0.2,
+            strokeColor: '#4285F4',
+            strokeOpacity: 0.8,
+            strokeWeight: 2,
+            editable: true,
+          })
+
+          // Add event listeners for circle interactions
+          circleRef.current.addListener('center_changed', () => {
+            if (circleRef.current && markerRef.current && !isMarkerDragging.current) {
+              // When circle center is dragged, move the marker to match
+              const circleCenter = circleRef.current.getCenter()
+              if (circleCenter) {
+                markerRef.current.setPosition(circleCenter)
+              }
+            }
+          })
+
+          circleRef.current.addListener('radius_changed', () => {
+            if (circleRef.current) {
+              const center = circleRef.current.getCenter()
+              const radius = circleRef.current.getRadius()
+              if (center) {
+                setValue(center, Math.round(radius))
+              }
+            }
+          })
+
+          circleRef.current.addListener('dragend', () => {
+            if (circleRef.current) {
+              const center = circleRef.current.getCenter()
+              const radius = circleRef.current.getRadius()
+              if (center) {
+                setValue(center, Math.round(radius))
+              }
+            }
+          })
+        }
+
+        return (
+          <>
+            <SearchInput api={api} map={map} onChange={handlePlaceChanged} />
+            {value && (
+              <Marker
+                api={api}
+                map={map}
+                position={value}
+                onMove={onChange ? handleMarkerDragEnd : undefined}
+                markerRef={markerRef}
+              />
+            )}
+            {/* Add drag event listener to marker for circle sync */}
+            {value && markerRef.current && (
+              <MarkerDragSync
+                api={api}
+                marker={markerRef.current}
+                circleRef={circleRef}
+                isMarkerDragging={isMarkerDragging}
+              />
+            )}
+          </>
+        )
+      }}
+    </GoogleMap>
+  )
+}

package/src/plugin.tsx

@@ -1,12 +1,60 @@
 import {definePlugin, type SchemaType} from 'sanity'
 import {GeopointInput, type GeopointInputProps} from './input/GeopointInput'
+import {GeopointRadiusInput, type GeopointRadiusInputProps} from './input/GeopointRadiusInput'
 import {setGeoConfig} from './global-workaround'
-import type {GeopointSchemaType, GoogleMapsInputConfig} from './types'
+import type {GeopointSchemaType, GeopointRadiusSchemaType, GoogleMapsInputConfig} from './types'
 
 export const googleMapsInput = definePlugin<GoogleMapsInputConfig>((config) => {
   setGeoConfig(config)
   return {
     name: 'google-maps-input',
+    schema: {
+      types: [
+        {
+          name: 'geopointRadius',
+          title: 'Geopoint with Radius',
+          type: 'object',
+          fields: [
+            {
+              name: 'lat',
+              title: 'Latitude',
+              type: 'number',
+              validation: (Rule: any) => Rule.required().min(-90).max(90),
+            },
+            {
+              name: 'lng',
+              title: 'Longitude',
+              type: 'number',
+              validation: (Rule: any) => Rule.required().min(-180).max(180),
+            },
+            {
+              name: 'alt',
+              title: 'Altitude',
+              type: 'number',
+            },
+            {
+              name: 'radius',
+              title: 'Radius (meters)',
+              type: 'number',
+              validation: (Rule: any) => Rule.required().min(1).max(50000),
+            },
+          ],
+          preview: {
+            select: {
+              lat: 'lat',
+              lng: 'lng',
+              radius: 'radius',
+            },
+            prepare({lat, lng, radius}: {lat: number; lng: number; radius: number}) {
+              return {
+                title: `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+                subtitle: radius ? `Radius: ${radius}m` : 'No radius set',
+              }
+            },
+          },
+        },
+      ],
+    },
     form: {
       components: {
         input(props) {
@@ -14,6 +62,10 @@ export const googleMapsInput = definePlugin<GoogleMapsInputConfig>((config) => {
             const castedProps = props as unknown as Omit<GeopointInputProps, 'geoConfig'>
             return <GeopointInput {...castedProps} geoConfig={config} />
           }
+          if (isGeopointRadius(props.schemaType)) {
+            const castedProps = props as unknown as Omit<GeopointRadiusInputProps, 'geoConfig'>
+            return <GeopointRadiusInput {...castedProps} geoConfig={config} />
+          }
           return props.renderDefault(props)
         },
       },
@@ -25,6 +77,10 @@ function isGeopoint(schemaType: SchemaType): schemaType is GeopointSchemaType {
   return isType('geopoint', schemaType)
 }
 
+function isGeopointRadius(schemaType: SchemaType): schemaType is GeopointRadiusSchemaType {
+  return isType('geopointRadius', schemaType)
+}
+
 function isType(name: string, schema?: SchemaType): boolean {
   if (schema?.name === name) {
     return true

package/src/types.ts

@@ -14,10 +14,25 @@ export interface Geopoint {
   alt?: number
 }
 
+export interface GeopointRadius {
+  _type: 'geopointRadius'
+  _key?: string
+  lat: number
+  lng: number
+  alt?: number
+  radius: number
+}
+
 export interface GeopointSchemaType extends ObjectSchemaType {
   diffComponent?: DiffComponent<ObjectDiff<Geopoint>> | DiffComponentOptions<ObjectDiff<Geopoint>>
 }
 
+export interface GeopointRadiusSchemaType extends ObjectSchemaType {
+  diffComponent?:
+    | DiffComponent<ObjectDiff<GeopointRadius>>
+    | DiffComponentOptions<ObjectDiff<GeopointRadius>>
+}
+
 export interface GoogleMapsInputConfig {
   apiKey: string
   defaultZoom?: number
@@ -26,4 +41,6 @@ export interface GoogleMapsInputConfig {
     lat: number
     lng: number
   }
+  defaultRadiusZoom?: number
+  defaultRadius?: number
 }