Klient: LH House – kameralne osiedle domów jednorodzinnych pod Koszalinem
Zakres: autorska wtyczka WordPress + integracja z Draw Attention Pro
Technologie: WordPress, PHP, JavaScript (vanilla), SVG / Leaflet, Elementor, Draw Attention Pro
LH House - interaktywna mapa dostępności domów zsynchronizowana z panelem WordPress
Wyzwanie
Deweloper sprzedaje osiedle ośmiu domów jednorodzinnych w dwóch lokalizacjach. Kupujący chce w pierwszej kolejności zobaczyć jedną rzecz: który dom jest jeszcze wolny.
Na stronie działały już dwa niezależne elementy:
- tabela ofert – generowana przez naszą wtyczkę z danych w panelu WordPress (numer domu, metraż, powierzchnia działki, cena, cena za m², karta lokalu, prospekt),
- interaktywna mapa osiedla – zbudowana na wtyczce Draw Attention Pro, gdzie każdy dom to klikalny hotspot na planie zagospodarowania.
Problem: te dwa światy o sobie nie wiedziały. Draw Attention Pro nie ma żadnego połączenia z polami niestandardowymi WordPressa – kolory hotspotów ustawia się ręcznie w edytorze mapy. Oznaczało to, że po każdej rezerwacji lub sprzedaży trzeba było pamiętać o zmianie statusu w dwóch miejscach. A gdy tabela mówi „sprzedany”, a mapa świeci na zielono, klient dzwoni o dom, którego nie ma – i traci zaufanie do całej oferty.
Napisaliśmy moduł integracyjny rozszerzający naszą wtyczkę o obsługę Draw Attention Pro. Panel WordPress stał się jedynym źródłem prawdy: handlowiec zmienia status nieruchomości w jednym miejscu, a mapa i tabela aktualizują się same.
Żadnej edycji mapy, żadnego CSS-a, żadnego kontaktu z agencją przy każdej sprzedaży.
// hotspoty Draw Attention nie mają ID — jedyny punkt zaczepienia
// to ich kolejność w wygenerowanym SVG
const STANY = {
dostepne: { fill: '#3f9c46', stroke: '#2f7434' },
rezerwacja: { fill: '#e08a1e', stroke: '#b06a12' },
sprzedany: { fill: '#c2413f', stroke: '#96302e' },
};
const pomaluj = (svg, statusy) => {
svg.querySelectorAll('path[class*="hotspot"]')
.forEach((ksztalt, i) => {
const stan = STANY[ statusy[i + 1] ];
if (!stan) return;
// Leaflet wpisuje style bezpośrednio w element —
// arkusz CSS przegrywa tę licytację
ksztalt.setAttribute('fill', stan.fill);
ksztalt.setAttribute('stroke', stan.stroke);
});
};
// mapa dorysowuje się długo po `load`, więc nie zgadujemy —
// nasłuchujemy, aż pojawi się właściwa warstwa
new MutationObserver(skanuj)
.observe(kontener, { childList: true, subtree: true });
/* wybór właściwej mapy spośród trzech, źródło statusów
i tryb diagnostyczny — poza kadrem */
Co było trudne (i jak to rozwiązaliśmy)
To nie było zwykłe „pokoloruj element po ID”. Draw Attention Pro renderuje mapy przez Leaflet, a jego hotspoty nie mają w kodzie strony żadnego unikalnego identyfikatora – wszystkie dostają tę samą klasę CSS. Rozpoznać je można wyłącznie po kolejności w strukturze SVG.
Dlatego integracja:
- mapuje nieruchomości po pozycji hotspotu w wygenerowanym SVG, zamiast po nieistniejącym ID,
- celuje w konkretną mapę po jej tytule - na stronie działają równolegle trzy mapy Draw Attention (plan osiedla oraz interaktywne rzuty parteru i piętra), a kolorowanie ma dotyczyć wyłącznie planu osiedla,
- nadpisuje atrybuty fill i stroke bezpośrednio na elementach SVG, ponieważ Leaflet ustawia je inline i zwykłe reguły CSS nie mają szansy zadziałać,
- radzi sobie z asynchronicznym renderowaniem - mapa powstaje już po załadowaniu strony, więc skrypt ponawia próbę i dodatkowo obserwuje zmiany w DOM (MutationObserver), żeby kolory nie zniknęły przy przerysowaniu mapy,
- zawiera tryb diagnostyczny, który wyświetla numerację hotspotów bezpośrednio na planie - dzięki temu przypisanie domów do obrysów zajęło kilka minut zamiast godziny zgadywania.
Efekt:
Jedno miejsce zarządzania
status zmieniany raz, widoczny wszędzie.
Klient obsługuje to samodzielnie
bez znajomości kodu i bez zlecania zmian.
Zero rozjazdu danych
między tabelą a mapą, także po aktualizacjach Draw Attention Pro.
Szybsza ścieżka zakupowa
kupujący jednym spojrzeniem na plan widzi, co jest wolne, i przechodzi prosto do karty lokalu, prospektu PDF lub formularza zapytania.
Rozwiązanie skalowalne
dodanie kolejnej inwestycji to dodanie nieruchomości i wskazanie obrysu na mapie.
Gotowa wtyczka z rynku rzadko robi dokładnie to, czego potrzebuje konkretny biznes. Draw Attention Pro świetnie rysuje interaktywne mapy - ale nic nie wie o Twoich danych. Naszą specjalnością jest spinanie takich narzędzi w jeden spójny system, zamiast zastępowania ich kosztownym oprogramowaniem od zera.
Masz wtyczkę, która robi 80% tego, czego potrzebujesz? Dopiszemy brakujące 20%.