MapSVG Review Plugin: crea mapes interactius a WordPress

MapSVG Review Plugin: crea mapes interactius a WordPress

MapSVG és un extens complement de WordPress que us ajuda a crear mapes interactius i de resposta al vostre lloc de WordPress. Gràcies a un conjunt de funcions agradables, podeu convertir qualsevol fitxer SVG en un mapa interactiu. Això no és tot, podeu crear plans detallats, infografies, mapes de Google, mapes de Chloropleth, mapes d’imatges i molt més..


En aquesta revisió, analitzem les funcions que fan de MapSVG un dels millors complements de mapatge per a WordPress del web. També posem a prova la unitat del connector, de manera que seguiu i llegiu fins al final. Sens dubte, això és un bon negoci, per tant, feu-vos una tassa de cafè i deixeu-ho rodar.

Mapes interactius MapSVG per WordPress

Presentat per vostè pel desenvolupador extraordinaire Roman Stepanov, MapSVG facilita i diverteix la creació de mapes interactius. Em vaig passar molt bé jugant amb les diverses opcions, tot i que primer havia de llegir la documentació. Dit això, vegem les funcions disponibles a MapSVG.

100+ mapes llestos

MapSVG us ofereix més de 100 mapes geo calibrats per ajudar-vos a colpejar el terreny. Hi ha un mapa mundial i ja es subdivideix en regions (països) clicables. Després teniu mapes de països amb els estats / províncies respectius. També obté uns quants mapes especials.

I ja que la majoria dels mapes estan calibrats, podeu afegir marcadors als mapes mitjançant una adreça o coordenades. A més, podeu crear els vostres mapes SVG i penjar-los a MapSVG.

Tot el que heu de fer és crear una imatge SVG utilitzant qualsevol programari d’edició de vectors com Inkscape o Adobe Illustrator, pujar la maleïda cosa i personalitzar-la.

Sabeu què vol dir això? Significa que podeu dissenyar diagrames interactius i visualitzar estadístiques (i millorar, en general, l’experiència de l’usuari) sense doblar-se cap enrere.

Objectes de la base de dades

MapSVG us permet crear objectes i afegir-los a zones concretes del vostre mapa. Això permet enriquir els seus mapes amb informació que ofereix als visitants del web una experiència immersiva.

A títol d’il·lustració, suposem que per un minut ets un agent immobiliari amb propietats per vendre a tot el país. Et trobes bé i voldries mostrar les propietats disponibles en un mapa. T’agradaria mostrar informació com ara mida, adreça, preu, fotos i coses similars.

MapSVG us permet afegir aquests detalls a una base de dades i, a continuació, adjuntar la informació a una o a diverses àrees del vostre mapa. Sempre que un usuari faci clic a l’àrea que definiu, digueu un estat, els detalls es mostren en una bona finestra emergent, visualització de detalls o informació.

Directori filtrable i cercable

Com si l’afegit d’objectes de base de dades no sigui suficient, MapSVG us permet crear un directori i mostrar-lo al costat del vostre mapa. Si aneu amb la nostra analogia immobiliària, potser voldreu mostrar totes les propietats (o agents) disponibles en un estat determinat. MapSVG ho fa molt possible.

Els usuaris poden filtrar els elements del directori mitjançant filtres desplegables o un quadre de cerca. A més, els usuaris poden filtrar objectes fent clic a una àrea específica del mapa. Aquesta característica de directori facilita la comprensió dels diagrames i mapes més complexos. A més, els usuaris poden trobar informació fàcilment, que és un avantatge per al vostre UX.

Millora Google Maps

He esmentat que pots integrar MapSVG amb Google Maps? Sí, només podeu necessitar una clau d’API de Google. Normalment, no podeu personalitzar àmpliament Google Maps, que és o pot estar limitant en alguns escenaris. MapSVG us permet superar aquest repte.

Com? Podeu calcar mapes vectorials a qualsevol tipus de Google Map (terreny, satèl·lit, carretera o híbrid). I ja que les imatges vectorials són interactives, podeu modificar el mapa de Google fins que no aparegui. El resultat final òbviament aquí és que podreu proporcionar més usabilitat.

Recordeu que els mapes de Google inclouen un conjunt de controls. Combina aquests controls amb funcions de MapSVG i literàriament tornaràs a embogir els usuaris amb il·lusió. Seran com: “Què diables ho van fer?” Aquesta característica us permet millorar el vostre mapa de Google ressaltant fites i fent clic en qualsevol cosa.

Editors de CSS, JavaScript i plantilles

Quin és l’ús d’un mapa que no podeu personalitzar ni ampliar? Roman sembla que ha fonamentat el que amb editors CSS i JavaScript magnífics. Sempre que conegueu la manera de codificar, podeu impulsar les il·lustracions interactives fins al límit.

Per començar, podeu estilitzar els vostres mapes i diagrames amb CSS com vulgueu i sense fer-vos passar la suor. Podeu posar en estil molts elements des de consells d’eines, aparells emergents i altres contenidors d’informació. A més, podeu aprofitar la potència de JavaScript per ampliar la funcionalitat del mapa per defecte.

A més, teniu un editor de plantilles que us ajudarà a crear plantilles personalitzades per a finestres emergents, marcadors i suggeriments. L’editor de plantilles és fàcil d’utilitzar, no esperem que tingueu cap problema.

Panell de control intuïtiu amb vista prèvia en directe

El treball amb MapSVG és bastant senzill gràcies a un intuït quadre de comandament que fa que la creació de mapes faci brisa. La creació de mapes i altres il·lustracions interactives amb MapSVG es combina amb la facilitat del principi al final.

A més, el connector inclou una funció de previsualització en directe que us permet veure els vostres canvis en temps real. Ara no us haureu de preguntar com es veuran els vostres mapes en completar-los. A més, no haureu d’anar cap endavant (ni actualitzar una pàgina) per veure com es veuen els vostres mapes. Què dolç?

Mapes d’imatges

Hem esmentat mapes d’imatges fa uns minuts, però he hagut de cobrir aquesta funció per si sola perquè crec que és impressionant. Ja sabem que MapSVG converteix els fitxers SVG en mapes interactius de forma automàtica. Només heu de dibuixar un fitxer SVG, penjar-lo i personalitzar-lo.

Però, sabíeu que també podeu crear mapes a partir d’imatges PNG i JPEG? Em sembla interessant, no? MapSVG disposa d’eines de dibuix brillants que permeten crear mapes interactius (clicables) a partir d’imatges de ràster. Com és útil? Podeu dibuixar plans interactius de cases, models, rutes, plànols de ciutat, gràfics de seients i molt més.

Gràcies a aquestes característiques i sorprenent suport, res no us impedeix crear cartes i il·lustracions interactives fora d’aquesta galàxia. El cel és el límit aquí nois, ja que MapSVG és un complement de mapa no-absurd (i probablement el millor) per a WordPress.

Com configurar MapSVG i crear un mapa

La configuració de MapSVG és tan fàcil com instal·lar qualsevol altre connector típic de WordPress. Ja esteu preparats per començar a crear mapes interactius tan bon punt instal·leu i activeu el connector. No cal que configureu res, ja que MapSVG funciona directament fora de la caixa.

Obtén MapSVG

Tenim una experiència pràctica. Agafeu una còpia de MapSVG i seguiu les instruccions següents. Inicieu la sessió al vostre tauler de control de WordPress i navegueu a Complements> Afegir nou.

revisió de complements de wordpress mapsvg

A continuació, premeu el botó Carregueu botó (1)Trieu fitxer (2), i toqueu el botó Instal·la ara (3) com es mostra a continuació.

mapes de comentaris

Espereu que es finalitzi el procés d’instal·lació i feu clic a Activa el complement botó.

revisió de mapsvg

I ja està; el connector està llest per utilitzar després d’activar-lo. Feu clic a MapSVG element de l’administrador de WordPress per llançar el tauler de control.

mapsvg

Fins al moment tan bo, crec que esteu d’acord amb el procés senzill. Al tauler de control, podeu triar un dels mapes predefinits, crear un mapa de Google (necessita primer la integració, tan fàcil com copiar enganxar una clau API), crear un mapa d’imatges, carregar un fitxer SVG o descarregar un fitxer SVG. Arxiu SVG amb Google map.

Si necessiteu ajuda per crear un mapa, podeu obtenir ajuda ràpida fent clic TutoriesAssistència enllaços a la part superior del tauler de control. Escollim un dels mapes que ja existien. Aniré amb la Xina perquè tot es fa allà avui dia de totes maneres ��

N / B: El desenvolupador recomana utilitzar geo calibrat en comptes de no calibrat mapes perquè …

… els mapes geo calibrats són més recents, tenen títols de Regió i podeu afegir marcadors mitjançant coordenades geo (latitud / longitud) o simplement introduint una adreça que s’està convertint automàticament en coordenades. – Tutorials MapSVG

Trieu la Xina (o qualsevol altre mapa que us agradi) Nou mapa SVG menú desplegable. Si odies la barra de desplaçament, no dubteu a utilitzar el quadre de cerca.

creació de mapa nou a mapsvg

A la pantalla següent, empleneu la secció Títol i canvieu la Text del precargador si esteu tan inclinats. A la mateixa pantalla, podeu definir la mida del mapa, desactivar el disseny sensible (està activat de manera predeterminada, així que no toqueu el marc), activar els consells d’eines i els aparells emergents entre d’altres..

També notareu que el mapa ja està dividit en regions (províncies de la Xina en el nostre cas) i ja es poden fer clic. A més, familiaritzeu-vos amb els altres controls, inclòs el Menú menú desplegable.

Canviem alguns colors i tinguem una idea del complement. Desplaceu-vos a Menú> Colors com es mostra a continuació.

edició de colors del mapa al plugin de mapes de wordvg

El Colors la pantalla us ajuda a triar els colors dels vostres somnis. El que vull dir és que no hi ha cap límit als colors que voldríeu utilitzar. Només heu de treballar el selector de colors fins que tingueu alguna cosa que us agradi. Aniré amb tons blaus perquè és WordPress bae ��

Trieu els vostres colors i no us oblideu de colpejar Desa Ctrl + S com il·lustrem a continuació.

Veure? T’he dit que MapSVG és fàcil d’utilitzar. Amb un parell de clics, vaig canviar els colors del mapa i em sembla bé, tal i com feia molts anys, quan vaig ocupar el primer lloc a Google. Editar qualsevol altra part del mapa és igual de fàcil i, per demostrar el meu punt, afegiré suggeriments perquè seria divertit.

Afegint indicacions d’eines a MapSVG

Llavors, com afegir consells d’eines que apareixen quan feu un ratolí sobre una regió al vostre mapa? És fàcil i et mostraré com en un moment.

Per cert, si no hi ha res clar per una raó o una altra, no dubteu en consultar el funcionari Tutories i documentació MapSVG. Millor encara, pegueu la secció de comentaris al final d’aquest missatge i convoco Thor només per tu. Aquell martell ho soluciona tot ��

Això de banda, afegir indicadors és afegir una plantilla (recordeu l’editor de plantilles que hem esmentat anteriorment?). Per això, aneu a Menú> Plantilles i després escolliu Consell d’informació de la regió. 

afegint suggeriments en el plugin de wordpress mapsvg

A continuació, afegiu el codi següent a l’editor de plantilles i feu clic a Desa Ctrl + S com es mostra a la part superior.

Província: {{title}}

El codi anterior és HTML senzill Etiquetes de manilla. Si només voleu mostrar el títol de la vostra regió, feu servir l’etiqueta {{title}}. També podeu definir els vostres propis camps personalitzats, mentre ho aprendreu en un moment. Però primer, activem la funció de consells.

Desplaceu-vos a Menú> Configuració i enceneu el botó Suggeriments funció tal com il·lustrem a continuació.

mapes de comentaris

Com es pot veure a la captura de pantalla de dalt, els nostres indicadors estan actius. Tot i així, he esmentat que us mostraré com afegir camps personalitzats perquè pugueu enriquir els vostres consells d’eines de manera inimaginable. Diguem que voldreu afegir fotos i més informació als vostres suggeriments. Com en faríeu? Per això, demanem el objectes de base de dades comentàvem anteriorment.

Addició de camps personalitzats mitjançant objectes de base de dades

MapSVG us permet afegir camps personalitzats als vostres mapes. Ja tenim el camp {{title}}, però anem a veure com podem afegir més camps personalitzats. Teniu una selecció de camps personalitzats, inclosos text, textarea, casella de selecció, imatges, etcètera. Afegim algunes imatges a la província mongola de Nei.

Anar a Menú> Regions i feu clic a Edita els camps com ressaltem a la imatge de sota.

afegint camps personalitzats a MapSVG

A la pantalla següent, premeu el botó Imatge i després el botó Desa els camps com es mostra a continuació.

Desa els canvis fent clic a la tecla Desa Ctrl + S botó. Recordeu-vos sempre de desar els canvis.

A continuació, toqueu el botó Llista com es mostra a la imatge de sota.

Canvia el mapa a Edita les regions i feu clic a una regió (vam seleccionar Nei Mongol). Hauríeu de veure el vostre camp personalitzat nou (Imatges) a la dreta. Feu clic a Navega botó. Vegeu la imatge a continuació.

A la pantalla següent, afegeix les teves imatges i toca la tecla Trieu Imatges botó.

Se us redirigirà a la secció Edita les regions en el qual heu de fer clic a la D’acord (1) botó. A continuació, feu clic a la tecla Desa Ctrl + S (2) i després torneu a Vista prèvia (3) mode com es mostra a continuació.

Si intenteu fer un ratolí sobre Nei Mongol en aquest moment, les imatges no apareixeran a la informació. Per què? Bé, no hem creat una plantilla per a les imatges. Anem a fer-ho bé en aquest moment.

Desplaceu-vos a Menú> Plantilles> Consell d’informació de regió i canvieu el codi per això:

Província: {{title}}
Primera imatge:


Totes les imatges:
{{# imatges de la imatge}} {{/ cada}}

Aquí teniu una imatge per a més il·lustració. No oblideu colpejar-lo Desa botó.

Ara, intenteu fer una cerca per la regió seleccionada (Nei Mongol en el nostre cas). Digue’m què veus. Això és el que hi ha a la meva pantalla.

Bastant ordenat, no? Acabeu d’aprendre a afegir camps personalitzats als vostres mapes MapSVG. Afegir popovers i retoladors també és tan fàcil com pastís. A més, sempre que coneguis aquests conceptes bàsics, és bo crear qualsevol mapa o diagrama interactiu sota el sol.

Treballar amb MapSVG és cosa dels quarts estudiants, sobretot perquè Roman Stepanov ofereix un gran suport i una sorprenent orientació mitjançant tutorials. Per visualitzar el mapa al vostre lloc de WordPress, deseu els canvis i navegueu a Pàgines> Afegir nous.

A continuació, premeu el botó MapSVG botó com es mostra a dalt i tria el mapa. Això afegeix el codi curt [mapsvg id = ”17 ″ title =” Xina ”] a la vostra pàgina de WordPress. De qualsevol manera, no dubteu a afegir el mapa a qualsevol lloc del vostre lloc mitjançant el codi curt. No us preocupeu, els mapes que creeu amb MapSVG tenen un 100% de resposta, cosa que significa que es veuran excel·lents en diversos dispositius.

A continuació, premeu publicar i veure els resultats al frontend.

Conclusió

Hi estaríem tot el dia si passéssim per cada funció que hi ha, però us animo a obtenir la vostra còpia Plugin de mapes de WordPress MapSVG i donar-li una unitat de prova. Entre tu i jo, és l’únic complement de mapa de WordPress que mai necessitaràs.

Té alguna pregunta o suggeriment? No dubteu en contactar a la secció de comentaris que hi ha a continuació. Salutacions!

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