Geopoint

The geopoint field allows content writers to provide geolocation coordinates or a Google Maps URL. It stores latitude and longitude values that you can use to display locations on maps or perform geolocation calculations.

You can access the latitude and longitude values directly from the field:

<span>
  My location is {slice.primary.location.latitude},{" "}
  {slice.primary.location.longitude}.
</span>

Add a geopoint field to a content model

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

• Add a geopoint field

  In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a geopoint field.

  The label determines the label shown to content writers in the Page Builder. Use an easily understood name.

  The API ID determines the property name in the Content API. Use a short, snake-cased name.

Use geopoint fields

The geopoint field’s longitude and latitude values can be read from the field’s object.

This example uses a geopoint field named location.

<span>
  My location is {slice.primary.location.latitude},{" "}
  {slice.primary.location.longitude}.
</span>

Check if a geopoint field has a value

Use the isFilled.geoPoint() helper to check if a geopoint field has a value before using it.

import { isFilled } from "@prismicio/client";

if (isFilled.geoPoint(slice.primary.my_geopoint_field)) {
  // Do something if `my_geopoint_field` has a value.
}

API response

Here is what a geopoint field looks like from the Content API:

{
  "example_geopoint": {
    "latitude": 20.632784250388028,
    "longitude": 0.0019419193267822268
  }
}