Wtyczka Image Map Pro for WordPress – SVG Map Builder - 6.1.10

Image Map Pro v6 to wizualny builder interaktywnych map obrazkowych dla WordPressa. Zamienia dowolne zdjęcie, grafikę lub plik SVG w element z klikalnymi hotspotami i dymkami treści – bez linijki kodu. Z narzędzia korzystają agencje i deweloperzy, którzy budują rzuty pięter nieruchomości i mapy regionalne.

Edytor wizualny i narzędzia do rysowania hotspotów

Image Map Pro v6 udostępnia wizualny edytor działający wprost w przeglądarce, przepisany w wersji 6.0 na frameworku Svelte. Hotspoty rysuje się tu narzędziami Poly, Rect, Ellipse, Spot, Text i SVG, bezpośrednio na obrazie. Obiekty stylują się osobno dla stanu spoczynkowego i najechania myszą, grupują, klonują oraz wczytują z gotowych plików SVG, z zachowaniem hierarchii.

Edytor działa podobnie do Figmy czy Sketcha – całość powstaje wizualnie, z artboardami, warstwami i podglądem na żywo, bez sięgania po Illustratora czy inny program graficzny. Tryb Preview pokazuje końcowy efekt na bieżąco.

• Narzędzia rysowania – Rect, Ellipse, Poly, Spot, Text i SVG; złożone poligony edytuje się punkt po punkcie, dodając, przesuwając i usuwając węzły wprost na obrazie.
• Style Default i Mouseover – osobny kolor i krycie dla stanu spoczynkowego, osobny dla najechania kursorem, z podglądem zmian na żywo.
• Klonowanie i domyślne style obiektów – kształty kopiuje się razem ze stylami, ustawieniami i treścią, a wygląd każdego nowo rysowanego obiektu da się zdefiniować z góry.

Poligony, piny i kształty rysowane na obrazie

Podstawowym obiektem mapy jest hotspot – poligon, prostokąt, elipsa, ikona albo tekst naniesiony na zdjęcie. Narzędzie Poly rysuje dowolny kształt punkt po punkcie. Tak obrysuje się nieregularny obszar: kontur lokalu na rzucie albo region na mapie.

Narzędzie Spot stawia na obrazie pin z ikoną z wbudowanej biblioteki SVG albo z własnej grafiki. Każdy obiekt dostaje własne kolory, efekty najechania i obrazkowe tło.

Grupowanie i Connected Objects (Single Object)

Wiele obiektów łączy się w grupę, także zagnieżdżoną. Po włączeniu trybu Single Object najechanie na dowolny element uruchamia całą grupę – wszystkie kształty reagują razem, a zamiast osobnych dymków pojawia się jeden.

Przydaje się tam, gdzie kilka powiązanych obszarów ma reagować razem: elementy jednego komponentu na schemacie technicznym albo pomieszczenia jednego lokalu na rzucie piętra.

Import SVG z zachowaniem hierarchii obiektów

Image Map Pro v6 wczytuje gotowy plik SVG przez wklejenie jego kodu – jako pojedynczy obiekt albo jako wiele obiektów, z zachowaniem hierarchii rysunku. Sam import przebudowano gruntownie w wersji 6.1.0, co podniosło niezawodność wariantu „import jako wiele obiektów”.

Dzięki temu schematu przygotowanego w Illustratorze czy Figmie nie trzeba odtwarzać od zera. Po imporcie każda ścieżka dostaje interaktywność, styl i przynależność do grupy.

Tooltips z tekstem, obrazem i wideo oraz akcje hotspotów

Tooltips w Image Map Pro v6 powstają w content builderze, który mieści akapity, nagłówki, przyciski, obrazy, wideo HTML5, filmy z YouTube i dowolny kod HTML. Każdy obiekt przyjmuje akcję on-click lub on-mouseover: Follow Link prowadzi pod wskazany adres URL, Run Script uruchamia własny JavaScript, a pozostałe akcje otwierają dymek albo podświetlają powiązaną grupę obiektów.

Co zmieści się w dymku (tekst, media, HTML)

Content builder składa dymek z gotowych klocków: Paragraph (z polem na kod HTML, listy i kolumny), Heading, Button, Image, HTML5 Video, YouTube Video oraz dowolny blok HTML. Dymek pozycjonuje się precyzyjnie – jako stały albo przyklejony do kursora – a całość pozostaje responsywna.

Treść dymka to dowolny HTML i Unicode, więc polskie znaki diakrytyczne w tekstach, nagłówkach i przyciskach wyświetlają się bez przeszkód. To treść autorska, nie zaszyte napisy interfejsu.

Osobna opcja Show Fullscreen Tooltips (None, Mobile Only, Always) przełącza dymki w tryb pełnoekranowy z automatycznym przyciskiem zamknięcia. Producent zaleca ten wariant na urządzeniach mobilnych.

Akcje Follow Link i Run Script

Reakcją hotspotu na kliknięcie lub najechanie steruje przypisana akcja. Follow Link otwiera wskazany adres URL. Run Script wykonuje własny fragment JavaScriptu – choćby odtworzenie dźwięku albo wywołanie zewnętrznej funkcji.

Poza nawigacją i skryptem akcja potrafi też po prostu otworzyć tooltip danego obiektu albo podświetlić powiązaną grupę kształtów.

Artboardy, zoom i gotowe mapy krajów

Image Map Pro v6 obsługuje wiele artboardów, czyli warstw, więc jedna mapa może mieć osobne tło dla każdego piętra budynku, przełączane klikiem. Dochodzą do tego zoom z oknem nawigatora, tryb pełnoekranowy, animacje wejścia obiektów z efektem Glow oraz ponad 50 gotowych map krajów, regionów i świata – z mapą Polski w pakiecie.

Wielopoziomowe artboardy (piętra budynku)

Jeden projekt mieści kilka artboardów, każdy z własnym obrazem tła. Typowy scenariusz to budynek, gdzie każdy poziom ma osobny rzut – kliknięcie przełącza warstwę i pokazuje plan wybranego piętra.

Artboardy przełącza się klikiem albo z API funkcją artboardChange – stąd możliwość podpięcia zewnętrznych przycisków nawigacji po kondygnacjach.

Zoom, tryb pełnoekranowy i animacje wejścia

Mapa płynnie się powiększa – oknem nawigatora, przyciskami plus i minus oraz powiększeniem po kliknięciu obiektu. Opcja Hold CTRL/CMD to Zoom wstrzymuje przybliżanie do czasu przytrzymania klawisza, żeby nie przejmować przewijania strony.

Przycisk trybu pełnoekranowego rozciąga mapę na cały ekran. Mapa potrafi też startować od razu w fullscreenie.

Obiekty wchodzą z animacją (Grow, Fade, Fall down albo bez niej) i opcjonalną poświatą Glow o konfigurowalnym kolorze i kryciu, która przyciąga wzrok do klikalnych miejsc.

Ponad 50 gotowych map krajów i regionów

W zestawie czeka ponad 50 gotowych map – kraje z podziałem na regiony, kontynenty i mapa świata, zoptymalizowane pod wtyczkę i łatwe do przestylowania. Mapę wstawia się poleceniem New → Country. Na liście jest między innymi Polska, większość państw Europy oraz Stany Zjednoczone z podziałem na stany.

Każdy region zachowuje się jak osobny obiekt – przyjmuje styl najechania, tooltip z danymi oraz akcję Follow Link prowadzącą do podstrony.

Osadzanie w WordPressie i sterowanie przez API

Image Map Pro v6 osadza się w WordPressie natywnym blokiem Gutenberg albo shortcodem, generowanym automatycznie dla każdej mapy od wersji 6.1.5. Ten sam shortcode działa w Elementorze oraz w sliderach i popupach przyjmujących shortcody. Zachowaniem mapy steruje pełne API: atrybuty HTML data-imp-*, funkcje JavaScript ImageMapPro.* oraz hooki nasłuchujące zdarzeń mapy.

Blok Gutenberg i shortcode

Wtyczka dostarcza natywny blok „Image Map Pro”, w którym mapę wybiera się z listy rozwijanej – produkt nosi oznaczenie Gutenberg Optimized. Tła artboardów pobiera się wprost z biblioteki mediów WordPressa.

Druga droga to shortcode w postaci [nazwa-mapy], który od wersji 6.1.5 powstaje automatycznie i unikalnie dla każdej mapy. Zadziała wszędzie tam, gdzie przyjmowane są shortcody – również w sliderach i popupach.

Uwaga: edytor WordPressa potrafi wstawiać własne tagi do dłuższego kodu osadzenia, przez co mapa czasem się nie renderuje. W takim przypadku pewniejszy jest shortcode niż wklejanie rozbudowanego kodu JSON czy HTML.

JS i HTML API dla deweloperów

Frontem mapy steruje się bez linijki skryptu – przez atrybuty HTML data-imp-*, choćby data-imp-show-tooltip-on-click, data-imp-change-artboard czy data-imp-focus-object-on-click do przybliżenia obiektu. Atrybut data-imp-image-map-name wskazuje konkretną mapę, gdy na jednej stronie jest ich kilka.

Trudniejsze integracje obsługują funkcje JavaScript: ImageMapPro.highlightObject, focusObject, showTooltip, artboardChange, zoomIn czy reInitMap. Do tego dochodzą hooki nasłuchujące zdarzeń przez subscribe – mapInit, objectClick, tooltipShow, artboardChange oraz dodany w wersji 6.0.18 zoomPanUpdate.

Własny JavaScript i CSS wpina się przez sekcję Custom Code w ustawieniach wtyczki.

Dla jakich projektów Image Map Pro ma sens

Image Map Pro v6 sprawdza się przede wszystkim przy interaktywnych rzutach pięter dla nieruchomości, mapach regionalnych z danymi, oznaczonych schematach technicznych, prezentacjach cech produktu (shoppable image) oraz interaktywnych materiałach edukacyjnych. Wspólny mianownik to obraz lub plik SVG, który ma reagować na kliknięcie czy najechanie i odsłaniać warstwową treść bez przeładowania strony.

Nieruchomości, mapy regionalne i schematy techniczne

Dla kogo Image Map Pro sprawdza się najlepiej:

• Agencje i deweloperzy stron nieruchomości – interaktywny budynek, w którym klik w piętro otwiera rzut, a poligony lokali pokazują tooltips z metrażem i statusem.
• Twórcy stron z danymi geograficznymi – mapy zasięgów, oddziałów czy statystyk na gotowych mapach krajów i regionów.
• Branże techniczne, inżynieryjne i edukacyjne – oznaczanie komponentów na schemacie zaimportowanym z SVG, z tooltipami i grupowaniem powiązanych części.
• Sklepy i marketing produktowy – shoppable image z pinami i dymkami opisującymi cechy produktu, osadzony shortcodem na karcie produktu.
• Deweloperzy, którym zależy na kontroli z poziomu kodu – sterowanie mapą z reszty strony przez JS i HTML API.

Dla kogo Image Map Pro nie jest najlepszym wyborem

Dla kogo Image Map Pro nie jest najlepszym wyborem:

• Szukający w pełni darmowego rozwiązania – przy jednym obrazie z hotspotami wystarczy darmowa wersja Draw Attention.
• Potrzebujący map na Google Maps, geolokalizacji lub store locatora z adresami – tu lepiej sprawdzą się MapSVG albo WP Go Maps, bo Image Map Pro operuje na obrazach i SVG, nie na kafelkach z geokodowaniem.
• Projekty z priorytetem automatycznej wielojęzyczności w WPML lub Polylang – mapy tłumaczy się tu ręcznie, przez duplikację.
• Projekty z twardym wymogiem indeksowalności i dostępności treści hotspotów – producent nie deklaruje zgodności SEO ani WCAG, a treść dymków renderuje się po stronie JavaScript.

Kompatybilność z WordPress, przeglądarkami i builderami

Image Map Pro v6 wymaga WordPressa w wersji 4.9 lub nowszej i obsługuje całą linię 5.x, 6.x oraz 7.0, a renderowany front działa w przeglądarkach od IE8 po aktualne Chrome, Firefox, Safari i Edge. Wtyczka nosi oznaczenie Gutenberg Optimized, współpracuje z Elementorem przez shortcode, nie integruje się natywnie z WooCommerce, a automatycznego tłumaczenia map przez WPML nie obsługuje.

Wersje WordPress, PHP i przeglądarki

Najniższa wskazana wersja WordPressa to 4.9, a deklarowana zgodność obejmuje linie 5.x, 6.x oraz 7.0 – producent rekomenduje aktualne wydania 6.x i 7.0. Minimalnej wersji PHP dla edycji v6 producent nie podaje, więc konkretnej liczby tu nie ma. Logika wtyczki opiera się głównie na froncie JavaScript, dlatego obciążenie serwera jest niewielkie.

Renderowana mapa działa szeroko – od IE8 po aktualne Chrome, Firefox, Safari, Opera i Edge. Sam edytor, jako aplikacja Svelte, wymaga już nowoczesnej przeglądarki. Wtyczka deklaruje obsługę wysokiej rozdzielczości.

Buildery, WooCommerce i wielojęzyczność

Mapę osadza się natywnym blokiem w Gutenbergu, a w Elementorze i innych builderach przyjmujących shortcody – shortcodem; w changelogu pojawiały się osobne łatki na konflikty CSS z Elementorem (6.0.38, 6.1.7). Image Map Pro nie jest wtyczką e-commerce i nie integruje się natywnie z WooCommerce, choć mapę da się osadzić na dowolnej stronie lub karcie produktu.

Uwaga o wielojęzyczności: automatyczne tłumaczenie map przez WPML nie działa – teksty tłumaczy się ręcznie, duplikując mapę i podmieniając treść w edytorze, którego interfejs jest po angielsku. Obsługi multisite, Polylang ani TranslatePress producent nie deklaruje.

Najczęściej zadawane pytania