MEC-Centerplan in Google Maps Mode

The old MEC websites displayed the center plan as a Google Maps map with a georeferenced SVG floor overlay and clickable industry pins on the shop positions. Cockpit can now reproduce this classic look on the shopping world page 1:1, without changing the existing center plan workflow (SVG editor, shop mapping, routes).

This guide is aimed at center operators whose website runs on one of the MEC templates (A, D, Grooss, or Green) and who are used to the classic look.

When do I need this mode?

Variant	When?	Requirements
Standard (2D / 3D)	Other templates or MEC without classic look	Only the SVG center plan system – no GPS data required
Georeferenced Overlay (OSM)	Similar to MEC, but without Google Maps costs (OpenStreetMap background)	GPS corner points of the floor overlay
Google Maps + SVG (classic like MEC)	Authentic MEC look with Google Map + industry pins	Google Maps API key, GPS corner points, geo markers per shop

You can recognize the modes by the selection field "Map Representation" in the website tab → Center Plan tab.

Step-by-step activation

1) Provide Google Maps API Key (once per installation)

The Cockpit center website frontend uses the environment variable NEXT_PUBLIC_GOOGLE_MAPS_API_KEY. Important: This variable must be set in both apps:

• apps/center-website/.env.local (or when hosting the center website) – here the public shopping world renderer reads the key to load the Google map.
• apps/dashboard/.env.local (optional, but recommended) – this is only used for future dashboard map integrations; the Geo Marker tab itself works without Google Maps key (it uses Leaflet/OSM).

If the key is not set in the center website .env.local, the mode will automatically revert to the Leaflet renderer so the page continues to function. For API key restrictions for localhost, allow the respective center website domains and possibly the dashboard domain.

2) Switch mode in the website tab

1. In the Dashboard, go to Center → Website → Center Plan tab.
2. Select Map Representation → Google Maps + SVG (classic like MEC).
3. In the appearing notice block, enter the GPS corner points of the floor overlay:
   • South / West = bottom-left on the map (decimal degrees).
   • North / East = top-right on the map (decimal degrees).
   • Tip: Right-click in Google Maps → "What's here?" provides the values for each corner.
4. Save.

These corner points are stored in centerplanConfig.overlayGeoBounds and are compatible with the "Georeferenced Overlay (OSM)" mode – switching between the modes occurs without data loss.

3) Upload floor SVG (if not done yet)

In the center plan editor (Dashboard → Center Plans → Edit Floor) in the SVG Center Plan tab, upload the floor SVG. This is the familiar workflow – unchanged.

4a) Alternative: Position SVG directly in the Mapping tab over Google Maps

Since May 2026, you can completely skip step 2 (entering GPS corner points) and place the floor SVG interactively in the Mapping tab over the Google map.

Where: Dashboard → Center Plans → Edit Floor → "Shop Mapping" tab. There is now a toggle at the top:

• SVG view (default) – the classic view with the pure SVG map.
• Map view – Google Maps in the background, with the SVG as a drag/scaleable overlay on top.

How the map view works:

• Drag blue corner points (NW, NE, SE, SW) → the SVG changes its size.
• Drag the yellow point in the center → to move the entire SVG.
• Above the map: Slider for "Opacity" (20–100 %), buttons "Save", "Reset" (to last saved position), and "Fit" (zoom map to SVG).
• First "Save SVG Position" – otherwise, the state will be lost on reload.

Clicking on an SVG area:

• Free area: A modal opens; you select shop/branch/service/office from the list – the assignment is saved immediately.
• Already assigned area (highlighted in green): small action popup with "Delete Assignment" / "Cancel".

Why this is useful:

• You no longer need to manually type the GPS corner points – the position is calculated live in centerplanConfig.overlayGeoBounds while dragging.
• The bounds are saved regardless of the active map mode (no data loss when switching renderers). Therefore, you can set them before switching to "Google Maps + SVG" in the website tab.
• Requirement: GPS of the center (website tab → Geo / Coordinates) + NEXT_PUBLIC_GOOGLE_MAPS_API_KEY in apps/dashboard/.env.local. If one is missing, the map view will show a notice, and you will continue working with the SVG view.

Note: The last selected view is remembered by the browser (localStorage). Default is SVG view – anyone preferring the classic workflow does not need to change anything.

4) Set geo position per shop

In the center plan editor in the new Geo Marker tab:

• Left column: List of all shops, branches, services, and offices of the center – including those that do not have a floor yet. Each entry shows a status badge:
  • GPS – mapped on this floor + GPS position set.
  • Open – mapped on this floor, GPS position missing.
  • Other floor – only mapped on another floor.
  • Not assigned – not mapped anywhere on the map. Clicking on "Set on map" works in all four cases: If there is no MapLocation entry on this floor yet, it will be created automatically on the first click on the map – without going through the shop mapping tab. The status badges in the upper statistics bar are clickable and filter the list (e.g., "only those without GPS on this floor" or "only unassigned items").
• Right column: OpenStreetMap map with:
  • Center point (gray marker from the address coordinates).
  • If GPS corner points were entered in step 2 and a floor SVG has been uploaded: the floor SVG as a transparent overlay (stretched between the GPS corner points). So, you see the center plan lying 1:1 where it will later hover on the live website over the Google Map.
    • Above the map, there are buttons for "Overlay visible/off" and an Opacity slider (10–100 %) to make the center plan translucent.
    • If the SVG is missing or the corner points are not set, only a dashed blue rectangle will be shown as a guide.
  • Already set pins as orange circles.

How to set a position:

1. Search for the desired entry on the left side of the list (search field + filter badges help, e.g., click "not assigned").
2. Click "Set on map".
   • If the entry already has a MapLocation on this floor → the map goes into click mode (crosshair cursor).
   • If it doesn't have one yet → it will be automatically created and the map will directly enter click mode.
3. Directly click on the appropriate area of the transparent center plan overlay – the pin position will be saved immediately (small toast in the top right).

How to correct a position:

• Edit the Lat/Lng fields directly in the list (Tab/click outside saves).
• Or click "Set on map" again → click new point.
• With "Delete Position", you remove the geo position (the shop will no longer appear as a pin on the center website).

The Geo Marker tab complements the existing Shop Mapping tab. The Shop Mapping assigns shops to the SVG areas (for hover/click on the SVG floor). Geo Markers set the GPS position of the same shop for the industry pins on the Google Map. Both data sets complement each other; neither replaces the other. Anyone wanting to use "Google Maps + SVG" can also maintain the Geo Marker tab independently – shop mapping is not strictly required.

5) Check live

Open the shopping world page on the center website. Visible are:

• The shop sidebar block on the left as usual (#centerplan-navigation).
• Next to it, the Google Maps map with the floor SVG as a georeferenced overlay.
• Each shop with a maintained geo position as a industry-colored pin.
• In the bottom right, a floor picker (if multiple floors are active).

Click behavior (1:1 as per original MEC): Clicking on a shop in the sidebar flies the map to the pin:

• panTo animation to the shop position.
• Zoom level 20 (corresponds to original setZoom(20)).
• Pixel offset so that the pin remains visible next to the overlapping sidebar:
  • Sidebar (700px) visible → 350px offset.
  • Only detail panel (350px) → 175px offset.
  • Mobile (<1060px) → 0 offset (panels take full width).
• If the shop is on a different floor, the floor overlay automatically switches.
• When closing the detail panel (back arrow), the map zooms back to the floor bounds (corresponds to original zoomToAll).

If any prerequisite is missing (API key, GPS corner points, at least one active floor with uploaded SVG), the page will automatically show the Leaflet mode as a fallback.

Frequently Asked Questions

Do I need GPS coordinates for every shop?
No. Only shops with an entered position appear as a pin on the map. Shops without a position are visible in the sidebar block and continue to use the normal shop mapping.

What happens to existing data when I switch modes?
Nothing. The modes use the same overlayGeoBounds and MapLocation entries. Switching between "Georeferenced Overlay (OSM)" and "Google Maps + SVG" occurs without data loss.

How do I draw the industry colors?
The pins reference the Shop.category/categoryRef.color values (same as the existing center plan). For a consistent look, you should set colors for categories in the dashboard.

How does the Geo Marker tab behave when I switch the mode back to "Standard" or "Georeferenced Overlay"?
The tab remains visible in the editor (for later reuse) but is not evaluated on the center website. The values are retained in the database.

Cross References

• Developer documentation on the data model + API: [developer-guide/mec-shared-components](../developer-guide/mec-shared-components#phase-b-114-shopping-world--center-plan--original-markup--classic-google-maps-svg-mode-may-2026).
• Classic center plan workflow (SVG, shops, routes): [./content-creator-workflow](./content-creator-workflow).
• SVG structural requirements: [./svg-structure](./svg-structure).