Revisión del complemento MapSVG: Crear mapas interactivos en WordPress

Revisión del complemento MapSVG: Crear mapas interactivos en WordPress

MapSVG es un ingenioso complemento de WordPress que te ayuda a crear mapas interactivos y receptivos en tu sitio de WordPress. Gracias a un conjunto de características agradables, puede convertir cualquier archivo SVG en un mapa interactivo. Eso no es todo, puede crear planos de planta detallados, infografías, mapas de Google, mapas de Chloropleth, mapas de imágenes y mucho más..


En esta revisión, observamos las características que hacen de MapSVG uno de los mejores complementos de mapeo para WordPress en la web. También probamos el plugin, así que quédate y lee hasta el final. Este es definitivamente un buen negocio, así que cómprate una taza de café y vamos a rodar.

Mapas interactivos de MapSVG para WordPress

Traído a usted por el desarrollador extraordinario Roman Stepanov, MapSVG hace que crear mapas interactivos sea fácil y divertido. Me lo pasé muy bien jugando con las diversas opciones, aunque primero tuve que leer la documentación. Dicho esto, veamos las funciones disponibles en MapSVG.

Más de 100 mapas listos

Para ayudarlo a comenzar, MapSVG viene con más de 100 mapas geocalibrados. Hay un mapa mundial y ya está subdividido en regiones (países) en las que se puede hacer clic. Luego tiene mapas de países con los respectivos estados / provincias. También obtienes algunos mapas especiales.

Y como la mayoría de los mapas están calibrados, puede agregar marcadores a los mapas utilizando una dirección o coordenadas. Además de eso, puede crear sus propios mapas SVG y subirlos a MapSVG.

Todo lo que tiene que hacer es crear una imagen SVG usando cualquier software de edición de vectores como Inkscape o Adobe Illustrator, cargar la maldita cosa y personalizarla.

¿Sabes qué significa esto? Significa que puede diseñar diagramas interactivos y visualizar estadísticas (y, en general, mejorar la experiencia del usuario) sin tener que inclinarse hacia atrás.

Objetos de base de datos

MapSVG le permite crear objetos y agregarlos a áreas específicas de su mapa. Esto le permite enriquecer sus mapas con información que ofrece a sus visitantes una experiencia inmersiva..

Para fines de ilustración, supongamos por un minuto que usted es un agente de bienes raíces con propiedades para vender en todo el país. Le está yendo realmente bien y le gustaría mostrar las propiedades disponibles en un mapa. Le gustaría mostrar información como tamaño, dirección, precio, fotos y cosas así..

MapSVG le permite agregar estos detalles a una base de datos y luego adjuntar la información a una o varias áreas de su mapa. Cada vez que un usuario hace clic en el área que usted define, digamos un estado, los detalles se muestran en una ventana emergente agradable, vista detallada o información sobre herramientas..

Directorio filtrable y con capacidad de búsqueda

Como si agregar objetos de la base de datos no fuera suficiente, MapSVG le permite crear un directorio y mostrarlo junto a su mapa. De acuerdo con nuestra analogía inmobiliaria, es posible que desee mostrar todas las propiedades (o agentes) disponibles en un determinado estado. MapSVG hace esto muy posible.

Los usuarios pueden filtrar elementos en el directorio utilizando filtros desplegables o un cuadro de búsqueda. Además, los usuarios pueden filtrar objetos haciendo clic en un área específica del mapa. Esta función de directorio hace que incluso los diagramas y mapas más complejos sean fáciles de comprender. Además, los usuarios pueden encontrar información fácilmente, lo cual es una ventaja para su UX.

Mejora Google Maps

¿Mencioné que puede integrar MapSVG con Google Maps? Sí, puedes y solo necesitas una clave API de Google. Por lo general, no puede personalizar Google Maps ampliamente, lo que es o puede ser limitante en algunos escenarios. MapSVG te permite superar este desafío.

¿Cómo? Puede superponer mapas vectoriales sobre cualquier tipo de Google Map (terreno, satélite, carretera o híbrido). Y dado que las imágenes vectoriales son interactivas, puede modificar su Google Map hasta que se caiga. El resultado final obvio aquí es que puedes proporcionar más usabilidad.

Recuerde que los mapas de Google vienen con un conjunto de controles. Combine estos controles con las funciones de MapSVG y enloquecerá literariamente a sus usuarios con emoción. Serán como, “¿Cómo diablos hicieron eso?” Esta característica le permite mejorar su mapa de Google resaltando puntos de referencia y haciendo que se pueda hacer clic.

CSS, JavaScript y editores de plantillas

¿Para qué sirve un mapa que no puede personalizar o ampliar? Roman parece tener esto basado en ingeniosos editores CSS y JavaScript. Mientras conozca el código, puede llevar sus ilustraciones interactivas al límite.

Para empezar, puede diseñar sus mapas y diagramas con CSS como desee y sin sudar. Puede diseñar muchos elementos de información sobre herramientas, elementos emergentes y otros contenedores de información. Además de eso, puede aprovechar el poder de JavaScript para ampliar la funcionalidad del mapa predeterminado.

Además, obtienes un editor de plantillas que te ayuda a crear plantillas personalizadas para popovers, marcadores e información sobre herramientas. El editor de plantillas es fácil de usar, no esperamos que tenga ningún problema.

Panel de control intuitivo con vista previa en vivo

Trabajar con MapSVG es bastante sencillo gracias a un panel de control intuitivo que facilita la creación de mapas. La creación de mapas y otras ilustraciones interactivas con MapSVG se combina fácilmente de principio a fin.

Además de eso, el complemento viene con una función de vista previa en vivo que le permite ver sus cambios en tiempo real. Ahora no tiene que preguntarse cómo se verán sus mapas al finalizar. Además, no tiene que ir y venir (o actualizar una página) para ver cómo se ven sus mapas. Que dulce?

Mapas de imagen

Mencionamos mapas de imágenes hace unos minutos, pero tuve que cubrir esta función por sí sola porque creo que es impresionante. Ya sabemos que MapSVG convierte los archivos SVG en mapas interactivos automáticamente. Simplemente dibuje un archivo SVG, cárguelo y personalícelo.

Pero, ¿sabía que también puede crear mapas a partir de imágenes PNG y JPEG? Suena interesante ahora, ¿verdad? MapSVG viene con brillantes herramientas de dibujo que le permiten crear mapas interactivos (cliqueables) a partir de imágenes ráster. ¿Cómo es esto útil? Puede dibujar planos de casas interactivos, planos, rutas, planos de ciudades, mapas de asientos y mucho más..

Gracias a estas características y sorprendente apoyo, nada debería impedirte crear mapas e ilustraciones interactivas fuera de esta galaxia. El cielo es el límite aquí, chicos, ya que MapSVG es un complemento de mapas sin sentido (y probablemente el mejor) para WordPress.

Cómo configurar MapSVG y crear un mapa

Configurar MapSVG es tan fácil como instalar cualquier otro complemento típico de WordPress. Está listo para comenzar a crear mapas interactivos tan pronto como instale y active el complemento. No necesita configurar nada, ya que MapSVG funciona de inmediato.

Obtener MapSVG

Vamos a tener un poco de experiencia práctica. Tome una copia de MapSVG y siga las siguientes instrucciones. Inicie sesión en su panel de administración de WordPress y navegue hasta Complementos> Agregar nuevo.

revisión del complemento de wordpress de mapsvg

A continuación, presione el Subir botón (1)Elegir archivo (2), y golpear el Instalar ahora (3) botón como se muestra a continuación.

mapasvg opiniones

Espere a que finalice el proceso de instalación y luego haga clic en Activar complemento botón.

revisión de mapsvg

Y eso es; El complemento está listo para usar después de la activación. Haga clic en el MapSVG elemento en el administrador de WordPress para iniciar el panel de control.

mapasvg

Hasta ahora todo bien, creo que estará de acuerdo en que el proceso es simple. En el panel de control, puede elegir uno de los mapas prefabricados, crear un mapa de Google (primero necesita integración, que es tan fácil como copiar y pegar una clave API), crear un mapa de imagen, cargar un archivo SVG o descargar un Archivo SVG con mapa de Google.

Si necesita ayuda para crear un mapa, puede obtener ayuda rápida haciendo clic en TutorialesApoyo enlaces en la parte superior del panel de control. Elija uno de los mapas preexistentes. Iré con China porque todo se hace allí hoy en día de todos modos ��

NÓTESE BIEN: El desarrollador recomienda usar geocalibrado mapas en lugar de no calibrado mapas porque …

… Los mapas calibrados geográficamente son más nuevos, tienen títulos de Región y puede agregar Marcadores por coordenadas geográficas (latitud / longitud) o simplemente ingresando una dirección que se convierte en coordenadas automáticamente. – Tutoriales de MapSVG

Elija China (o cualquier otro mapa que desee) de Nuevo mapa SVG Menú desplegable. Si odias la barra de desplazamiento, puedes usar el cuadro de búsqueda..

creando un nuevo mapa en mapsvg

En la siguiente pantalla, complete el Título y cambiar el Texto precargador si estás tan inclinado En la misma pantalla, puede configurar el tamaño de su mapa, desactivar el diseño receptivo (está activado de forma predeterminada, así que no toque el dial), activar la información sobre herramientas y elementos emergentes, entre otras cosas..

También notará que el mapa ya está dividido en regiones (provincias de China en nuestro caso) y ya se puede hacer clic en ellas. Además, familiarícese con los otros controles, incluido el Menú Menú desplegable.

Cambiemos algunos colores y tenga una idea del complemento. Navegar a Menú> Colores Como se muestra abajo.

edición de colores de mapas en el complemento de wordpress de mapsvg

los Colores La pantalla te ayuda a elegir los colores de tus sueños. Lo que quiero decir es que no hay límite para los colores que te gustaría usar. Simplemente trabaje el selector de color hasta que tenga algo que le guste. Iré con tonos de azul porque WordPress es bae ��

Elige tus colores y no olvides presionar el Guardar Ctrl + S botón como ilustramos a continuación.

¿Ver? Te dije que MapSVG es fácil de usar. Con un par de clics, cambié los colores de mi mapa y se siente bien, al igual que una vez, hace muchos años, cuando ocupé el primer lugar en Google. Editar cualquier otra parte del mapa es igualmente fácil, y para probar mi punto, agregaré información sobre herramientas porque sería divertido.

Agregar información sobre herramientas en MapSVG

Entonces, ¿cómo agrega información sobre herramientas que aparece cuando pasa el mouse sobre una región en su mapa? Es fácil y te mostraré cómo en un momento.

Por cierto, si algo no está claro por una razón u otra, no dude en consultar al funcionario Tutoriales y documentación de MapSVG. Mejor aún, vaya a la sección de comentarios al final de esta publicación y convocaré Thor solo para ti. Ese martillo resuelve todo ��

Aparte de eso, agregar información sobre herramientas implica agregar una plantilla (¿recuerda el editor de plantillas que mencionamos anteriormente?). Para eso, navegue a Menú> Plantillas y luego elegir Información sobre herramientas de la región. 

agregar información sobre herramientas en el complemento de wordpress de mapsvg

A continuación, agregue el siguiente código en el editor de plantillas y presione el Guardar Ctrl + S botón como se muestra arriba.

Provincia: {{título}}

El código anterior es HTML simple con Etiquetas de manillar. Si desea mostrar solo el título de su región, use la etiqueta {{title}}. También puede definir sus propios campos personalizados, como aprenderá en un momento. Pero primero, activemos la función de información sobre herramientas.

Navegar a Menú> Configuraciones y enciende el Información sobre herramientas característica como ilustramos a continuación.

mapasvg opiniones

Como puede ver en la captura de pantalla anterior, nuestra información sobre herramientas está activa. Aún así, mencioné que le mostraré cómo agregar campos personalizados para que pueda enriquecer su información sobre herramientas de formas inimaginables. Supongamos que desea agregar fotos y más información a su información sobre herramientas. ¿Cómo lo harías? Para eso, hacemos un llamado al objetos de base de datos mencionamos anteriormente.

Agregar campos personalizados a través de objetos de base de datos

MapSVG le permite agregar campos personalizados a sus mapas. Ya tenemos el campo {{title}}, pero veamos cómo podemos agregar más campos personalizados. Tiene una opción de campos personalizados que incluyen texto, área de texto, casilla de verificación, imágenes, y así. Agreguemos algunas imágenes a la provincia de Nei Mongol.

Ir Menú> Regiones y haga clic en Editar campos botón como destacamos en la imagen a continuación.

Agregar campos personalizados en MapSVG

En la siguiente pantalla, presione el Imagen botón y luego el Guardar campos botón como se muestra a continuación.

Guarde sus cambios haciendo clic en el Guardar Ctrl + S botón. Recuerde siempre guardar sus cambios.

Luego presiona el Lista botón como se muestra en la imagen a continuación.

Cambia tu mapa a Editar regiones y haga clic en una región (elegimos Nei Mongol). Debería ver su nuevo campo personalizado (Imágenes) a la derecha. Golpea el Vistazo botón. Ver imagen abajo.

En la siguiente pantalla, agregue sus imágenes y presione el Elige imágenes botón.

Serás redirigido de nuevo a Editar regiones pantalla donde debe hacer clic en el OK (1) botón. A continuación, haga clic en el Guardar Ctrl + S (2) botón y luego volver a Vista previa (3) modo como se muestra a continuación.

Si intenta pasar el mouse sobre Nei Mongol en este punto, las imágenes no aparecerán en la información sobre herramientas. ¿Por qué? Bueno, no hemos creado una plantilla para las imágenes. Hagamos eso en este momento.

Navegar a Menú> Plantillas> Información sobre herramientas de región y cambia el código a esto:

Provincia: {{título}}
Primera imagen


Todas las imágenes:
{{# cada una de las imágenes}} {{/cada}}

Aquí hay una imagen para más ilustración. Recuerda golpear el Salvar botón.

Ahora, intente pasar el mouse sobre la región seleccionada (Nei Mongol en nuestro caso). Dime que ves. Esto es lo que hay en mi pantalla.

Bastante ordenado, ¿verdad? Acaba de aprender cómo agregar campos personalizados a sus mapas MapSVG. Agregar popovers y marcadores también es tan fácil como un pastel. Además, siempre que conozca estos conceptos básicos, puede crear cualquier mapa / diagrama interactivo bajo el sol..

Trabajar con MapSVG es cosa de estudiantes de cuarto grado, especialmente porque Roman Stepanov ofrece un gran apoyo y una guía increíble a través de tutoriales. Para mostrar su mapa en su sitio de WordPress, guarde sus cambios y navegue hasta Páginas> Agregar nuevo.

A continuación, presione el MapSVG botón como se muestra arriba y elija su mapa. Esto agrega el shortcode [mapsvg id = ”17 ″ title =” China ”] a tu página de WordPress. De cualquier manera, siéntase libre de agregar el mapa en cualquier parte de su sitio utilizando el código corto. No se preocupe, los mapas que crea con MapSVG responden al 100%, lo que significa que se verán geniales en múltiples dispositivos.

A continuación, presione publicar y vea los resultados en la interfaz.

Conclusión

Estaríamos aquí todo el día si revisáramos cada función que hay, pero le animo a que obtenga su propia copia del Complemento de mapa de WordPress MapSVG y darle una prueba de manejo. Entre usted y yo, es el único complemento de mapas de WordPress que necesitará.

¿Tienes alguna pregunta o sugerencia? No dude en comunicarse a través de la sección de comentarios a continuación. Salud!

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