Cómo mostrar un mapa vectorial receptivo en WordPress










  • En el pasado, agregar un mapa vectorial a un sitio de WordPress ha sido una tarea complicada. Editar archivos vectoriales, usar API o instalar bibliotecas de Javascript: agregar un mapa receptivo se complicó muy rápidamente.

    Hubo un pequeño puñado de complementos de mapas, pero ninguno hizo el trabajo sin mucha configuración o, de nuevo, conexiones API. Pero ahora hay un complemento excelente (¡y gratuito!) que hace un hermoso trabajo de mapeo de vectores; se llama Mapas geográficos interactivos .

    Crear un mapa de subdivisiones del mundo o un mapa de un país específico con Interactive Geo Maps es fácil. Puede hacerlo en 15 minutos, sin una API ni manipulando scripts adicionales.

    Puede personalizar la apariencia de las regiones, agregar información sobre herramientas e incluso agregar direcciones URL a las regiones para que se pueda hacer clic en ellas.

    Repasemos los pasos para crear un mapa para que pueda ver cómo funciona.

    Instalación del complemento de mapas geográficos interactivos

    Nada inusual aquí, solo siga los pasos habituales de instalación del complemento.

    Inicie sesión en su panel de administración de WordPress.

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo".

    pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo"

    En el cuadro "Buscar complementos...", ingrese "Geo Maps interactivos".

    busque el complemento de mapas geográficos interactivos de WordPress

    Una vez que haya localizado el complemento, haga clic en el botón "Instalar ahora".

    haga clic para instalar el complemento de mapas geográficos interactivos de WordPress

    Finalmente, haga clic en el botón "Activar".

    haga clic para activar el complemento de mapas geográficos interactivos de WordPress

    Uso de mapas geográficos interactivos

    Crear un nuevo mapa vectorial solo requiere unos pocos pasos.

    • Elegir el mapa
    • Definición de las regiones
    • Publicando el mapa

    Si bien esos son los únicos pasos obligatorios, también agregaremos marcadores para resaltar ubicaciones específicas dentro de una región.

    Empecemos.

    Crear un nuevo mapa

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Mapas" y haga clic en el enlace "Agregar nuevo".

    haga clic en el enlace "Agregar nuevo"

    Dale un título al mapa.

    ingrese un título de mapa

    Ahora, elijamos lo que se muestra en nuestro mapa vectorial receptivo.

    Seleccione un mapa de la región

    De forma predeterminada, el complemento muestra un mapa mundial. Pero hay cientos de mapas disponibles para elegir.

    Desplácese hacia abajo en la página "Agregar nuevo mapa" hasta la sección "Configuración del mapa".

    Haga clic en el menú desplegable "Mapa para mostrar" para ver los mapas disponibles.

    haga clic en el menú desplegable "Mapa para mostrar"

    Como notará, hay al menos dos versiones de la mayoría de los mapas, "Alta" y "Baja". Eso se refiere al detalle contenido en la imagen del mapa.

    La versión "Alta" del mapa requiere un archivo más grande que la versión "Baja". Entonces, por supuesto, la imagen "Alta" tardará más en cargarse.

    Tendrá que decidir cómo equilibrar los detalles y el rendimiento de sus mapas. Un sitio ocupado o un sitio con mucho tráfico móvil se beneficiará al usar los archivos más pequeños ("Bajos").

    Para esta demostración, usaré "World Great Lakes Ultra". Los archivos "Ultra" son incluso más grandes que los archivos "Altos", pero como este no es un sitio en vivo, está bien.

    Proyección

    La configuración de "Proyección" cambia la forma en que se representa el mapa .

    La configuración "Miller" es la proyección predeterminada, y la dejaré así por ahora. Pero si prefiere una proyección de Mercator, está disponible, así como AlbersUSA, si está trabajando con un mapa de los Estados Unidos.

    Puede agregar una descripción al campo "Descripción" para ayudarlo a realizar un seguimiento de múltiples mapas. Ya que solo estamos haciendo uno, lo dejaré en blanco.

    ajustes de proyección y descripción

    La pestaña Configuración visual

    Aquí es donde configura algunas de las opciones de visualización del mapa. Voy a dejar la configuración predeterminada aquí, pero puedes cambiarla:

      • Color de fondo
      • Color de los bordes
      • Ancho de los bordes
      • Altura del mapa
      • Ancho máximo del mapa
      • Familia tipográfica

    pestaña de configuración visual

    Definición de regiones en el mapa

    Ahora viene la parte divertida. Aquí es donde agregamos interactividad al mapa.

    Si guardáramos el mapa antes de definir las regiones, sería visible, pero no habría elementos interactivos.

    mapa sin interacción

    Se ve bien, pero no hace nada cuando pasamos el mouse por encima o hacemos clic. Arreglemos eso.

    Haga clic en la pestaña "Regiones".

    Verá la lista de valores predeterminados que comienzan con colores de relleno, de desplazamiento y vacíos. Puede cambiar los valores aquí. Voy a dejar los valores predeterminados.

    El siguiente valor es "Acción de clic" y vamos a cambiar eso. Controla lo que sucede cuando se hace clic en una región.

    Estableceremos la Acción de clic en "Abrir URL (pestaña nueva)", de esa manera podemos agregar URL en las que se puede hacer clic a las regiones.

    establezca la acción de clic en "Abrir URL (pestaña nueva)"

    Los valores predeterminados finales son para incluir o excluir regiones.

    Ingresar códigos de región (más sobre ellos en un minuto) en "Incluir regiones" muestra solo esas regiones. El resto del mapa desaparece.

    Ingresar códigos de región en "Excluir regiones" elimina esas áreas del mapa por completo.

    Por ejemplo, si ingresamos RU en "Excluir regiones", Rusia desaparece de nuestro mapa.

    ¿Qué pasó con Rusia?

    Bien, agreguemos una región

    Hay dos formas de agregar una región a nuestro mapa. Podemos hacer clic en el botón “Agregar nueva región” y buscar una, o seleccionar una región de la lista de las disponibles en la columna de la derecha.

    dos formas de seleccionar regiones

    Repasemos cada método, y usted puede decidir cuál funciona mejor para usted.

    Agregar una región haciendo clic en el botón "Agregar nueva región"

    Comience haciendo clic en el botón "Agregar nueva región".

    haga clic en el botón "Agregar nueva región"

    En el campo "Nombre", agregue el nombre de la región.

    Comience a escribir el nombre de la región en el campo "Código de la región" y aparecerá la selección de la región.

    Aquí estoy escribiendo "Canadá", y ves que la selección de Canadá aparece en verde, que incluye el código de región (CA). Haga clic en el campo verde para agregar el código de país.

    buscar códigos de región

    Si escribe su región y no aparece ningún código, eso significa que la región no está disponible en el mapa. Pruebe en un área cercana o consulte la lista en la columna de la derecha.

    El campo "Contenido de información sobre herramientas" es donde ingresa el texto que desea que se muestre cuando alguien se desplaza sobre la región.

    En el campo "Contenido de la acción", puede ingresar una URL que se abrirá cuando se haga clic en la región.

    información sobre herramientas y contenido de acción

    Haga clic en el botón "Agregar nueva región".

    Ahora Canadá está activo en nuestro mapa de vista previa, y si pasa el mouse sobre él, puede ver la información sobre herramientas.

    Canadá activo en el mapa de vista previa

    Adición de una región haciendo clic en la lista de regiones

    La segunda forma de agregar una región es hacer clic en el icono " + " junto a la región en la columna de la derecha. Este es el método que prefiero ya que rellena previamente algunos de los campos.

    Entonces, para agregar Suiza, nos desplazaremos hacia abajo hasta que lo encontremos y hagamos clic en el +.

    haga clic en + para agregar una región

    Ahora puede ver que el nombre, el código de región y la información sobre herramientas ya están completos. Puede editar el nombre y la información sobre herramientas, y agregar una URL de acción.

    Haga clic en el botón "Agregar nueva región".

    haga clic en el botón "Agregar nueva región"

    Puede continuar agregando regiones usando cualquiera de los métodos.

    Agregar zoom al mapa

    Después de agregar algunas regiones más, nuestro mapa comienza a verse más completo.

    mapa en la página sin zoom

    Pero, ¿y si queremos echar un vistazo más de cerca a algunas regiones? No hay función de zoom por defecto, pero es fácil de agregar.

    Vaya a la sección Configuración del complemento y haga clic en la pestaña "Características del mapa".

    haga clic en la pestaña "Características del mapa"

    Haga clic en el interruptor "Zoom" para activarlo, luego haga clic en el botón "Guardar".

    haga clic en "Zoom" haga clic en "Guardar"

    Ahora cuando vemos el mapa, podemos acercar y alejar.

    hacer zoom en el mapa

    Agregar marcadores de ubicación

    Definir nuestras regiones y agregar texto y enlaces hace que el mapa sea genial. Pero podemos hacerlo aún mejor agregando algunos marcadores de ubicación e información.

    En nuestra demostración aquí, he definido algunos países que he visitado, pero ¿cómo podemos agregar también las ciudades?

    Hay dos formas de agregar marcadores de ubicación, y ambas se realizan en la pestaña "Marcadores redondos".

    Primero, puede hacer clic en el mapa en la "Vista previa del mapa" para establecer un marcador.

    haga clic en el mapa para establecer el marcador

    Eso es fácil y conveniente, pero no muy preciso.

    El segundo método requiere un poco más de esfuerzo, pero lo prefiero por su precisión. Necesitarás la latitud y la longitud de la ubicación.

    El complemento recomienda el sitio Buscador de latitud y longitud , así que eso es lo que usaremos.

    Agregar ubicaciones será más fácil si abre el sitio del buscador de latitud y longitud en una pestaña separada.

    Buscaremos la latitud y la longitud de la ciudad que queremos marcar, luego cambiaremos al complemento.

    sitio de búsqueda de latitud y longitud

    En la pestaña "Marcadores redondos", haga clic en el botón "Agregar nuevo marcador".

    haga clic en el mapa para establecer el marcador

    Puede ver que los campos son casi los mismos que cuando agregamos regiones. La única diferencia son los campos adicionales para latitud y longitud.

    Agregue un título y, si lo desea, la información sobre herramientas y el contenido de la acción. (Si agrega una URL al contenido de la acción, no olvide configurar la acción de clic en la sección a continuación).

    Luego copie y pegue la latitud y la longitud de su búsqueda en el sitio del buscador de latitud y longitud.

    ingrese latitud y longitud

    Ahora, si guardamos el mapa, vamos a nuestro sitio y hacemos zoom en la región, podemos ver el marcador.

    marcador en el mapa

    Cambiar la apariencia del marcador

    De forma predeterminada, los marcadores son del mismo color que las regiones y el punto me parece un poco grande.

    Para establecer un nuevo color de marcador y hacer que el punto del marcador sea más pequeño, cambie los valores predeterminados en la pestaña Marcadores redondos.

    cambiar los valores predeterminados del marcador

    Ahora, cuando guardamos el mapa, vamos a nuestro sitio y hacemos zoom en la región, el marcador se destaca de la región.

    marcador rojo en el mapa

    Puede agregar tantos marcadores como desee.

    muchos marcadores rojos en el mapa

    Tenga en cuenta que puede haber un efecto negativo en la velocidad de carga del mapa cuando se trazan demasiados marcadores.

    Cuántos son "demasiados" depende de su sitio, host, etc. , y será diferente para cada sitio web.

    Publicar el mapa vectorial

    De acuerdo, hemos pasado por mucho aquí juntos, ¿no es así? Ahora es el momento de hacer que nuestro mapa sea visible en nuestro sitio. Como es de esperar a estas alturas, hay un par de formas de hacerlo.

    El primer método es copiar el código abreviado del mapa en la página o publicación donde desea que aparezca. El código abreviado se puede encontrar en la página de Mapas:

    shortcode en la página de mapas

    O la página Editar mapa:

    shortcode en la página de edición del mapa

    Si usa el editor de WordPress Gutenberg, el complemento crea un bloque.

    Puede encontrarlo en la sección "Widgets", se llama "Mapa".

    bloque de mapa

    Cuando agrega el bloque, puede seleccionar su mapa en el menú desplegable "Mapa para mostrar".

    bloque de mapa elegir mapa para mostrar

    No hay muchas razones para usar el bloque cuando solo tienes un mapa. Pero si está administrando muchos, puedo ver dónde podría ser útil el menú desplegable.

    Qué sucede si desinstala el complemento de mapas geográficos interactivos

    Si desinstala el complemento, las páginas y las publicaciones que usaron el complemento se verán afectadas.

      • Los mapas creados por el complemento se eliminarán.
      • Los códigos cortos del complemento dejarán de funcionar, por lo que los códigos cortos en sí se mostrarán en cualquier lugar donde se hayan utilizado.

    ¿Qué tiene de especial un mapa vectorial?

    Las imágenes de mapas vectoriales escalan o cambian de tamaño mejor que otros tipos de archivos de imagen como .jpg o .png. Ese tipo de archivos de imagen se denominan gráficos "ráster". Están formados por píxeles de diferentes colores. Los gráficos vectoriales, como los mapas utilizados por este complemento, se componen de puntos y rutas, como un dibujo de conexión de puntos.

    Cuando amplía una imagen de trama, se vuelve borrosa porque está "estirando" los píxeles individuales a un tamaño mayor. Si amplía un JPG de 72 píxeles por pulgada al 200%, esos 72 píxeles no pueden convertirse mágicamente en 144 píxeles. Por lo tanto, la calidad de la imagen se ve comprometida.

    Por otro lado, cuando amplía una imagen vectorial, las líneas entre los puntos se vuelven a dibujar, por lo que la imagen se mantiene fluida. Como era de esperar, volver a dibujar tiene un costo. Las imágenes vectoriales utilizan más recursos informáticos para renderizar que las imágenes rasterizadas.

    A pesar del coste informático, el formato vectorial es ideal para mapas, logotipos, gráficos, etc., que tienen que adaptarse a tamaños de visualización cambiantes. Los gráficos vectoriales son la forma más confiable de garantizar la calidad de ese tipo de diseños.

    ¿La palabra final sobre los mapas?

    La API de Google Maps ha sido el trazador de mapas de referencia para la mayoría de nosotros durante mucho tiempo. Pero el cambio reciente para requerir una tarjeta de crédito para obtener una clave API tiene a mucha gente buscando alternativas.

    Si desea crear un mapa vectorial de forma gratuita en WordPress, el complemento Interactive Geo Maps es la única forma de hacerlo. Se destaca entre los (ciertamente pocos) otros complementos de mapas vectoriales disponibles.

    Y ahora que ha visto lo fácil que es usarlo, no hay motivo para que no pueda crear un mapa hoy. Elija su mapa, defina sus regiones y publíquelo. No hay nada más fácil que eso.

    ¿Alguna vez ha intentado la integración manual de mapas en su sitio web? ¿Ha encontrado alguna otra alternativa a la API de Google Maps que debamos conocer? Házmelo saber en los comentarios.










  • Subir