Notice: WP_Scripts::localize ha sido llamada de forma incorrecta. El parámetro $l10n debe ser un array. Para pasar datos arbitrarios a los scripts, usa en su lugar la función wp_add_inline_script(). Por favor, visita Depuración en WordPress para más información. (Este mensaje fue añadido en la versión 5.7.0). in /home/customer/www/mapplanner.co/public_html/wp-includes/functions.php on line 5313
Como crear un plano interactivo a partir de una imagen - Mapplanner

En este artículo veremos como crear un plano interactivo para publicar en web a partir de un plano existente en formato JPG o PNG con diferentes técnicas y niveles de dificultad.

Ya te avanzo que, como es lógico, mi opción preferida es usar Mapplanner.

Crear un mapa interactivo solo con HTML

Dificultad técnica: Baja
Nivel de personalización: Muy bajo
Tiempo de desarrollo: Muy corto

Con el tag html <map> o con enlaces normales posicionados estratégicamente podemos simular un mapa interactivo muy sencillo. Servirá para casos muy simples en los que nos sea suficiente mostrar un nombre y aplicar un enlace a cada uno de los elementos.

Este sistema tiene bastantes deficiencias:

  • Es muy difícil personalizarlo.
  • Es complejo hacerlo compatible con todos los dispositivos.
  • Necesitaremos alguna herramienta como www.zaneray.com/responsive-image-map si no queremos complicarnos la vida mapeando nuestra imagen.
  • Siempre dependeremos de la edición del código

A continuación os dejo un ejemplo creado con este sistema:


Crear el plano con HTML y Javascript

Dificultad técnica: Alta
Nivel de personalización: Muy alto
Tiempo de desarrollo: Largo

Gracias al uso de Javascript un programador podrá generar un plano interactivo completamente a medida, con el que conseguiremos los resultados deseados y podremos hacer todo lo que queramos.

El inconveniente de esta solución es que se trata de un trabajo engorroso, que implica muchas horas de desarrollo y en consecuencia es costoso, seguramente no bajemos de los 700€ en el desarrollo inicial de un plano medio. Eso si hablamos de un solo plano, si en tu caso necesitas crear múltiples planos este presupuesto seguramente se multiplicará por 3 o 4. Este sistema tiene muchas ventajas y unos pocos inconvenientes:

  • El desarrollo inicial es muy costoso.
  • Normalmente dependeremos de un programador para hacer modificaciones.

Podrás ver planos interactivos en diferentes sitios web, por ejemplo en esta web https://hleb-dom.ru/en/location.html utilizan un bonito plano personalizado para mostrar diferentes lugares de la ciudad de forma atractiva. Prácticamente todas las funcionalidades que encontraras en él puedes conseguirlas con Mapplanner, nuestra solución que vemos más abajo continuación.

Crear un plano con herramientas infográficas

Dificultad técnica: Baja
Nivel de personalización:Alto
Tiempo de desarrollo: Medio

Existen herramientas para crear infografías o gráficos interactivos como www.genial.ly con las que con un poco de trabajo puedes llegar a conseguir un plano interactivo básico.

No me malinterpretes, estas herramientas son muy potentes y muy completas, pero no están enfocadas en la elaboración de planos interactivos. Aunque puedes usarlas la experiencia en la creación y en el resultado final no será la misma que en una plataforma de generación de planos interactivos como Mapplanner.

Crear un plano interactivo con Mapplanner

Dificultad técnica: Baja
Nivel de personalización:Alto
Tiempo de desarrollo: Bajo

Aquí llegamos a nuestro servicio que creo, con sinceridad, es la mejor opción para generar un plano interactivo de calidad si lo que deseas es ofrecer a tu visitante una buena experiencia de uso y dotar al plano de mucha información e imágenes.

Con Mapplanner solo tendrás que importar tu imagen de plano y empezar a crear marcadores o puntos de interés, que podrán ser áreas interactivas o imágenes.

Utilizando las plantillas, podrás reutilizar siempre las funcionalidades que ya has definido, por lo que si dos, tres o veinte marcadores con diferente información deben verse y comportarse igual, podrás montar tu plano en unos minutos. Os aseguro que teniendo el material listo, el desarrollo de cada una de nuestras demos no me ha llevado más de 4 horas y en muchos casos han sido tan solo 2 horas.

A continuación te dejo el ejemplo de plano con el que he iniciado este post, pero en esta ocasión creado con Mapplanner para que puedas ver la diferencia:

 

Soy consciente de que acabamos de empezar y hay mucho que desarrollar, es por ello que si creas tu cuenta de prueba y accedes al panel de usuario, podrás rellenar un formulario para indicar que cosas añadirías al servicio.

Muchas gracias por llegar hasta aquí y si tienes alguna duda, escríbeme para consultarme como crear un plano interactivo con Mapplanner.

 

Compártelo en redes
Categorías: Mapplanner

0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *