Jak dodać interaktywną mapę inwestycji? Instrukcja krok po kroku
Dowiedz się, jak krok po kroku dodać interaktywną mapę inwestycji w ProstaCena.pl, połączyć obszary z budynkami, piętrami i lokalami oraz osadzić mapę na własnej stronie.
Dodaj interaktywną mapę inwestycji i pokaż klientom lokale w czytelny, wizualny sposób.
Interaktywna mapa w ProstaCena.pl pozwala odwiedzającym przejść od planu całej inwestycji do konkretnego budynku, piętra i lokalu. Klient może kliknąć wybrany obszar, zobaczyć jego status oraz przejść do szczegółów lokalu.
W tym poradniku pokazujemy, jak przygotować mapę, narysować obszary, połączyć je ze strukturą inwestycji, skonfigurować wygląd i udostępnić mapę na stronie internetowej.
Czym jest interaktywna mapa inwestycji?
Mapa oparta na planie inwestycji
To nie jest mapa geograficzna. Interaktywna mapa wykorzystuje przesłany obraz, na przykład plan osiedla, rzut budynku albo rzut piętra. Na obrazie wyznaczasz klikalne obszary, czyli poligony, a następnie przypisujesz je do elementów inwestycji.
Każdy obszar może prowadzić do budynku, piętra albo lokalu. Dzięki temu mapa odwzorowuje rzeczywistą strukturę inwestycji i ułatwia klientowi znalezienie interesującego go mieszkania.
Co przygotować przed rozpoczęciem?
Przed konfiguracją mapy sprawdź, czy inwestycja ma już utworzoną strukturę. Przygotuj również obrazy, na których chcesz wyznaczyć obszary.
Najlepiej użyć czytelnych planów z wyraźnym podziałem na budynki i lokale. Im lepszy obraz, tym łatwiej będzie precyzyjnie narysować poligony.
Krok 1. Otwórz zakładkę „Mapa interaktywna”
Otwórz wybraną inwestycję
Zaloguj się do panelu ProstaCena.pl i przejdź do inwestycji, którą chcesz skonfigurować.
Wybierz zakładkę Mapa interaktywna
Zakładka znajduje się obok zarządzania lokalami, etapami, widgetem i konfiguracją strony www.
Rozpocznij od pozycji Cała inwestycja
Drzewo struktury inwestycji pozwala przełączać się między obrazem całej inwestycji, budynkiem, piętrem i lokalem.
Krok 2. Dodaj obraz główny inwestycji
Obraz „Cała inwestycja” jest wymagany
W drzewie wybierz Cała inwestycja, a następnie użyj formularza Dodaj zdjęcie interaktywne. Wybierz przygotowany plan i kliknij Prześlij obraz.
System zapisuje obraz w bibliotece mapy i automatycznie tworzy jego wersję WebP. Obraz główny jest punktem startowym mapy, dlatego bez niego mapa nie będzie dostępna na publicznej stronie.
Po dodaniu obrazu wybierz go w drzewie. Zobaczysz edytor, w którym możesz narysować obszary odpowiadające budynkom, piętrom albo lokalom.
Krok 3. Narysuj poligony na obrazie
Poligon jest obszarem, który użytkownik będzie mógł kliknąć na mapie. Każdy poligon powinien dokładnie obejmować jeden budynek, jedno piętro albo jeden lokal.
Poligon musi mieć od 3 do 200 punktów, nie może zawierać powtórzonych punktów ani przecinających się krawędzi. Współrzędne są zapisywane w zakresie od 0 do 100, więc obszary zachowują proporcje przy różnych rozmiarach ekranu.
Przydatne narzędzia edytora:
Krok 4. Połącz obszary ze strukturą inwestycji
Samo narysowanie obrysu nie wystarczy. Trzeba jeszcze wskazać, czego dotyczy dany poligon. Służy do tego tryb Przypisz.
Włącz tryb Przypisz
W edytorze kliknij Przypisz, a następnie wybierz poligon na obrazie.
Wybierz element w drzewie
Przy odpowiednim budynku, piętrze albo lokalu kliknij przycisk Wybierz. Lista pokazuje tylko elementy podrzędne właściwe dla aktualnego obrazu.
Powtórz dla kolejnych obszarów
Po przypisaniu poligonu możesz przejść do następnego obszaru. Mapa zachowa powiązanie między obrysem a wybranym elementem.
Typowy układ powiązań wygląda tak: poligon na obrazie całej inwestycji prowadzi do budynku, poligon na obrazie budynku prowadzi do piętra, a poligon na obrazie piętra prowadzi do lokalu. Lokal jest końcowym elementem mapy i nie ma własnego obrazu interaktywnego.
Krok 5. Dodaj rzuty budynków i pięter
Jeśli chcesz stworzyć wielopoziomową nawigację, wybierz konkretny budynek lub piętro w drzewie i dodaj dla niego kolejny obraz. Następnie narysuj na nim poligony i przypisz je do elementów podrzędnych.
Buduj mapę etapami
Nie musisz dodawać osobnego rzutu dla każdego poziomu. Możesz rozpocząć od jednego obrazu całej inwestycji i przypisać na nim bezpośrednio lokale. Dodatkowe obrazy budynków i pięter warto dodać wtedy, gdy szczegółowy plan ułatwi klientom wybór mieszkania.
Na jednym obrazie możesz łączyć obszary różnych typów, o ile należą do jego struktury podrzędnej. Panel podpowiada dostępne elementy, aby uniknąć nieprawidłowych połączeń.
Krok 6. Skonfiguruj wygląd mapy
Konfiguracja widgetu mapy
W sekcji Konfiguracja widgetu mapy ustaw sposób prezentacji mapy na stronie inwestycji i w widgecie klienta. Zmiany tych ustawień zapisują się automatycznie.
Jak sprawdzić gotową mapę?
Po zapisaniu obrazów i przypisań otwórz podgląd strony inwestycji. Mapa jest wyświetlana na publicznej stronie inwestycji niezależnie od tego, czy została dodana do głównego widgetu lokali.
Jeśli edytujesz położenie punktów albo przesuwasz cały poligon, kliknij Zapisz zmiany. Niektóre operacje, takie jak utworzenie lub przypisanie obszaru, są zapisywane od razu, ale zmiany geometrii wymagają osobnego zapisu.
Jak osadzić mapę na własnej stronie?
Skopiuj kod z zakładki Mapa interaktywna
W górnej części zakładki znajdziesz sekcję Kod mapy do osadzenia na stronie. Kliknij Kopiuj, a następnie wklej kod w dowolnym miejscu strony klienta, najlepiej w miejscu przeznaczonym na plan inwestycji.
<div data-prosta-cena-map data-investment="UUID_INWESTYCJI"></div>
<script src="https://prostacena.pl/js/interactive-map-widget.js" defer></script>Warto używać dokładnie kodu wygenerowanego w panelu, ponieważ zawiera właściwy identyfikator inwestycji. Mapa działa niezależnie od klasycznego widgetu z listą lokali.
Jeśli chcesz pokazywać mapę również wewnątrz głównego widgetu lokali, włącz opcję Pokaż mapę w widgecie głównym w konfiguracji widgetu.
Najczęstsze problemy
Podsumowanie
Konfiguracja interaktywnej mapy składa się z czterech głównych elementów: obrazu, poligonów, przypisań do struktury inwestycji oraz ustawień widgetu. Najpierw dodaj obraz całej inwestycji, później wyznacz obszary i połącz je z budynkami, piętrami lub lokalami.
Gotową mapę możesz wyświetlić na publicznej stronie inwestycji oraz osadzić na własnej stronie za pomocą kodu JavaScript. Dzięki temu klient otrzymuje wygodny sposób przeglądania oferty, a aktualne statusy i ceny lokali pozostają zarządzane w jednym panelu.
Chcesz pokazać klientom inwestycję na interaktywnej mapie?
Załóż konto w ProstaCena.pl, dodaj inwestycję i przygotuj wizualną prezentację lokali.
Załóż konto