Strapi GeoData

Strapi GeoData is a plugin that enhances Strapi's functionality by adding latitude, longitude, geohash, and a convenient map.

❗ Requirements

Strapi v5

How It Works

The operation is simple: by adding the custom field to a collection, a map and two control fields will be created.

To add a marker, you can either enter the latitude and longitude directly and then click "Set Location", search for an address and click "Search", or move around the map and right-click to place a marker.

The JSON field is not editable; it simply displays the values that will be saved.

The values stored in the JSON field are not very useful for filtering results, but you can create three fields: lat, lng, and geohash. When saving an item, these three fields will be automatically populated and can then be used for queries.

Important: The fields must be structured as follows:

1{ "lat": float, "lng": float, "geohash": string }

If you want to update or create an item in the collection and set the location, do not modify the three fields lat, lng, and geohash (if created) directly. Always write the geohash field in the format:

1{ "lat": float, "lng": float }

The values will then be automatically written to the three fields.

🚀 Strapi Configuration (Required) To allow all Maps assets to load correctly, customize the strapi::security middleware inside ./config/middlewares.js.

1export default [
2  // ...
3 {
4    name: 'strapi::security',
5    config: {
6      contentSecurityPolicy: {
7        useDefaults: true,
8        directives: {
9          "connect-src": ["'self'", "https:"],
10          "script-src": [
11            "'self'",
12            "unsafe-inline",
13            "https://*.basemaps.cartocdn.com",
14          ],
15          "media-src": [
16            "'self'",
17            "blob:",
18            "data:",
19            "https://*.basemaps.cartocdn.com",
20            "https://tile.openstreetmap.org",
21            "https://*.tile.openstreetmap.org",
22          ],
23          "img-src": [
24            "'self'",
25            "blob:",
26            "data:",
27            "https://*.basemaps.cartocdn.com",
28            "market-assets.strapi.io",
29            "https://*.tile.openstreetmap.org",
30            "https://unpkg.com/leaflet@1.9.4/dist/images/",
31          ],
32        },
33      },
34    },
35  },  
36  // ...
37];

(Thanks to the developers at strapi-leaflet-geoman for the tip!)

Install Now

To install the plugin, run the following commands:

npm install strapi-geodata

yarn add strapi-geodata