Recensione del plugin MapSVG: crea mappe interattive in WordPress

Recensione del plugin MapSVG: crea mappe interattive in WordPress

MapSVG è un elegante plug-in WordPress che ti aiuta a creare mappe interattive e reattive sul tuo sito WordPress. Grazie a una serie di funzioni interessanti, puoi convertire qualsiasi file SVG in una mappa interattiva. Non è tutto, puoi creare planimetrie dettagliate, infografiche, mappe di Google, mappe di cloropleth, mappe di immagini e molto altro.


In questa recensione, esaminiamo le funzionalità che rendono MapSVG uno dei migliori plugin di mappatura per WordPress sul web. Testiamo anche il plugin, quindi restate in giro e leggete fino alla fine. Questo è sicuramente un buon affare, quindi prenditi una tazza di caffè e andiamo.

Mappe interattive MapSVG per WordPress

Sviluppato dallo straordinario sviluppatore romano Stepanov, MapSVG rende la creazione di mappe interattive facile e divertente. Mi sono divertito moltissimo a giocare con le varie opzioni anche se prima dovevo leggere la documentazione. Detto questo, diamo un’occhiata alle funzionalità disponibili in MapSVG.

100+ mappe pronte

Per aiutarti a correre in terra, MapSVG viene fornito con oltre 100 mappe geo-calibrate. C’è una mappa del mondo ed è già suddivisa in regioni (paesi) cliccabili. Quindi hai le mappe dei paesi con i rispettivi stati / province. Ottieni anche alcune mappe speciali.

E poiché la maggior parte delle mappe sono calibrate, è possibile aggiungere marcatori alle mappe utilizzando un indirizzo o coordinate. Inoltre, puoi creare le tue mappe SVG e caricarle su MapSVG.

Tutto quello che devi fare è creare un’immagine SVG usando qualsiasi software di editing vettoriale come Inkscape o Adobe Illustrator, caricare la dannata cosa e personalizzare.

Sai cosa significa questo? Significa che puoi progettare diagrammi interattivi e visualizzare statistiche (e generalmente migliorare l’esperienza utente) senza chinarti indietro.

Oggetti database

MapSVG ti consente di creare oggetti e aggiungerli ad aree specifiche della tua mappa. Ciò ti consente di arricchire le tue mappe con informazioni che offrono ai tuoi visitatori web un’esperienza coinvolgente.

A scopo illustrativo, supponiamo per un minuto di essere un agente immobiliare con proprietà da vendere in tutto il paese. Stai andando davvero bene e vorresti mostrare le proprietà disponibili su una mappa. Ti piacerebbe visualizzare informazioni come dimensioni, indirizzo, prezzo, foto e cose del genere.

MapSVG ti consente di aggiungere questi dettagli a un database, quindi allegare le informazioni a una o più aree della tua mappa. Ogni volta che un utente fa clic sull’area definita, ad esempio uno stato, i dettagli vengono visualizzati in una piacevole popover, vista dettagli o descrizione comando.

Directory filtrabile e ricercabile

Come se l’aggiunta di oggetti di database non fosse sufficiente, MapSVG ti consente di creare una directory e visualizzarla accanto alla tua mappa. Seguendo la nostra analogia immobiliare, potresti voler mostrare tutte le proprietà (o agenti) disponibili in un determinato stato. MapSVG lo rende molto possibile.

Gli utenti possono filtrare gli elementi nella directory utilizzando i filtri a discesa o una casella di ricerca. Inoltre, gli utenti possono filtrare gli oggetti facendo clic su un’area specifica sulla mappa. Questa funzione di directory rende anche comprensibili i diagrammi e le mappe più complessi. Inoltre, gli utenti possono trovare facilmente informazioni che rappresentano un vantaggio per la tua UX.

Migliora Google Maps

Ho già detto che puoi integrare MapSVG con Google Maps? Sì, puoi e hai solo bisogno di una chiave API di Google. In genere, non è possibile personalizzare ampiamente Google Maps, il che è o può essere limitante in alcuni scenari. MapSVG ti consente di superare questa sfida.

Come? Puoi sovrapporre mappe vettoriali su qualsiasi tipo di Google Map (terreno, satellite, strada o ibrido). E poiché le immagini vettoriali sono interattive, puoi quindi modificare la tua Google Map fino allo sfinimento. Il risultato finale ovvio qui è che sei in grado di fornire più usabilità.

Ricorda che le mappe di Google hanno una serie di controlli. Associa questi controlli alle funzionalità di MapSVG e farai letteralmente impazzire i tuoi utenti per l’eccitazione. Saranno come “Come diavolo hanno fatto?” Questa funzione ti consente di migliorare la tua mappa di Google evidenziando i punti di riferimento e rendendo tutto cliccabile.

Editor di CSS, JavaScript e modelli

A che serve una mappa che non puoi personalizzare o estendere? Roman sembra avere questo fondamento su ciò con gli eleganti editor CSS e JavaScript. Se conosci il tuo codice, puoi spingere le tue illustrazioni interattive al limite.

Per cominciare, puoi modellare le tue mappe e i tuoi diagrammi con i CSS come desideri e senza sudare. È possibile modellare molti elementi da descrizioni comandi, popover e altri contenitori di informazioni. Inoltre, puoi sfruttare la potenza di JavaScript per estendere la funzionalità predefinita della mappa.

Inoltre, ottieni un editor di modelli che ti aiuta a creare modelli personalizzati per popover, marcatori e suggerimenti. L’editor dei modelli è facile da usare e non ci aspettiamo che tu abbia problemi.

Pannello di controllo intuitivo con anteprima dal vivo

Lavorare con MapSVG è praticamente semplice grazie a una dashboard di amministrazione intuitiva che semplifica la creazione di mappe. La creazione di mappe e altre illustrazioni interattive con MapSVG è facilmente accoppiabile dall’inizio alla fine.

Inoltre, il plug-in è dotato di una funzionalità di anteprima dal vivo che consente di visualizzare le modifiche in tempo reale. Ora non devi chiederti come appariranno le tue mappe al completamento. Inoltre, non è necessario andare avanti e indietro (o aggiornare una pagina) per vedere come appaiono le mappe. Che dolce?

Mappe immagine

Abbiamo menzionato le mappe delle immagini pochi minuti fa, ma ho dovuto coprire questa funzione da sola perché penso che sia impressionante. Sappiamo già che MapSVG converte automaticamente i file SVG in mappe interattive. Basta disegnare un file SVG, caricarlo e personalizzarlo.

Ma sapevi che puoi anche creare mappe da immagini PNG e JPEG? Sembra interessante adesso, giusto? MapSVG è dotato di brillanti strumenti di disegno che ti consentono di creare mappe interattive (cliccabili) da immagini raster. Quanto è utile? Puoi disegnare piani interattivi di case, progetti, percorsi, piani di città, mappe dei posti a sedere e molto altro.

Grazie a queste funzionalità e sorprendente supporto, nulla dovrebbe impedirti di creare mappe e illustrazioni interattive da questa galassia. Il cielo è il limite qui ragazzi poiché MapSVG è un plug-in di mappe senza fronzoli (e probabilmente il migliore) per WordPress.

Come impostare MapSVG e creare una mappa

Configurare MapSVG è facile come installare qualsiasi altro tipico plug-in WordPress. Sei pronto per iniziare a creare mappe interattive non appena installi e attivi il plug-in. Non è necessario configurare nulla poiché MapSVG funziona immediatamente.

Ottieni MapSVG

Facciamo un’esperienza pratica. Prendi una copia di MapSVG e segui le seguenti istruzioni. Accedi alla tua dashboard di amministrazione di WordPress e vai a Plugin> Aggiungi nuovo.

recensione del plugin wordpress mapsvg

Quindi, premi il tasto Caricare pulsante (1)Scegli file (2), e premi il Installa ora (3) pulsante come mostrato di seguito.

recensioni di mapsvg

Attendere il completamento del processo di installazione, quindi fare clic su Attiva Plugin pulsante.

recensione di mapsvg

E questo è tutto; il plugin è pronto per l’uso dopo l’attivazione. Clicca sul MapSVG elemento sull’amministratore di WordPress per avviare il pannello di controllo.

mapsvg

Fin qui tutto bene, penso che sarai d’accordo sul fatto che il processo è semplice. Sul pannello di controllo, puoi scegliere una delle mappe predefinite, creare una mappa di Google (è necessario prima l’integrazione, che è facile come incollare una chiave API), creare una mappa di immagini, caricare un file SVG o scaricare un File SVG con mappa di Google.

Se hai bisogno di aiuto per creare una mappa, puoi ottenere un aiuto rapido facendo clic EsercitazioniSupporto collegamenti nella parte superiore del pannello di controllo. Scegliamo una delle mappe preesistenti. Andrò con la Cina perché tutto è fatto lì al giorno d’oggi comunque ��

N / B: Lo sviluppatore consiglia di utilizzare geo-calibrato mappe anziché non-calibrato mappe perché …

… le mappe geo-calibrate sono più recenti, hanno titoli Region e puoi aggiungere Marker tramite coordinate geografiche (latitudine / longitudine) o semplicemente inserendo un indirizzo che viene convertito automaticamente in coordinate. – Tutorial MapSVG

Scegli la Cina (o qualsiasi altra mappa che ti piace) dal Nuova mappa SVG menu a discesa. Se odi la barra di scorrimento, utilizza la casella di ricerca.

creando una nuova mappa in mapsvg

Nella schermata successiva, compila il Titolo e cambia il Testo del precaricatore se sei così propenso. Nella stessa schermata, puoi impostare le dimensioni della mappa, disattivare il design reattivo (è attivato per impostazione predefinita, quindi non toccare il quadrante), attiva i suggerimenti e i popover tra le altre cose.

Noterai anche che la mappa è già suddivisa in regioni (province cinesi nel nostro caso) e sono già cliccabili! Inoltre, familiarizza con gli altri controlli incluso il Menù menu a discesa.

Cerchiamo di cambiare alcuni colori e avere un’idea del plugin. Navigare verso Menu> Colori come mostrato di seguito.

modifica dei colori delle mappe nel plugin wordpress mapsvg

Il Colori lo schermo ti aiuta a scegliere i colori dei tuoi sogni. Quello che voglio dire è che non c’è limite ai colori che vorresti usare. Lavora con il selettore colori fino a quando non hai qualcosa che ti piace. Andrò con sfumature di blu perché WordPress lo è bae ��

Scegli i tuoi colori e non dimenticare di premere il tasto Salva Ctrl + S pulsante come illustrato di seguito.

Vedere? Ti ho detto che MapSVG è facile da usare. Con un paio di clic, ho cambiato i colori della mia mappa e mi sento bene, proprio come una volta, molti anni fa, quando mi sono classificato primo in Google. Modificare qualsiasi altra parte della mappa è altrettanto facile e per dimostrare il mio punto, aggiungerò dei suggerimenti perché sarebbe divertente.

Aggiunta di descrizioni comandi in MapSVG

Quindi, come si aggiungono i suggerimenti che vengono visualizzati quando si passa il mouse su una regione sulla mappa? È facile e ti mostrerò come tra un momento.

A proposito, se qualcosa non è chiaro per un motivo o per un altro, non esitare a dare un’occhiata al funzionario Tutorial e documentazione di MapSVG. Meglio ancora, vai alla sezione dei commenti alla fine di questo post e chiamerò Thor solo per te. Quel martello risolve tutto ��

A parte questo, l’aggiunta di tooltip comporta l’aggiunta di un modello (ricordi l’editor dei modelli che abbiamo menzionato prima?). Per quello, vai a Menu> Modelli e quindi scegliere Descrizione comando regione. 

aggiunta di suggerimenti nel plugin wordpress mapsvg

Quindi, aggiungi il seguente codice nell’editor dei modelli e premi il tasto Salva Ctrl + S pulsante come mostrato sopra.

Provincia: {{titolo}}

Il codice sopra è semplice HTML con Tag manubrio. Se desideri mostrare solo il titolo della tua regione, utilizza il tag {{title}}. Puoi anche definire i tuoi campi personalizzati come imparerai tra poco. Ma prima, attiviamo la funzionalità dei suggerimenti.

Navigare verso Menu> Impostazioni e accendi il Tooltips caratteristica come illustrato di seguito.

recensioni di mapsvg

Come puoi vedere nello screenshot qui sopra, i nostri suggerimenti sono attivi. Tuttavia, ho detto che ti mostrerò come aggiungere campi personalizzati in modo che tu possa arricchire i tuoi suggerimenti in modi inimmaginabili. Supponiamo che desideri aggiungere foto e ulteriori informazioni ai suggerimenti. Come lo faresti? Per questo, chiediamo il oggetti di database abbiamo menzionato prima.

Aggiunta di campi personalizzati tramite oggetti di database

MapSVG ti consente di aggiungere campi personalizzati alle tue mappe. Abbiamo già il campo {{title}}, ma vediamo come possiamo aggiungere altri campi personalizzati. Hai una scelta di campi personalizzati tra cui testo, area di testo, casella di controllo, immagini, e così via. Aggiungiamo alcune immagini alla provincia di Nei Mongol.

Vai a Menu> Regioni e fai clic su Modifica campi come evidenziato nell’immagine qui sotto.

aggiunta di campi personalizzati in MapSVG

Nella schermata successiva, premi il tasto Immagine pulsante e quindi il Salva campi pulsante come mostrato di seguito.

Salvare le modifiche facendo clic su Salva Ctrl + S pulsante. Ricorda sempre di salvare le modifiche.

Successivamente premi il Elenco pulsante come mostrato nell’immagine qui sotto.

Passa la tua mappa a Modifica regioni e fare clic su una regione (abbiamo scelto Nei Mongol). Dovresti vedere il tuo nuovo campo personalizzato (immagini) a destra. Colpire il Navigare pulsante. Vedi l’immagine sotto.

Nella schermata successiva, aggiungi le tue immagini e premi il tasto Scegli immagini pulsante.

Verrai reindirizzato al Modifica regioni schermata in cui è necessario fare clic su OK (1) pulsante. Quindi, fare clic su Salva Ctrl + S (2) pulsante e poi tornare a Anteprima (3) modalità come mostrato di seguito.

Se provi a passare il mouse su Nei Mongol a questo punto, le immagini non verranno visualizzate nella descrizione comandi. Perché? Bene, non abbiamo creato un modello per le immagini. Facciamo proprio questo minuto.

Navigare verso Menu> Modelli> Descrizione comando regione e cambia il codice in questo:

Provincia: {{titolo}}
Prima immagine:


Tutte le immagini:
{{#each images}} {{/ogni}}

Ecco un’immagine per ulteriori illustrazioni. Ricorda di premere il tasto Salva pulsante.

Ora prova a passare il mouse sulla regione selezionata (Nei Mongol nel nostro caso). Dimmi cosa vedi. Questo è ciò che è sul mio schermo.

Abbastanza pulito, vero? Hai appena imparato come aggiungere campi personalizzati alle tue mappe MapSVG. L’aggiunta di popover e marcatori è anche facile come una torta. Inoltre, finché conosci queste nozioni di base, sei bravo a creare qualsiasi mappa / diagramma interattivo sotto il sole.

Lavorare con MapSVG è una questione di quarta elementare, soprattutto perché Roman Stepanov offre un ottimo supporto e una guida straordinaria tramite tutorial. Per visualizzare la tua mappa sul tuo sito WordPress, salva le modifiche e vai a Pagine> Aggiungi nuovo.

Quindi, premi il tasto MapSVG come mostrato sopra e scegli la tua mappa. Questo aggiunge lo shortcode [mapsvg id = “17 ″ title =” China “] alla tua pagina WordPress. In ogni caso, sentiti libero di aggiungere la mappa ovunque sul tuo sito usando lo shortcode. Non preoccuparti, le mappe che crei con MapSVG sono reattive al 100%, il che significa che avranno un bell’aspetto su più dispositivi.

Successivamente, premi pubblica e vedi i risultati sul frontend.

Conclusione

Saremmo qui tutto il giorno se avessimo esaminato ogni funzione presente, ma ti incoraggio a ottenere la tua copia del MapSVG Plugin per mappe WordPress e fare un test drive. Tra te e me, è l’unico plugin per mappe WordPress di cui avrai mai bisogno.

Hai una domanda o un suggerimento? Non esitare a contattare la sezione commenti qui sotto. Saluti!

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