Location fields for Craft CMS

Pin addresses, draw zones and find the nearest entries, on free OpenStreetMap maps. Click anywhere on the map below to try it.

Get started See the examples →

Dropped pin

-34.9213, 138.6305

Bin Zone A · NorwoodBins collected every Monday

Nearest stores

Norwood Store0.1 km
Adelaide CBD Store2.8 km
Glenelg Store13 km

{% set zone = craft.entries.section('binZones')
  .zoneArea({ contains: { lat: -34.9213, lng: 138.6305 } })
  .one() %}

Ask in Twig,

{# Change the radius or the unit #}
{% set stores = craft.entries()
  .section('stores')
  .storeLocation({
    location: 'Adelaide CBD',
    radius: Radius,
    unit: Unit,
  })
  .all() %}

4 stores within 25 km · nearest first

Adelaide CBD Store0.0 km
Norwood Store2.9 km
Glenelg Store9.8 km
Port Adelaide Store13 km

Everything a map field needs

Address search

Type a street or a business. Street, suburb, postcode and coordinates fill in by themselves.

Zones as GeoJSON

Draw areas with holes, give them properties and edit everything as GeoJSON beside the map.

A zone with a hole drawn on the map, its GeoJSON open beside it

Your own pins

Front-end maps take your pin image and any HTML for the card that opens on click.

Purple store pins on a map with an info window open

Settings per field

Hide the pin for zone fields, turn drawing off, limit search to five countries.

Field settings: Enable Drawing, Show Location Pin, Hide Search, Hide Address and Hide Map switches

No API key needed

OpenStreetMap from the moment you install. Add Google keys only if you want Google.

Plugin settings: Google Maps keys are optional

Ready for GraphQL

Read locations, search by distance and find zones from a headless front end.

{
  entries(section: "stores",
    storeLocation: { location: "Glenelg", radius: 10 }) {
    title
    ... on store_Entry {
      storeLocation { full_address distance }
    }
  }
}

An 1840 engraving of the City of Adelaide street grid, with the acre allotments numbered, surveyed by Colonel Light — The City of Adelaide, surveyed by Col. Light. Engraved by John Arrowsmith, 1840.

Every example runs on Adelaide

Colonel Light laid out Adelaide’s grid in 1837. The stores, zones and addresses in these docs sit on the same streets, from 1 King William Street to The Parade in Norwood, so every example can be tried with real places.

King William Street, Adelaide, seen from above, with trams and early twentieth-century buildings — King William Street, home of the docs’ first store. Photograph by Frank Hurley.

Children sitting under a tree in Hurtle Square, Adelaide — Hurtle Square, one of the five squares on Light’s plan.

Three steps to a map

First, install it.

composer require suprim/geomaps
php craft plugin/install geomaps

Then add the field.

Settings → Fields → New field, type Geo Maps. Authors search an address, drop the pin or draw areas.

Then show it.

{{ entry.storeLocation.embed({ height: 400 }) }}

Put your places on the map.

composer require suprim/geomaps

Installation guide →