@d3levvv/strapi-plugin-location v1.0.1

Strapi Plugin Location

This plugin allows users to create location inputs and store latitude and longitude values as geometry types in a PostGIS database. It also provides functionality to filter items based on their location.

Caution 🖐⚠️

This plugin requires a PostgreSQL database with the PostGIS extension enabled (can be used on that database plugin will enable it for you if it can). Make sure you have a compatible database set up before using this plugin. For development I used postgis docker image from here: https://registry.hub.docker.com/r/postgis/postgis/

⚠️ Filtering by data in relations is not supported.

🙉 What does the plugin do for you?

• ✅ Provides a custom location input field for latitude and longitude values
• ✅ Display the location on a map and fine-tune it by moving a marker using drag-and-drop functionality.
• ✅ Handles storage of location values as geometry types in a PostGIS database
• ✅ Allows filtering of items based on their location
• ✅ Enables searching for items with the same location or within a specified range

🧑‍💻 Installation

1. Install the package with your preferred package manager using one of the commands bellow:

yarn add @notum-cz/strapi-plugin-location

2. Create or modify file config/plugins.js/ts and include the following code snippet:

module.exports = ({ env }) => ({
	"location-plugin": {
		enabled:  true,
    config: {
      googleMapsKey: env('your_google_maps_api_key_env_here'),
    }
	},
});

3. run npm build or yarn build to get the plugin activated in the admin UI
4. extend config/middlewares.js/ts as shown in this example:

export default [
    "strapi::logger",
    "strapi::errors",
    {
        name: "strapi::security",
        config: {
            contentSecurityPolicy: {
                useDefaults: true,
                directives: {
                    "connect-src": ["'self'", "https:"],
                    "script-src": [
                        "'self'",
                        "unsafe-inline",
                        "https://maps.googleapis.com",
                    ],
                    "media-src": [
                        "'self'",
                        "blob:",
                        "data:",
                        "https://maps.gstatic.com",
                        "https://maps.googleapis.com",
                    ],
                    "img-src": [
                        "'self'",
                        "blob:",
                        "data:",
                        "https://maps.gstatic.com",
                        "https://maps.googleapis.com",
                        "khmdb0.google.com",
                        "khmdb0.googleapis.com",
                        "khmdb1.google.com",
                        "khmdb1.googleapis.com",
                        "khm.google.com",
                        "khm.googleapis.com",
                        "khm0.google.com",
                        "khm0.googleapis.com",
                        "khm1.google.com",
                        "khm1.googleapis.com",
                        "khms0.google.com",
                        "khms0.googleapis.com",
                        "khms1.google.com",
                        "khms1.googleapis.com",
                        "khms2.google.com",
                        "khms2.googleapis.com",
                        "khms3.google.com",
                        "khms3.googleapis.com",
                        "streetviewpixels-pa.googleapis.com",
                        "market-assets.strapi.io",
                        "https://tile.openstreetmap.org",
                        "https://a.tile.openstreetmap.org",
                        "https://b.tile.openstreetmap.org",
                        "https://c.tile.openstreetmap.org",
                    ],
                    upgradeInsecureRequests: null,
                },
            },
        },
    },
    "strapi::cors",
    "strapi::poweredBy",
    "strapi::query",
    "strapi::body",
    "strapi::session",
    "strapi::favicon",
    "strapi::public",
];

⚙️ Usage

• To use a custom input field for latitude and longitude go to the Content-type-builder of your application –> select a desired content-type -> click add another field -> select Cutstom tab -> name the field and hit the save button.
• To search or filter items based on their location use url parameter location in the following formats.

For example for a content-type named Restaurant with a field coords containing the coordinates the url with the location query would be:

localhost:1337/api/restaurants?$location[coords]=49.200949303006055,16.623833585841673,5000

This will return a list of restaurants within 5000m of the point specified by the coordinates. Replace the collection name restaurant and the field name coords with the name of your collection name and the field containing the coordinates. The last number (5000) is range and is not required. Also this format is supported:

localhost:1337/api/restaurants?$location[coords][lat]=49.200949303006055&$location[coords][lng]=16.623833585841673

• To search or filter items based on their location use url parameter address in the following formats. For example for a content-type named Restaurant with a field coords containing the address, country, countryCode, city the url with the address query would be:

  localhost:1337/api/restaurants?$address[coords][city]=amsterdam

  This will return a list of restaurants with the city specified by the coordinates. Replace the collection name restaurant and the field name coords with the name of your collection name and the field containing the coordinates. you can chain the queries like this:

  localhost:1337/api/restaurants?$address[coords][city]=amsterdam&$address[coords][country]=netherlands