Recenzja wtyczki MapSVG: Twórz interaktywne mapy w WordPress

Recenzja wtyczki MapSVG: Twórz interaktywne mapy w WordPress

MapSVG to fajna wtyczka WordPress, która pomaga tworzyć interaktywne i responsywne mapy w witrynie WordPress. Dzięki pakietowi ciekawych funkcji możesz przekonwertować dowolny plik SVG na interaktywną mapę. To nie wszystko, możesz tworzyć szczegółowe plany pięter, infografiki, mapy Google, mapy Chloropleth, mapy obrazów i wiele więcej.


W tej recenzji przyglądamy się funkcjom, które sprawiają, że MapSVG jest jedną z najlepszych wtyczek mapujących WordPress w Internecie. Testujemy też napęd wtyczki, więc zostań i czytaj do końca. To zdecydowanie dobra okazja, więc weź kubek kawy i rzućmy się.

Interaktywne mapy MapSVG dla WordPress

MapSVG, opracowany przez niezwykłego twórcę Romana Stepanova, sprawia, że ​​tworzenie interaktywnych map jest łatwe i przyjemne. Świetnie się bawiłem, grając z różnymi opcjami, chociaż najpierw musiałem przeczytać dokumentację. To powiedziawszy, spójrzmy na funkcje dostępne w MapSVG.

Ponad 100 gotowych map

Aby pomóc Ci rzucić się na ziemię, MapSVG zawiera ponad 100 map skalibrowanych geograficznie. Istnieje mapa świata, która jest już podzielona na klikalne regiony (kraje). Następnie masz mapy krajów z odpowiednimi stanami / prowincjami. Dostajesz także kilka specjalnych map.

Ponieważ większość map jest skalibrowana, możesz dodawać do nich znaczniki, używając adresu lub współrzędnych. Ponadto możesz tworzyć własne mapy SVG i przesyłać je do MapSVG.

Wszystko, co musisz zrobić, to stworzyć obraz SVG za pomocą dowolnego oprogramowania do edycji wektorów, takiego jak Inkscape lub Adobe Illustrator, przesłać to cholerstwo i dostosować.

Wiesz co to oznacza? Oznacza to, że możesz projektować interaktywne diagramy i wizualizować statystyki (i ogólnie poprawiać doświadczenie użytkownika) bez przechylania się do tyłu.

Obiekty bazy danych

MapSVG pozwala tworzyć obiekty i dodawać je do określonych obszarów mapy. Dzięki temu możesz wzbogacić swoje mapy o informacje, które oferują odwiedzającym wciągające wrażenia.

Dla celów ilustracji załóżmy przez chwilę, że jesteś agentem nieruchomości posiadającym nieruchomości do sprzedaży w całym kraju. Masz się naprawdę dobrze i chciałbyś pokazać dostępne właściwości na mapie. Chcesz wyświetlić takie informacje, jak rozmiar, adres, cena, zdjęcia i tym podobne.

MapSVG pozwala dodać te szczegóły do ​​bazy danych, a następnie dołączyć informacje do jednego lub wielu obszarów mapy. Za każdym razem, gdy użytkownik kliknie zdefiniowany obszar, powiedzmy stan, szczegóły są wyświetlane w ładnym oknie popover, widoku szczegółów lub podpowiedzi.

Katalog z możliwością filtrowania i przeszukiwania

Tak jakby dodanie obiektów bazy danych nie wystarczy, MapSVG pozwala utworzyć katalog i wyświetlić go obok mapy. Korzystając z naszej analogii nieruchomości, możesz chcieć pokazać wszystkie nieruchomości (lub agentów) dostępne w określonym stanie. Dzięki MapSVG jest to bardzo możliwe.

Użytkownicy mogą filtrować elementy w katalogu za pomocą filtrów rozwijanych lub pola wyszukiwania. Ponadto użytkownicy mogą filtrować obiekty, klikając określony obszar na mapie. Ta funkcja katalogu sprawia, że ​​nawet najbardziej złożone diagramy i mapy są łatwe do zrozumienia. Dodatkowo użytkownicy mogą łatwo znaleźć informacje, co jest zaletą dla twojego UX.

Ulepsz Mapy Google

Czy wspomniałem, że możesz zintegrować MapSVG z Mapami Google? Tak, możesz i potrzebujesz klucza Google API. Zazwyczaj nie można w znacznym stopniu dostosowywać Map Google, co jest lub może ograniczać w niektórych scenariuszach. MapSVG umożliwia pokonanie tego wyzwania.

W jaki sposób? Możesz nakładać mapy wektorowe na dowolne mapy Google (terenowe, satelitarne, drogowe lub hybrydowe). A ponieważ obrazy wektorowe są interaktywne, możesz modyfikować Mapę Google, dopóki nie upuścisz. Oczywistym rezultatem końcowym jest to, że możesz zapewnić większą użyteczność.

Pamiętaj, że mapy Google są wyposażone w zestaw elementów sterujących. Połącz te elementy sterujące z funkcjami MapSVG, a będziesz literacki doprowadzać użytkowników do szaleństwa z podniecenia. Będą pytać: „Jak do cholery to zrobili?” Ta funkcja pozwala ulepszyć mapę Google, wyróżniając punkty orientacyjne i umożliwiając klikanie.

Edytory CSS, JavaScript i szablony

Jaki jest pożytek z mapy, której nie można dostosować ani rozszerzyć? Wydaje się, że Roman ma to ugruntowane dzięki sprytnym edytorom CSS i JavaScript. Tak długo, jak znasz się na kodzie, możesz przesuwać swoje interaktywne ilustracje do granic możliwości.

Na początek możesz stylizować swoje mapy i diagramy za pomocą CSS, tak jak chcesz, i nie przejmując się potem. Możesz stylizować wiele elementów z podpowiedzi, okien podręcznych i innych kontenerów informacyjnych. Ponadto możesz wykorzystać moc JavaScript, aby rozszerzyć domyślną funkcjonalność mapy.

Dodatkowo otrzymasz edytor szablonów, który pomaga tworzyć niestandardowe szablony dla popoverów, markerów i podpowiedzi. Edytor szablonów jest łatwy w użyciu, nie spodziewamy się żadnych problemów.

Intuicyjny panel sterowania z podglądem na żywo

Praca z MapSVG jest bardzo prosta dzięki intuicyjnemu pulpitowi administracyjnemu, dzięki któremu tworzenie map jest dziecinnie proste. Tworzenie map i innych interaktywnych ilustracji za pomocą MapSVG jest łatwe od początku do końca.

Ponadto wtyczka jest wyposażona w funkcję podglądu na żywo, która pozwala zobaczyć zmiany w czasie rzeczywistym. Teraz nie musisz się zastanawiać, jak będą wyglądać Twoje mapy po zakończeniu. Co więcej, nie musisz chodzić tam i z powrotem (lub odświeżać strony), aby zobaczyć, jak wyglądają twoje mapy. Jak słodko?

Mapy obrazów

Wspominaliśmy o mapach graficznych kilka minut temu, ale musiałem osobno omówić tę funkcję, ponieważ wydaje mi się, że robi wrażenie. Wiemy już, że MapSVG automatycznie konwertuje pliki SVG na interaktywne mapy. Po prostu narysuj plik SVG, prześlij go i dostosuj.

Ale czy wiesz, że możesz także tworzyć mapy z obrazów PNG i JPEG? Brzmi interesująco, prawda? MapSVG zawiera doskonałe narzędzia do rysowania, które pozwalają tworzyć interaktywne (klikalne) mapy z obrazów rastrowych. Jak to jest przydatne? Możesz rysować interaktywne plany domów, plany, trasy, plany miast, tabele miejsc siedzących i wiele więcej.

Dzięki tym funkcjom i niesamowitemu wsparcie, nic nie powinno Cię powstrzymywać przed tworzeniem map i interaktywnych ilustracji z tej galaktyki. Niebo jest tutaj limitem, ponieważ MapSVG to bezsensowna (i prawdopodobnie najlepsza) wtyczka map do WordPress.

Jak skonfigurować MapSVG i utworzyć mapę

Konfiguracja MapSVG jest tak łatwa, jak instalacja jakiejkolwiek innej typowej wtyczki WordPress. Możesz rozpocząć tworzenie interaktywnych map, jak tylko zainstalujesz i aktywujesz wtyczkę. Nie musisz niczego konfigurować, ponieważ MapSVG działa od razu po wyjęciu z pudełka.

Uzyskaj MapSVG

Zdobądźmy praktyczne doświadczenie. Weź kopię MapSVG i postępuj zgodnie z następującymi instrukcjami. Zaloguj się do pulpitu administratora WordPress i przejdź do Wtyczki> Dodaj nowe.

Przegląd wtyczek mappress wordpress

Następnie naciśnij Przekazać plik przycisk (1)Wybierz plik (2), i uderzył Zainstaluj teraz (3) przycisk, jak pokazano poniżej.

recenzje mapvg

Poczekaj na zakończenie procesu instalacji, a następnie kliknij przycisk Aktywuj wtyczkę przycisk.

przegląd mapvg

I to wszystko; wtyczka jest gotowa do użycia po aktywacji. Kliknij na MapSVG element w adminie WordPress, aby uruchomić panel sterowania.

mapyvg

Jak dotąd tak dobrze, myślę, że zgodzisz się, że proces jest prosty. W panelu sterowania możesz wybrać jedną z gotowych map, utworzyć mapę Google (najpierw wymaga integracji, co jest tak proste, jak skopiowanie klucza API), zbudować mapę obrazu, przesłać plik SVG lub pobrać plik Plik SVG z mapą Google.

Jeśli potrzebujesz pomocy w tworzeniu mapy, możesz uzyskać szybką pomoc, klikając Poradniki lub Wsparcie linki u góry panelu sterowania. Wybierzmy jedną z wcześniej istniejących map. Pójdę z Chinami bo i tak wszystko jest tam zrobione ��

N / B: Deweloper zaleca użycie skalibrowany geograficznie mapy zamiast nieskalibrowane mapy, ponieważ…

… Mapy kalibrowane geograficznie są nowsze, mają tytuły regionu i możesz dodawać znaczniki według współrzędnych geograficznych (szerokość / długość geograficzna) lub po prostu wpisując adres, który jest automatycznie konwertowany na współrzędne. – Samouczki MapSVG

Wybierz Chiny (lub dowolną inną mapę, którą lubisz) z Nowa mapa SVG menu rozwijane. Jeśli nie znosisz paska przewijania, skorzystaj z pola wyszukiwania.

tworzenie nowej mapy w Mapsvg

Na następnym ekranie wypełnij Tytuł i zmień Tekst modułu ładującego jeśli masz takie skłonności. Na tym samym ekranie możesz ustawić rozmiar mapy, wyłączyć responsywny projekt (jest on domyślnie włączony, więc nie dotykaj pokrętła), włączaj podpowiedzi i wyskakujące okna między innymi.

Zauważysz także, że mapa jest już podzielona na regiony (w naszym przypadku są to prowincje chińskie) i można je kliknąć! Zapoznaj się także z innymi elementami sterującymi, w tym z Menu menu rozwijane.

Zmieńmy kolory i poznajmy wtyczkę. Nawigować do Menu> Kolory jak pokazano niżej.

edycja kolorów mapy we wtyczce wordpress mapvg

The Zabarwienie ekran pomaga wybrać kolory swoich marzeń. Mam na myśli to, że nie ma ograniczeń co do kolorów, których chcesz używać. Po prostu pracuj z próbnikiem kolorów, aż znajdziesz coś, co lubisz. Pójdę z odcieniami niebieskiego, ponieważ WordPress jest bae ��

Wybierz kolory i nie zapomnij trafić Zapisz Ctrl + S. przycisk, jak pokazano poniżej.

Widzieć? Mówiłem, że MapSVG jest łatwy w użyciu. Za pomocą kilku kliknięć zmieniłem kolory map i jest to przyjemne uczucie – tak jak kiedyś, wiele lat temu, kiedy zająłem pierwsze miejsce w Google. Edytowanie dowolnej innej części mapy jest równie łatwe, i aby to udowodnić, dodam podpowiedzi, ponieważ byłoby fajnie.

Dodawanie podpowiedzi w MapSVG

Jak dodawać podpowiedzi, które pojawiają się po najechaniu myszką na region na mapie? To proste, a za chwilę pokażę Ci, jak to zrobić.

Nawiasem mówiąc, jeśli coś nie jest jasne z tego czy innego powodu, nie wahaj się sprawdzić urzędnika Samouczki i dokumentacja MapSVG. Jeszcze lepiej, zajrzyj do sekcji komentarzy na końcu tego postu, a ja przywołam Thor tylko dla Ciebie. Ten młot rozwiązuje wszystko ��

Poza tym dodawanie podpowiedzi obejmuje dodawanie szablonu (pamiętasz edytor szablonów, o którym wspominaliśmy wcześniej?). W tym celu przejdź do Menu> Szablony a następnie wybierz Etykietka regionu. 

dodawanie podpowiedzi we wtyczce wordvg Mapsvg

Następnie dodaj następujący kod do edytora szablonów i naciśnij Zapisz Ctrl + S. przycisk jak pokazano powyżej.

Województwo: {{tytuł}}

Powyższy kod jest prostym HTML z Tagi kierownicy. Jeśli chcesz wyświetlić tylko tytuł swojego regionu, użyj tagu {{title}}. Możesz także zdefiniować własne pola niestandardowe, o czym dowiesz się za chwilę. Ale najpierw włączmy funkcję podpowiedzi.

Nawigować do Menu> Ustawienia i włącz Podpowiedzi funkcja, jak pokazano poniżej.

recenzje mapvg

Jak widać na powyższym zrzucie ekranu, nasze podpowiedzi są aktywne. Mimo to wspomniałem, że pokażę ci, jak dodawać niestandardowe pola, abyś mógł wzbogacić swoje podpowiedzi w sposób niewyobrażalny. Załóżmy, że chcesz dodać zdjęcia i więcej informacji do podpowiedzi. Jak byś się tym zajął? W tym celu wzywamy obiekty bazy danych wspominaliśmy wcześniej.

Dodawanie niestandardowych pól za pomocą obiektów bazy danych

MapSVG umożliwia dodawanie niestandardowych pól do map. Mamy już pole {{title}}, ale zobaczmy, jak możemy dodać więcej pól niestandardowych. Masz do wyboru niestandardowe pola, w tym tekst, obszar tekstowy, pole wyboru, obrazy, i tak dalej. Dodajmy kilka zdjęć do prowincji Nei Mongol.

Iść do Menu> Regiony i kliknij Edytuj pola przycisk, jak podkreślamy na obrazku poniżej.

dodawanie niestandardowych pól w MapSVG

Na następnym ekranie naciśnij Wizerunek przycisk, a następnie Zapisz pola przycisk, jak pokazano poniżej.

Zapisz zmiany, klikając Zapisz Ctrl + S. przycisk. Zawsze pamiętaj, aby zapisać zmiany.

Następnie naciśnij Lista przycisk, jak pokazano na obrazku poniżej.

Zmień mapę na Edytuj regiony i kliknij region (wybraliśmy Nei Mongol). Powinieneś zobaczyć swoje nowe pole niestandardowe (Obrazy) w prawo. Uderz w Przeglądaj przycisk. Zobacz zdjęcie poniżej.

Na następnym ekranie dodaj swoje zdjęcia i naciśnij Wybierz obrazy przycisk.

Nastąpi przekierowanie z powrotem do Edytuj regiony ekran, na którym musisz kliknąć OK (1) przycisk. Następnie kliknij Zapisz Ctrl + S (2) przycisk, a następnie wróć do Podgląd (3) tryb, jak pokazano poniżej.

Jeśli w tym momencie spróbujesz najechać myszą na Nei Mongol, obrazy nie pojawią się w podpowiedzi. Dlaczego? Cóż, nie stworzyliśmy szablonu dla obrazów. Zróbmy to dobrze w tej chwili.

Nawigować do Menu> Szablony> Etykietka regionu i zmień kod na ten:

Województwo: {{tytuł}}
Pierwsze zdjęcie:


Wszystkie obrazy:
{{#each images}} {{/każdy}}

Oto obraz do dalszej ilustracji. Pamiętaj, aby trafić Zapisać przycisk.

Teraz spróbuj przesuwać myszy nad wybranym regionem (w naszym przypadku Nei Mongol). Powiedz mi co widzisz. To jest na moim ekranie.

Całkiem nieźle, prawda? Właśnie nauczyłeś się, jak dodawać niestandardowe pola do swoich map MapSVG. Dodawanie okien podręcznych i znaczników jest równie łatwe jak ciasto. Dodatkowo, o ile znasz te podstawy, dobrze jest utworzyć dowolną interaktywną mapę / diagram pod słońcem.

Praca z MapSVG należy do czwartoklasistów, zwłaszcza że Roman Stepanov oferuje świetne wsparcie i niesamowite wskazówki za pośrednictwem samouczków. Aby wyświetlić mapę w witrynie WordPress, zapisz zmiany i przejdź do Strony> Dodaj nowe.

Następnie naciśnij MapSVG przycisk jak pokazano powyżej i wybierz mapę. To dodaje krótki kod [mapsvg id = ”17 ″ title =„ Chiny ”] do swojej strony WordPress. W dowolny sposób możesz dodać mapę w dowolnym miejscu na swojej stronie za pomocą krótkiego kodu. Nie martw się, mapy tworzone za pomocą MapSVG reagują w 100%, co oznacza, że ​​będą wyglądać świetnie na wielu urządzeniach.

Następnie kliknij opublikuj i zobacz wyniki na interfejsie.

Wniosek

Bylibyśmy tu cały dzień, gdybyśmy przejrzeli każdą dostępną funkcję, ale zachęcam do zdobycia własnej kopii MapSVG WordPress plugin map i przetestuj go. Między tobą a mną jest to jedyna wtyczka mapy WordPress, jakiej kiedykolwiek będziesz potrzebować.

Czy masz pytanie lub sugestię? Nie wahaj się skontaktować za pośrednictwem poniższej sekcji komentarzy. Twoje zdrowie!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map