Strapi Open Street Maps

Overview

The Strapi Open Street Maps plugin enhances your Strapi content-types by providing a custom field for seamlessly integrating Open Street Maps. This feature empowers users to effortlessly select and retrieve location data within their content.

Example API Response

Upon implementing the open-street-maps custom field in a Strapi content-type, the API response takes the following structure:

1{
2  "data": {
3    "id": 1,
4    "attributes": {
5      "createdAt": "2023-12-02T11:28:20.689Z",
6      "updatedAt": "2023-12-02T11:28:39.133Z",
7      "location": {
8        "lat": -19.834256108664132,
9        "lng": 34.8413372039795
10      },
11      "title": "Hello"
12    }
13  },
14  "meta": {}
15}

Requirements

Ensure your Strapi version is v4 or higher to leverage the full capabilities of the Strapi Open Street Maps plugin.

Installation

To integrate the Strapi Open Street Maps plugin into your project, follow these steps:

1. Install the strapi-open-street-maps package via npm at the root of your Strapi project.

   npm install @isneezy/strapi-open-street-maps

2. After installing the package, restart your Strapi app. Open Street Maps should now be listed among your plugins.

Strapi Configuration (required)

For proper functioning of Open Street Maps, adjust the strapi::security middleware within the ./config/middlewares.js file:

1module.exports = [
2-  "strapi::security",
3+  {
4+    name: "strapi::security",
5+    config: {
6+      contentSecurityPolicy: {
7+        useDefaults: true,
8+        directives: {
9+          "img-src": ["https://tile.openstreetmap.org"],
10+        },
11+      },
12+    },
13+  },
14];

These configuration changes ensure that Open Street Maps assets are loaded correctly in your Strapi project.