Główny cel

Mapa miała działać wewnątrz istniejącej strony WordPress, którą klient sam edytuje, więc celem był front-end bez żadnych zależności - taki, który można wkleić na dowolną podstronę i który przetrwa dowolny motyw, page builder czy plugin.

Rozwiązane problemy

Każdy lokal jest realnym elementem DOM, a nie pikselem na obrazku - można go podświetlić przy najechaniu, dotknąć na telefonie i powiązać z danymi najemcy po id. Najemcy wynajmujący kilka sąsiednich lokali podświetlają się jako jedna całość, a punkty wspólne

• toalety, winda, wejście i wyjście ewakuacyjne - są oznaczone na obu kondygnacjach. Przesuwanie, zoom kółkiem i gestem pinch oraz przycisk dopasowania widoku sprawiają, że bardzo szeroki rzut pozostaje czytelny na telefonie. Całość trafia na stronę jako jeden samowystarczalny blok HTML: bez wtyczki, bez iframe'a i bez plików do wgrania.

Stack technologiczny

Vanilla JavaScript (ES6): około 500 linii w jednym IIFE - przełączanie pięter, przesuwanie i zoom z bezwładnością, gesty pinch i dymki z danymi. Bez frameworka, bundlera i zależności runtime.

Inline SVG: ręcznie przygotowane rzuty kondygnacji są źródłem prawdy dla renderowania. Każdy lokal to <path>, którego id wiąże go z danymi, a przesuwanie i zoom to jeden transform CSS na kontenerze - dzięki temu interakcja jest płynna także na słabszych telefonach.

Warstwa danych w JSON: nazwy najemców, dane kontaktowe i godziny otwarcia znajdują się w jednym pliku JSON, kluczowanym po id elementu SVG - aktualizacja mapy to edycja danych, a nie kodu.

Shadow DOM + skrypt budujący w Pythonie: niewielki skrypt w Pythonie wkleja SVG, CSS, JS, dane i ikony (base64) w jeden blok HTML renderowany w Shadow DOM — style motywu nie wpływają na mapę, a mapa nie wpływa na stronę. Ładunek jest dodatkowo zakodowany base64, żeby kodowanie encji przez WordPressa i pluginy minifikujące JS go nie uszkodziły.