• Product

  • Solutions

  • Developers

  • Docs

  • Pricing

  • Cloud

Search icon
Strapi plugin logo for Mapbox Field

Mapbox Field

Strapi plugin that provides a Mapbox custom field

Strapi plugin map-field

The map-field Strapi plugin allows to add a Mapbox map custom field in your content-types.

Map Field

You can use the seach box to pinpoint the location you are looking for. Alternatively, you can double-click anywhere on the map, which will put a marker on the closest geolocated point.

The address, longitude and latitude of the geolocated point are displayed in the readonly fields underneath the map.

The field will actually be stored as GeoJSON in a JSON field behing the scene.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
  "id": "address.7351440929350024",
  "text": "Avenue Des Hauts-Fourneaux",
  "type": "Feature",
  "center": [
    5.949249,
    49.50255
  ],
  "address": "9",
  "context": [
    {
      "id": "postcode.13299336",
      "text": "4364"
    },
    {
      "id": "place.1271944",
      "text": "Esch-sur-Alzette",
      "wikidata": "Q16010"
    },
    {
      "id": "region.9352",
      "text": "Esch-sur-Alzette",
      "wikidata": "Q188283",
      "short_code": "LU-ES"
    },
    {
      "id": "country.8840",
      "text": "Luxembourg",
      "wikidata": "Q32",
      "short_code": "lu"
    }
  ],
  "geometry": {
    "type": "Point",
    "coordinates": [
      5.949249,
      49.50255
    ]
  },
  "relevance": 0.735,
  "place_name": "9, Avenue Des Hauts-Fourneaux, 4364 Esch-sur-Alzette, Luxembourg",
  "place_type": [
    "address"
  ],
  "properties": {
    "accuracy": "rooftop"
  }
}

This plugin was inspired by

It uses the following npm packages

Install the plugin

To install this plugin, you need to add an NPM dependency to your Strapi application:

# Using Yarn
yarn add strapi-plugin-map-field

# Or using NPM
npm install strapi-plugin-map-field

Configure the plugin

You need to enable the plugin in your Strapi plugins configuration.

Open config/plugins.js and add the following:

1
2
3
4
5
6
7
8
9
10
11
12
// config/plugins.js
module.exports = ({ env }) => ({

  ...

  "map-field": {
    enabled: true,
  },

  ...

});

Update the security middleware configuration

In order for the map to be displayed properly, you will need to update the strapi::security middleware configuration.

For that, open config/middlewares.js and add the directive 'worker-src': ['blob:'] to the contentSecurityPolicy directives under strapi::security. You also need to add api.mapbox.com in the script-src.

The whole file should look somewhat like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
module.exports = ({
  env
}) => [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'script-src': ["'self'", "'unsafe-inline'", 'cdn.jsdelivr.net', 'api.mapbox.com'],
          'img-src': ["'self'", 'data:', 'blob:' ],
          'media-src': ["'self'", 'data:', 'blob:'],
          'worker-src': ['blob:'],
          upgradeInsecureRequests: null,
        },
      }
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

Provide a valid Mapbox Access Token

Add a valid Mapbox Access Token as an environment variable in your .env file

# .env
STRAPI_ADMIN_MAPBOX_ACCESS_TOKEN=pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxx

Add a map field to your content type

In the content type builder

  • Click on Add another field
  • Select the Custom tab
  • Select the Map field
  • Type a name for the field
  • Click Finish

Add map field to content type

Install now

npm install strapi-plugin-map-field

STATS

6 GitHub stars60 weekly downloads

Last updated

152 days ago

Strapi Version

4.6.0 and above

Author

github profile image for Cédric Pontet
Cédric Pontet

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.