Skip to main content

Centerplan / Wayfinding - Overview

What is the Centerplan System?​

The Centerplan System allows for the integration of interactive maps of your shopping center on the website. Visitors can:

  • Click on shops to see information
  • Display tooltips with opening hours, category, etc.
  • Navigate to the shop detail page
  • Browse through multiple floors

Who is what for?​

Designer / Graphic Designer​

You create the SVG Centerplan file in Adobe Illustrator.

Your guide: Creating Centerplan in Illustrator

Content Creator​

You upload the SVG and assign shops.

Your guide: Uploading Centerplan & Assigning Shops

Developer​

You integrate the system technically.

Your guides:

Workflow Overview​

Step 1: Designer creates SVG​

  • Open Adobe Illustrator
  • Draw Centerplan
  • Name shop areas
  • Export as SVG

Step 2: Content Creator uploads SVG​

  • Open dashboard
  • Centerplans → New Centerplan
  • Create floor

Step 3: Content Creator assigns shops​

  • Centerplans → Mapping
  • Click area on the map → Modal with shop list → Select shop
  • Coordinates will be saved automatically

No vector SVG from the architect? Simply upload the PNG/JPEG of the Centerplan – in the tab SVG Centerplan, there is the map “PNG → Hybrid SVG (automatic segmentation)" which converts the image on the server into a hybrid SVG with clickable polygons. You will then assign the final ID convention to each polygon by clicking in the tab “Polygon Editor” (shop-EG-29, service-EG-stairs, …). Details: Hybrid Center Plan. Generate the plan with AI? AI Master Prompt (DE/EN).

Step 4: Sync to WordPress​

  • WordPress Admin → cockpitOS → Sync
  • SVG is stored locally
  • Shop data is transferred

Step 5: Website displays map​

  • Embed Elementor widget
  • Visitors see interactive map
  • Click on shop → Detail page

Documentation​

For Designers​

For Content Creators​

For Developers​

Features​

Interactive Maps​

  • Clickable shop areas
  • Hover tooltips with shop info
  • Redirect to shop detail pages

Multi-Floor Support​

  • Multiple floors per center
  • Floor navigation
  • Separate SVGs per floor

Performance​

  • No API calls in the frontend
  • All data stored locally
  • Fast loading times

Easy Management​

  • Click on area → Select shop from modal
  • Visual preview
  • Automatic sync

Example​

This is what a completed interactive map looks like:

┌─────────────────────────────────────────┐
│  CENTERPLAN - GROUND FLOOR              │
├─────────────────────────────────────────┤
│                                         │
│  ┌──────┐  ┌──────┐  ┌──────┐         │
│  │ Aldi │  │ H&M  │  │ Zara │         │
│  │ [x]  │  │ [x]  │  │ [x]  │  <- Clickable!
│  └──────┘  └──────┘  └──────┘         │
│     ↑                                   │
│     └─ Hover shows tooltip              │
│                                         │
│  ┌──────────────────────────┐          │
│  │ Aldi                     │          │
│  │ Category: Groceries      │          │
│  │ Floor: GF                │          │
│  │ Opening Hours: Mon-Sat 8-20│       │
│  │ Click for more info →    │          │
│  └──────────────────────────┘          │
│                                         │
└─────────────────────────────────────────┘

Quick Start​

I am a Designer:​

  1. Read the Illustrator Guide
  2. Create your SVG file
  3. Hand it over to the Content Creator

I am a Content Creator:​

  1. Read the Content Creator Workflow
  2. Upload the SVG
  3. Assign shops
  4. Perform sync

I am a Developer:​

  1. Read the SVG Structure
  2. Check the WordPress Integration
  3. Understand the Sync System

Important Concepts​

Single Source of Truth​

  • The dashboard is the only data source
  • WordPress is just a "cache"
  • Sync transfers everything at once

DRY Principle​

  • Data is synced once
  • No duplicate API calls
  • No redundant data sources

Offline Capability​

  • SVG files stored locally
  • Shop data locally available
  • Works without dashboard connection

Support​

For questions:

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/centerplan/uebersicht