@sanity/google-maps-input 2.35.1 → 2.36.0-v2-studio.1

package/lib/map/Marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.js","names":["markerPath","Marker","React","PureComponent","componentDidMount","props","position","api","map","onMove","zIndex","opacity","label","markerRef","color","GMarker","icon","path","fillOpacity","fillColor","background","strokeColor","border","strokeWeight","anchor","Point","labelOrigin","marker","draggable","Boolean","current","attachMoveHandler","attachClickHandler","componentDidUpdate","prevProps","latLngAreEqual","setPosition","setLabel","setZIndex","setOpacity","setMap","componentWillUnmount","eventHandlers","move","remove","event","addListener","onClick","click","render"],"sources":["../../src/map/Marker.tsx"],"sourcesContent":["import * as React from 'react'\nimport {LatLng} from '../types'\nimport {latLngAreEqual} from './util'\n\nconst markerPath =\n  'M 3.052 3.7 C 1.56 5.293 0.626 7.612 0.663 9.793 C 0.738 14.352 2.793 16.077 6.078 22.351 C 7.263 25.111 8.497 28.032 9.672 32.871 C 9.835 33.584 9.994 34.246 10.069 34.305 C 10.143 34.362 10.301 33.697 10.465 32.983 C 11.639 28.145 12.875 25.226 14.059 22.466 C 17.344 16.192 19.398 14.466 19.474 9.908 C 19.511 7.727 18.574 5.405 17.083 3.814 C 15.379 1.994 12.809 0.649 10.069 0.593 C 7.328 0.536 4.756 1.882 3.052 3.7 Z'\n\ninterface Props {\n  api: typeof window.google.maps\n  map: google.maps.Map\n  onMove?: (event: google.maps.MapMouseEvent) => void\n  onClick?: (event: google.maps.MapMouseEvent) => void\n  onMouseOver?: (event: google.maps.MapMouseEvent) => void\n  onMouseOut?: (event: google.maps.MapMouseEvent) => void\n  position: LatLng | google.maps.LatLng\n  zIndex?: number\n  opacity?: number\n  label?: string\n  markerRef?: React.MutableRefObject<google.maps.Marker | undefined>\n  color?: {background: string; border: string; text: string}\n}\n\nexport class Marker extends React.PureComponent<Props> {\n  marker: google.maps.Marker | undefined\n\n  eventHandlers: {\n    move?: google.maps.MapsEventListener\n    click?: google.maps.MapsEventListener\n  } = {}\n\n  componentDidMount() {\n    const {position, api, map, onMove, zIndex, opacity, label, markerRef, color} = this.props\n    const {Marker: GMarker} = api\n\n    let icon: google.maps.ReadonlySymbol | undefined\n    if (color) {\n      icon = {\n        path: markerPath,\n        fillOpacity: 1,\n        fillColor: color.background,\n        strokeColor: color.border,\n        strokeWeight: 2,\n        anchor: new api.Point(10, 35),\n        labelOrigin: new api.Point(10, 11),\n      }\n    }\n\n    this.marker = new GMarker({\n      draggable: Boolean(onMove),\n      position,\n      map,\n      zIndex,\n      opacity,\n      label,\n      icon,\n    })\n\n    if (markerRef) {\n      markerRef.current = this.marker\n    }\n\n    this.attachMoveHandler()\n    this.attachClickHandler()\n  }\n\n  componentDidUpdate(prevProps: Props) {\n    if (!this.marker) {\n      return\n    }\n\n    const {position, onMove, label, zIndex, opacity, map} = this.props\n\n    if (prevProps.onMove !== onMove) {\n      this.attachMoveHandler()\n    }\n\n    if (!latLngAreEqual(prevProps.position, position)) {\n      this.marker.setPosition(position)\n    }\n\n    if (prevProps.label !== label) {\n      this.marker.setLabel(label || null)\n    }\n\n    if (prevProps.zIndex !== zIndex) {\n      this.marker.setZIndex(zIndex || null)\n    }\n\n    if (prevProps.opacity !== opacity) {\n      this.marker.setOpacity(opacity || null)\n    }\n\n    if (prevProps.map !== map) {\n      this.marker.setMap(map)\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.eventHandlers.move) {\n      this.eventHandlers.move.remove()\n    }\n\n    if (this.marker) {\n      this.marker.setMap(null)\n    }\n  }\n\n  attachMoveHandler() {\n    const {api, onMove} = this.props\n    if (this.eventHandlers.move) {\n      this.eventHandlers.move.remove()\n    }\n    if (this.marker && onMove) {\n      this.eventHandlers.move = api.event.addListener(this.marker, 'dragend', onMove)\n    }\n  }\n\n  attachClickHandler() {\n    const {api, onClick} = this.props\n    if (this.eventHandlers.click) {\n      this.eventHandlers.click.remove()\n    }\n    if (this.marker && onClick) {\n      this.eventHandlers.click = api.event.addListener(this.marker, 'click', onClick)\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  render() {\n    return null\n  }\n}\n"],"mappings":"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"}

package/lib/map/SearchInput.js

@@ -56,4 +56,5 @@ class SearchInput extends React.PureComponent {
     }));
   }
 }
-exports.SearchInput = SearchInput;
+exports.SearchInput = SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/lib/map/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":["SearchInput","React","PureComponent","createRef","autoComplete","props","onChange","getPlace","searchInputRef","current","value","componentDidMount","input","api","map","Circle","places","event","searchBounds","center","getCenter","radius","getBounds","Autocomplete","bounds","types","addListener","handleChange","render"],"sources":["../../src/map/SearchInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport {TextInput} from '@sanity/ui'\nimport {WrapperContainer} from './SearchInput.styles'\ninterface Props {\n  api: typeof window.google.maps\n  map: google.maps.Map\n  onChange: (result: google.maps.places.PlaceResult) => void\n}\n\nexport class SearchInput extends React.PureComponent<Props> {\n  searchInputRef = React.createRef<HTMLInputElement>()\n  autoComplete: google.maps.places.Autocomplete | undefined\n\n  handleChange = () => {\n    if (!this.autoComplete) {\n      return\n    }\n\n    this.props.onChange(this.autoComplete.getPlace())\n\n    if (this.searchInputRef.current) {\n      this.searchInputRef.current.value = ''\n    }\n  }\n\n  componentDidMount() {\n    const input = this.searchInputRef.current\n    if (!input) {\n      return\n    }\n\n    const {api, map} = this.props\n    const {Circle, places, event} = api\n    const searchBounds = new Circle({center: map.getCenter(), radius: 100}).getBounds()\n    this.autoComplete = new places.Autocomplete(input, {\n      bounds: searchBounds,\n      types: [], // return all kinds of places\n    })\n\n    event.addListener(this.autoComplete, 'place_changed', this.handleChange)\n  }\n\n  render() {\n    return (\n      <WrapperContainer>\n        <TextInput\n          name=\"place\"\n          ref={this.searchInputRef}\n          placeholder=\"Search for place or address\"\n          padding={4}\n        />\n      </WrapperContainer>\n    )\n  }\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAqD;AAAA;AAAA;AAO9C,MAAMA,WAAW,SAASC,KAAK,CAACC,aAAa,CAAQ;EAAA;IAAA;IAAA,qDACzCD,KAAK,CAACE,SAAS,EAAoB;IAAA;IAAA,sCAGrC,MAAM;MACnB,IAAI,CAAC,IAAI,CAACC,YAAY,EAAE;QACtB;MACF;MAEA,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAC,IAAI,CAACF,YAAY,CAACG,QAAQ,EAAE,CAAC;MAEjD,IAAI,IAAI,CAACC,cAAc,CAACC,OAAO,EAAE;QAC/B,IAAI,CAACD,cAAc,CAACC,OAAO,CAACC,KAAK,GAAG,EAAE;MACxC;IACF,CAAC;EAAA;EAEDC,iBAAiB,GAAG;IAClB,IAAMC,KAAK,GAAG,IAAI,CAACJ,cAAc,CAACC,OAAO;IACzC,IAAI,CAACG,KAAK,EAAE;MACV;IACF;IAEA,kBAAmB,IAAI,CAACP,KAAK;MAAtBQ,GAAG,eAAHA,GAAG;MAAEC,GAAG,eAAHA,GAAG;IACf,IAAOC,MAAM,GAAmBF,GAAG,CAA5BE,MAAM;MAAEC,MAAM,GAAWH,GAAG,CAApBG,MAAM;MAAEC,KAAK,GAAIJ,GAAG,CAAZI,KAAK;IAC5B,IAAMC,YAAY,GAAG,IAAIH,MAAM,CAAC;MAACI,MAAM,EAAEL,GAAG,CAACM,SAAS,EAAE;MAAEC,MAAM,EAAE;IAAG,CAAC,CAAC,CAACC,SAAS,EAAE;IACnF,IAAI,CAAClB,YAAY,GAAG,IAAIY,MAAM,CAACO,YAAY,CAACX,KAAK,EAAE;MACjDY,MAAM,EAAEN,YAAY;MACpBO,KAAK,EAAE,EAAE,CAAE;IACb,CAAC,CAAC;;IAEFR,KAAK,CAACS,WAAW,CAAC,IAAI,CAACtB,YAAY,EAAE,eAAe,EAAE,IAAI,CAACuB,YAAY,CAAC;EAC1E;EAEAC,MAAM,GAAG;IACP,oBACE,oBAAC,6BAAgB,qBACf,oBAAC,aAAS;MACR,IAAI,EAAC,OAAO;MACZ,GAAG,EAAE,IAAI,CAACpB,cAAe;MACzB,WAAW,EAAC,6BAA6B;MACzC,OAAO,EAAE;IAAE,EACX,CACe;EAEvB;AACF;AAAC"}

package/lib/map/SearchInput.styles.js

@@ -9,4 +9,5 @@ var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var WrapperContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  width: 220px;\n"])));
-exports.WrapperContainer = WrapperContainer;
+exports.WrapperContainer = WrapperContainer;
+//# sourceMappingURL=SearchInput.styles.js.map

package/lib/map/SearchInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.styles.js","names":["WrapperContainer","styled","div"],"sources":["../../src/map/SearchInput.styles.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const WrapperContainer = styled.div`\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  width: 220px;\n`\n"],"mappings":";;;;;;AAAA;AAAsC;AAAA;AAAA;AAE/B,IAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAG,6IAKzC;AAAA"}

package/lib/map/util.js

@@ -10,4 +10,5 @@ function latLngAreEqual(latLng1, latLng2) {
   var lat2 = typeof latLng2.lat === 'function' ? latLng2.lat() : latLng2.lat;
   var lng2 = typeof latLng2.lng === 'function' ? latLng2.lng() : latLng2.lng;
   return lat1 === lat2 && lng1 === lng2;
-}
+}
+//# sourceMappingURL=util.js.map

package/lib/map/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","names":["latLngAreEqual","latLng1","latLng2","lat1","lat","lng1","lng","lat2","lng2"],"sources":["../../src/map/util.ts"],"sourcesContent":["import {LatLng} from '../types'\n\nexport function latLngAreEqual(\n  latLng1: LatLng | google.maps.LatLng,\n  latLng2: LatLng | google.maps.LatLng\n) {\n  const lat1 = typeof latLng1.lat === 'function' ? latLng1.lat() : latLng1.lat\n  const lng1 = typeof latLng1.lng === 'function' ? latLng1.lng() : latLng1.lng\n\n  const lat2 = typeof latLng2.lat === 'function' ? latLng2.lat() : latLng2.lat\n  const lng2 = typeof latLng2.lng === 'function' ? latLng2.lng() : latLng2.lng\n\n  return lat1 === lat2 && lng1 === lng2\n}\n"],"mappings":";;;;;;AAEO,SAASA,cAAc,CAC5BC,OAAoC,EACpCC,OAAoC,EACpC;EACA,IAAMC,IAAI,GAAG,OAAOF,OAAO,CAACG,GAAG,KAAK,UAAU,GAAGH,OAAO,CAACG,GAAG,EAAE,GAAGH,OAAO,CAACG,GAAG;EAC5E,IAAMC,IAAI,GAAG,OAAOJ,OAAO,CAACK,GAAG,KAAK,UAAU,GAAGL,OAAO,CAACK,GAAG,EAAE,GAAGL,OAAO,CAACK,GAAG;EAE5E,IAAMC,IAAI,GAAG,OAAOL,OAAO,CAACE,GAAG,KAAK,UAAU,GAAGF,OAAO,CAACE,GAAG,EAAE,GAAGF,OAAO,CAACE,GAAG;EAC5E,IAAMI,IAAI,GAAG,OAAON,OAAO,CAACI,GAAG,KAAK,UAAU,GAAGJ,OAAO,CAACI,GAAG,EAAE,GAAGJ,OAAO,CAACI,GAAG;EAE5E,OAAOH,IAAI,KAAKI,IAAI,IAAIF,IAAI,KAAKG,IAAI;AACvC"}

package/lib/types.js

@@ -1,5 +1,2 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../src/types.ts"],"sourcesContent":["import {ObjectSchemaType} from '@sanity/field/diff'\n\nexport interface LatLng {\n  lat: number\n  lng: number\n}\n\nexport interface Geopoint {\n  _type: 'geopoint'\n  _key?: string\n  lat: number\n  lng: number\n  alt?: number\n}\n\nexport type GeopointSchemaType = ObjectSchemaType<Geopoint>\n"],"mappings":""}

package/package.json

@@ -1,14 +1,7 @@
 {
   "name": "@sanity/google-maps-input",
-  "version": "2.35.1",
+  "version": "2.36.0-v2-studio.1",
   "description": "Sanity plugin providing input handlers for geo-related input types using Google Maps",
-  "main": "lib/index.js",
-  "types": "./dist/dts",
-  "author": "Sanity.io <hello@sanity.io>",
-  "license": "MIT",
-  "scripts": {
-    "clean": "rimraf lib dest"
-  },
   "keywords": [
     "sanity",
     "cms",
@@ -18,8 +11,36 @@
     "google-maps-input",
     "sanity-plugin"
   ],
+  "homepage": "https://www.sanity.io/",
+  "bugs": {
+    "url": "https://github.com/sanity-io/google-maps-input/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:sanity-io/google-maps-input.git"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "main": "lib/input/GeopointInput.js",
+  "types": "./dts/input/GeopointInput.d.ts",
+  "files": [
+    "lib",
+    "dts",
+    "src",
+    "sanity.json",
+    "config.dist.json"
+  ],
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "tsc --declaration --emitDeclarationOnly && sanipack build",
+    "clean": "rimraf lib",
+    "lint": "eslint .",
+    "prepare": "husky install",
+    "prepublishOnly": "npm run build",
+    "watch": "sanipack build --watch"
+  },
   "dependencies": {
-    "@sanity/field": "2.35.1",
+    "@sanity/field": "2.35.2",
     "@sanity/icons": "^1.3.4",
     "@sanity/types": "2.35.0",
     "@sanity/ui": "^0.37.22",
@@ -27,24 +48,34 @@
     "rxjs": "^6.5.3"
   },
   "devDependencies": {
-    "@sanity/base": "2.35.0",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@sanity/base": "2.35.2",
+    "@sanity/semantic-release-preset": "^2.0.1",
     "@types/googlemaps": "^3.43.0",
-    "rimraf": "^2.7.1"
+    "@types/styled-components": "5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "prettier-plugin-packagejson": "^2.3.0",
+    "prop-types": "^15.8.1",
+    "react": "17.0.1",
+    "rimraf": "^2.7.1",
+    "sanipack": "^2.1.0",
+    "styled-components": "^5.2.0"
   },
   "peerDependencies": {
     "@sanity/base": "^2.0.0",
     "react": "^16.9 || ^17",
     "react-dom": "^16.9 || ^17",
     "styled-components": "^5.2.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sanity-io/sanity.git",
-    "directory": "packages/@sanity/google-maps-input"
-  },
-  "bugs": {
-    "url": "https://github.com/sanity-io/sanity/issues"
-  },
-  "homepage": "https://www.sanity.io/",
-  "gitHead": "25de30f0d2076592dec64e492e07eb7e2853252b"
+  }
 }

package/src/@types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const styles: Record<string, string>
+  export default styles
+}

package/src/diff/GeopointArrayDiff.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+import {
+  ArrayDiff,
+  ObjectDiff,
+  Diff,
+  DiffProps as GenericDiffProps,
+  DiffComponent,
+} from '@sanity/field/diff'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {GoogleMap} from '../map/Map'
+import {Geopoint} from '../types'
+import {GeopointMove} from './GeopointMove'
+import {RootContainer} from './GeopointFieldDiff.styles'
+
+export type DiffProps = GenericDiffProps<ArrayDiff<Geopoint>>
+
+export const GeopointArrayDiff: DiffComponent<ArrayDiff<Geopoint>> = ({diff, schemaType}) => {
+  return (
+    <RootContainer>
+      <GoogleMapsLoadProxy>
+        {(api) => <GeopointDiff api={api} diff={diff} schemaType={schemaType} />}
+      </GoogleMapsLoadProxy>
+    </RootContainer>
+  )
+}
+
+function GeopointDiff({api, diff}: DiffProps & {api: typeof window.google.maps}) {
+  const fromValue = (diff.fromValue || []).filter(hasCoordinates)
+  const toValue = (diff.toValue || []).filter(hasCoordinates)
+  if (fromValue.length === 0 && toValue.length === 0) {
+    return null
+  }
+
+  const bounds = getBounds(fromValue, toValue, api)
+  return (
+    <GoogleMap
+      api={api}
+      location={bounds.getCenter().toJSON()}
+      mapTypeControl={false}
+      controlSize={20}
+      bounds={bounds}
+    >
+      {(map) => (
+        <>
+          {diff.items.map(({toIndex, diff: pointDiff}) => {
+            if (!isChangeDiff(pointDiff)) {
+              return null
+            }
+
+            return (
+              <GeopointMove
+                key={toIndex}
+                api={api}
+                map={map}
+                diff={pointDiff}
+                label={`${toIndex}`}
+              />
+            )
+          })}
+        </>
+      )}
+    </GoogleMap>
+  )
+}
+
+function isChangeDiff(diff: Diff): diff is ObjectDiff<Geopoint> {
+  return diff.action !== 'unchanged' && diff.type === 'object'
+}
+
+function hasCoordinates(point: Partial<Geopoint>): point is Geopoint {
+  return typeof point.lat === 'number' && typeof point.lng === 'number'
+}
+
+function getBounds(
+  fromValue: google.maps.LatLngLiteral[] | null | undefined,
+  toValue: google.maps.LatLngLiteral[] | null | undefined,
+  api: typeof window.google.maps
+): google.maps.LatLngBounds {
+  const bounds = new api.LatLngBounds()
+  const points = [...(fromValue || []), ...(toValue || [])]
+  points.forEach((point) => bounds.extend(point))
+  return bounds
+}

package/src/diff/GeopointFieldDiff.styles.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+export const RootContainer = styled.div`
+  position: relative;
+  min-height: 200px;
+
+  &:empty {
+    background-color: var(--card-skeleton-color-from);
+    display: table;
+    width: 100%;
+  }
+
+  &:empty:after {
+    content: 'Missing/invalid data';
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    position: relative;
+  }
+`

package/src/diff/GeopointFieldDiff.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import {
+  DiffComponent,
+  ObjectDiff,
+  DiffProps as GenericDiffProps,
+  DiffTooltip,
+  getAnnotationAtPath,
+} from '@sanity/field/diff'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {GoogleMap} from '../map/Map'
+import {Geopoint} from '../types'
+import {GeopointMove} from './GeopointMove'
+import {RootContainer} from './GeopointFieldDiff.styles'
+
+export type DiffProps = GenericDiffProps<ObjectDiff<Geopoint>>
+
+export const GeopointFieldDiff: DiffComponent<ObjectDiff<Geopoint>> = ({diff, schemaType}) => {
+  return (
+    <RootContainer>
+      <GoogleMapsLoadProxy>
+        {(api) => <GeopointDiff api={api} diff={diff} schemaType={schemaType} />}
+      </GoogleMapsLoadProxy>
+    </RootContainer>
+  )
+}
+
+function GeopointDiff({api, diff}: DiffProps & {api: typeof window.google.maps}) {
+  const {fromValue, toValue} = diff
+  const annotation =
+    getAnnotationAtPath(diff, ['lat']) ||
+    getAnnotationAtPath(diff, ['lng']) ||
+    getAnnotationAtPath(diff, [])
+
+  const center = getCenter(diff, api)
+  const bounds = fromValue && toValue ? getBounds(fromValue, toValue, api) : undefined
+
+  return (
+    <DiffTooltip annotations={annotation ? [annotation] : []} description={getAction(diff)}>
+      <div>
+        <GoogleMap
+          api={api}
+          location={center}
+          mapTypeControl={false}
+          controlSize={20}
+          bounds={bounds}
+          scrollWheel={false}
+        >
+          {(map) => <GeopointMove api={api} map={map} diff={diff} />}
+        </GoogleMap>
+      </div>
+    </DiffTooltip>
+  )
+}
+
+function getBounds(
+  fromValue: google.maps.LatLngLiteral,
+  toValue: google.maps.LatLngLiteral,
+  api: typeof window.google.maps
+): google.maps.LatLngBounds {
+  return new api.LatLngBounds().extend(fromValue).extend(toValue)
+}
+
+function getCenter(
+  diff: DiffProps['diff'],
+  api: typeof window.google.maps
+): google.maps.LatLngLiteral {
+  const {fromValue, toValue} = diff
+  if (fromValue && toValue) {
+    return getBounds(fromValue, toValue, api).getCenter().toJSON()
+  }
+
+  if (fromValue) {
+    return fromValue
+  }
+
+  if (toValue) {
+    return toValue
+  }
+
+  throw new Error('Neither a from or a to value present')
+}
+
+function getAction(diff: ObjectDiff<Geopoint>) {
+  const {fromValue, toValue} = diff
+  if (fromValue && toValue) {
+    return 'Moved'
+  } else if (fromValue) {
+    return 'Removed'
+  } else if (toValue) {
+    return 'Added'
+  }
+
+  return 'Unchanged'
+}

package/src/diff/GeopointMove.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import {useUserColor} from '@sanity/base/user-color'
+import {ObjectDiff} from '@sanity/field/diff'
+import {Marker} from '../map/Marker'
+import {Arrow} from '../map/Arrow'
+import {Geopoint} from '../types'
+
+interface Props {
+  api: typeof window.google.maps
+  map: google.maps.Map
+  diff: ObjectDiff<Geopoint>
+  label?: string
+}
+
+export function GeopointMove({diff, api, map, label}: Props) {
+  const {fromValue: from, toValue: to} = diff
+  const annotation = diff.isChanged ? diff.annotation : undefined
+  const userColor = useUserColor(annotation ? annotation.author : null) || undefined
+  const fromRef = React.useRef<google.maps.Marker>()
+  const toRef = React.useRef<google.maps.Marker>()
+
+  return (
+    <>
+      {from && (
+        <Marker
+          api={api}
+          map={map}
+          position={from}
+          zIndex={0}
+          opacity={0.55}
+          markerRef={fromRef}
+          color={userColor}
+        />
+      )}
+      {from && to && <Arrow api={api} map={map} from={from} to={to} zIndex={1} color={userColor} />}
+      {to && (
+        <Marker
+          api={api}
+          map={map}
+          position={to}
+          zIndex={2}
+          markerRef={toRef}
+          label={label}
+          color={userColor}
+        />
+      )}
+    </>
+  )
+}

package/src/diff/resolver.ts

@@ -0,0 +1,21 @@
+import {DiffComponentResolver} from '@sanity/field/diff'
+import {GeopointFieldDiff} from './GeopointFieldDiff'
+import {GeopointArrayDiff} from './GeopointArrayDiff'
+
+const diffResolver: DiffComponentResolver = function diffResolver({schemaType}) {
+  if (schemaType.name === 'geopoint') {
+    return GeopointFieldDiff
+  }
+
+  if (
+    schemaType.jsonType === 'array' &&
+    schemaType.of.length === 1 &&
+    schemaType.of[0].name === 'geopoint'
+  ) {
+    return GeopointArrayDiff
+  }
+
+  return undefined
+}
+
+export default diffResolver

package/src/input/GeopointInput.styles.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const PreviewImage = styled.img`
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+`
+
+export const DialogInnerContainer = styled.div`
+  height: 40rem;
+  width: 50rem;
+`