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:

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

Property Description Type
locations A list of locations used for the markers LocationInputShape[]
getMarker The marker node for locations (location) => ReactNode
zoom Default zoom level number
defaultBounds The default map bounds CoordinatesShape[]
defaultCenter The default center for the map. CoordinatesShape
onBoundsChanged Event handler for bound changes (event) => void

Marker Component

Property Description Type
location Location for the marker LocationInputShape
icon Allows you to override the marker icon object
isPopupOpened Controlled method for marker popup boolean
onClick Event handler on marker click (event) => void

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: The interface of Google Maps with an alert explaining Google Maps couldn't load properly

  • 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.

Edit on GitHub  or  Send us a feedback