Customising content in relation to one's geographic position (geo-coded content) has become very important in the past few years. For example, when looking for stores on the "Les Bonnes Choses" pastry shop website, it is very handy to be suggested the nearest store depending on your location. This kind of feature is now possible through prismic.io's Content API thanks to a new document fragment named “GeoPoint”.
To use the GeoPoint fragment, you first need to configure a document mask in the Writing Room. The "Les Bonnes Choses" example repository already defines some structured content like products (pastries) and stores, here we modify the store custom type in order to add a new “GeoPoint” fragment to it:
Now that it's done, we can take any "store” document and fill its coordinates:
There are several ways to fill coordinates. Either you can manually type the coordinates, or drag the map below the input, or you can even paste a Google Maps URL. We're also planning to enhance the input interface to offer you a simple input supporting geocoding from a "regular" postal address.
Once you've published store documents using this type, this is how you query the Content Query API with some coordinates:
The new predicate is pretty straightforward. We're asking prismic.io to give us all "store" documents that are within 15 km from coordinates (40.689757, -74.0451453).
Since searching by coordinates is done using a predicate, you can combine it with any other prismic.io predicate, the limit is your imagination!
Like the "similar" & "linked" documents features we announced recently, this one is another powerful query feature we're providing you with today. Have fun!