Display a map

Front-Commerce has a generic map component that can be used by modules to display maps. Since we are well aware that different shops come with different needs, we provide several implementations out of the box:

• Open Street Map (OSM) with Leaflet
• Google Maps

The goal is to choose one to make sure that all maps across the website look the same.

Component Props

We have homogenize the props of the map components to make sure that they are consistent across different components.

Map Component

Marker Component

Open Street Map (OSM) with Leaflet

Known issue: using react-leaflet v3.2.0 is known for generating an issue in Front-Commerce because of Webpack4 usage. This issue has been identified in the library and a Pull Request is awaiting approval. Until it is fixed, or Front-Commerce has migrated to Webpack5 please use react-leaflet v3.1.0.

If you want to use Open Street Map, you will need to follow these steps:

• install the required libraries

npm install leaflet@^1.7 react-leaflet@3.1.0 @react-leaflet/core@1.0.2

• register the module in your application. Edit your .front-commerce.js as below:

// .front-commerce.js
module.exports = {
  name: "Front Commerce DEV",
  url: "http://www.front-commerce.test",
  modules: [
+    "./node_modules/front-commerce/modules/map-leaflet",
    "./node_modules/front-commerce/theme-chocolatine",
    "./src"
  ],
  serverModules: [

• Allow images coming from openstreetmap.org in src/config/website.js::contentSecurityPolicy

// src/config/website.js
module.exports = {
  // ...
  contentSecurityPolicy: {
    directives: {
      scriptSrc: [],
      frameSrc: [],
      styleSrc: [],
-      imgSrc: [],
+      imgSrc: ["*.openstreetmap.org"],
      connectSrc: [],
      baseUri: [],
    },
  },
  // ...
}

• restart the application

This should be it. You should be able to use the Map component. See Map.story.js for details. Please keep in mind, that the Map component should be used in an element with a fixed height.

Google Maps

Before choosing Google Maps, please ensure that you have an API key available. If you don’t, you can create one by following this documentation.

• install the required libraries

npm install @react-google-maps/api@2

• register the module in your application. Edit your .front-commerce.js as below:

// .front-commerce.js
module.exports = {
  name: "Front Commerce DEV",
  url: "http://www.front-commerce.test",
  modules: [
+    "./node_modules/front-commerce/modules/map-googlemap"
    "node_modules/front-commerce/theme-chocolatine",
    "./src"
  ],
  serverModules: [

• Allow images coming from maps.googleapis.com in src/config/website.js::contentSecurityPolicy

// src/config/website.js
module.exports = {
  // ...
  contentSecurityPolicy: {
    directives: {
-      scriptSrc: [],
-      frameSrc: [],
-      styleSrc: [],
-      imgSrc: [],
-      fontSrc: [],
-      connectSrc: [],
+      scriptSrc: ["maps.googleapis.com"],
+      frameSrc: ["maps.googleapis.com"],
+      styleSrc: ["fonts.googleapis.com"],
+      imgSrc: ["maps.googleapis.com", "maps.gstatic.com"],
+      fontSrc: ["fonts.googleapis.com"],
+      connectSrc: ["maps.googleapis.com"],
      baseUri: [],
    },
  },
  // ...
}

• Configure your Google Maps API Key in the mapsKey of your applications config/website.js. If you don’t do this step, you will see an error overlay as shown below and the map will be for development use only:

• restart the application

This should be it. You should be able to use the Map component. See Map.story.js for details. Please keep in mind, that the Map component should be used in an element with a fixed height.