Display a map

Front-Commerce has a generic map component that modules can use to display maps. This guide explains how to use the feature in your application.

Since we are well aware that different shops come with different needs, we provide several implementations for Front-Commerce's generic Map component. Out of the box, Front-Commerce supports:

• 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

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

1. Install the required libraries

   npm install leaflet@^1.7 react-leaflet@3.2.5

2. Register the module in your application.

   .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: [

3. You need to allow images coming from openstreetmap.org in your CSP config.

   src/config/website.js

   module.exports = {
     // ...
     contentSecurityPolicy: {
       directives: {
         scriptSrc: [],
         frameSrc: [],
         styleSrc: [],
         imgSrc: ["*.openstreetmap.org"],
         connectSrc: [],
         baseUri: [],
       },
     },
     // ...
   };

Once that has been added you can restart your application, that 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

info

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.

1. Install the required libraries

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

2. Register the module in your application.

   .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: [

3. You need to allow resources coming from googleapis.com and gstatic.com in your CSP config.

   src/config/website.js

   module.exports = {
     // ...
     contentSecurityPolicy: {
       directives: {
         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: [],
       },
     },
     // ...
   };

4. Configure your Google Maps API Key in the mapsKey of your applications config/website.js.

   caution

   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:

   http://localhost:4000

Once that has been added you can restart your application, that should be it. 🎉

You should be able to use the Map component. See Map.story.js for details.

note

Please keep in mind, that the Map component should be used in an element with a fixed height.