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: usingreact-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 usereact-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 applicationsconfig/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.