New release: Conditional Fields

Geopoint

An object signifying a global latitude/longitude/altitude coordinate. Longitude and latitude is stored as decimal degrees, while altitude is stored as a floating point representing meters above sea level.

Properties

  • REQUIREDtypestring

    Value must be set to geopoint.

  • namestring

    Required. The field name. This will be the key in the data record.

  • titlestring

    Human readable label for the field.

  • hiddenboolean | function

    If set to true, this field will be hidden in the studio. You can also return a callback function to use it as a conditional field.

  • readOnlyboolean

    If set to true, this field will not be editable in the content studio.

  • descriptionstring

    Short description to editors how the field is to be used.

  • initialValueInitialValueOrResolverFunction

    The initial value used when creating new values from this type. Can be either a literal value or a resolver function that returns either a literal value or a promise resolving to the initial value.

Validation

Learn more about validation
  • required()function

    Ensures that this field exists.

  • custom(fn)function

    Creates a custom validation rule.

Input

{
  title: 'Launchpad Location',
  name: 'location',
  type: 'geopoint'
}

Output

{
  "_type": "geopoint",
  "lat": 58.63169011423141,
  "lng": 9.089101352587932,
  "alt": 13.37
}

While the geopoint type is available in Sanity by default, you will probably want to install a plugin that provides a more visual way to input the coordinates. For instance, you could use the @sanity/google-maps-input plugin:

cd my-project
sanity install @sanity/google-maps-input

Then configure ./config/@sanity/google-maps-input.json with your Google maps API key:

{
  "apiKey": "google-api-key",
  "defaultZoom": 11,
  "defaultLocation": {
    "lat": 58.63169011423141,
    "lng": 9.089101352587932
  }
}

Make sure the key has access to all of the following APIs:

  • Google Maps JavaScript API
  • Google Places API Web Service
  • Google Static Maps API

You can create such keys and grant API access in the Google Developer Console.

Gotcha

Be careful with your API keys. If you use this functionality, it's a good idea to make your repository private.

Was this article helpful?