Main goal

The map had to live inside an existing WordPress site that the client keeps editing themselves, so the goal was a front end with zero runtime dependencies that can be dropped onto any page and survive whatever theme, page builder or cache plugin is running around it.

Problems solved

Every retail unit is a real DOM element rather than a pixel on an image, so it can be highlighted on hover, tapped on mobile and bound to tenant data by id. Tenants renting several adjacent units light up as one; shared points of interest - toilets, lift, entrance and the evacuation exit - are marked on both floors. Pan, wheel and pinch zoom plus a reset-to-fit control keep a very wide floor plan readable on a phone. Finally, the whole map ships as a single self-contained HTML block: no plugin to install, no iframe, no files for the client to upload.

Tech stack

Vanilla JavaScript (ES6): around 500 lines in one IIFE covering floor switching, pan and zoom with inertia, pinch gestures and tooltips - no framework, no bundler, no runtime dependency.

Inline SVG: the hand-authored floor plans are the rendering source of truth. Each unit is a <path> whose id binds it to its data, and pan/zoom is a single CSS transform on the viewport, so interaction stays smooth even on low-end phones.

JSON data layer: tenant names, contact details and opening hours live in one JSON file keyed by SVG element id, so updating the map means editing data rather than markup.

Shadow DOM + Python build script: a small Python script inlines the SVG, CSS, JS, data and icons (base64) into one HTML block that renders inside a Shadow DOM - the theme's CSS cannot leak in and the map cannot leak out. The payload is additionally base64-wrapped so WordPress's HTML-entity encoding and JS-minifying cache plugins can't corrupt it.