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:

• Component Props
  • Map Component
  • Marker Component
• Install a map extension
• Display a map
• Override the map component

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

Component Props

We have homogenized 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

Install a map extension

Follow the installation instruction of the map extension you want to use:

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

After this, you should be able to use the Map component. See Map.stories.tsx for details.

note

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

Display a map

Using useExtensionComponentMap, you can retrieve the registered map components and use it in your application:

theme/myMapComponent.tsx

import { useCallback } from "react";
import { useExtensionComponentMap } from "@front-commerce/core/react";

export default function MyMapComponent() {
  const MapComponents = useExtensionComponentMap("maps");
  const locations = [
    {
      lat: 48.8566,
      lng: 2.3522,
    },
    {
      lat: 48.8536,
      lng: 2.3523,
    },
  ];

  return (
    <div style={{ height: "500px" }}>
      <MapComponents.Map
        locations={locations}
        getMarker={useCallback((location) => {
          const LocationMarkerComponent = location.getMarkerComponent();
          return <MapComponents.Marker key={location.id} location={location} />;
        }, [])}
      />
    </div>
  );
}

For more advanced usage, see the Map component documentation.

Override the map component

If you wish to override the Map or Marker components, you can use the registerFeature hook to do so:

extensions/myMapExtension/index.ts

import { defineExtension } from "@front-commerce/core";

export default defineExtension({
  name: "myMapExtension",
  meta: import.meta,
  unstable_lifecycleHooks: {
    onFeaturesInit: (hooks) => {
      hooks.registerFeature("maps", {
        ui: {
          componentsMap: {
            Map: new Url("theme/myMapComponent.tsx", import.meta.url),
            Map: new Url("theme/myMarkerComponent.tsx", import.meta.url),
          },
        },
      });
    },
  },
});

Note that your myMapExtension extension should be registered after the maps extension you are willing to override in your front-commerce.config.ts (e.g. @front-commerce/leaflet):

front-commerce.config.ts

//...
import leaflet from "@front-commerce/leaflet";
import myMapExtension from "./extensions/myMapExtension";

export default defineConfig({
  extensions: [
    leaflet(),
    // ...
    myMapExtension(),
  ],
  //...
});