Crear y usar plantillas
Los marcadores son las zonas o imágenes que dotan de interacción a los planos en Mapplanner, si ya sabes como usarlos, ahora aprenderás a darles el aspecto y los comportamientos que quieras de forma muy rápida, gracias a las plantillas.
Las plantillas son una forma de reutilizar cómo se ve y comporta un marcador de plano. Estas plantillas son globales en de toda tu cuenta. Esto significa que en diferentes planos puedes usar las mismas plantillas que solo has creado una vez.
Imagina que necesitas crear diferentes planos con tu identidad corporativa, solo tienes que crear una plantilla (o las que necesites) y reusarla en todos los planos.
Antes de continuar, quizás prefieras ver el videotutorial sobre plantillas, ahí puedes ver ejemplos de creación y uso de plantillas de marcador para tus planos.
Para gestionar las plantillas, accede a tu plano y dentro de DISEÑO DEL PLANO, en la columna de la derecha entra en el panel TUS PLANTILLAS.
Creación de una plantilla
- Para crear una plantilla simplemente pulsa el botón NUEVA PLANTILLA
- Verás que se abre un nuevo panel. A la izquierda del mismo, puedes dar un nombre a tu plantilla (no se verá públicamente) y ver información orientativa de la misma.
- A la derecha tienes 4 pestañas que son las que más nos interesan.
- En la pestaña MARCADOR configuramos el aspecto de los marcadores, mientras que en el resto configuramos su comportamiento en diferentes situaciones o eventos.
Configurar el aspecto del marcador
- aspectoEn la primera pestaña (marcador) puedes definir el aspecto y la transición que quieres usar. Empieza con el selector de velocidad, esto es, el tiempo que dura el cambio de estilo cuando pones el ratón sobre el marcador.
- A continuación define las características que se usarán si aplicas esta plantilla a un marcador de área. Empieza indicando si quieres usar borde y su grosor.
- Ahora selecciona el color de fondo y del borde para el marcador en ‘estado normal’ y en ‘estado hover’ (cuando pones el ratón sobre él).
- El siguiente bloque te permite indicar la transparencia de marcador de tipo icono para los dos estados y en este caso puedes indicar una animación (experimenta con ellas para ver cual te interesa usar).
Configurar el comportamiento del marcador
Las tres pestañas que nos quedan por ver (HOVER, CLICK y CLICK TÁCTIL) tienen el mismo aspecto y funcionamiento, por lo tanto, te voy a explicar para que sirve cada una y después veremos cada uno de las posibles acciones a aplicar.
En la pestaña HOVER defines que acción ejecuta el marcador cuando posiciones el ratón sobre él. En las pestañas CLICK y CLICK TÁCTIL como podrás deducir, indicas la acción a realizar cuando haces click con el ratón un marcador o cuando lo pulsas desde un dispositivo táctil (normalmente móviles o tablets).
Veamos ahora las acciones que puedes definir para cada evento:
- No usar este evento. Creo que es bastante definitorio. No se hará nada cuando suceda este evento.
- Mostrar tooltip. Esta es una herramienta pensada para mostrar información reducida, ya que se trata de un pequeño ‘globo’ o ‘bocadillo’ que aparece cerca del marcador. Más abajo ampliaré la información de esta opción. ¡Mira que bonito puede quedar!
- Mostrar panel. Esta acción genera un ‘cuadro’ normalmente más extenso que el tooltip y que permite mostrar mucha más información. Se colocará en relación al plano y no al marcador. También muy bonito:
- Abrir enlace. En los marcadores puedes definir un enlace a una página web (o a una sección de tu página web), si seleccionas esta acción harás que el marcador abra el enlace indicado. Como puedes ver la única opción a elegir es si se abre en la misma ventana o en una nueva.
- Mostrar imagen. Acción que muestra la imagen del marcador en el mayor tamaño posible para cada dispositivo, sobrepasando el tamaño del plano. Este módulo no tiene opciones, pero queda muy bien.
Tooltip y panel modal
Estas dos acciones son las más importantes dentro de un plano y las que cuentan con más opciones de configuración, pero como son muy similares las explicaré a la par y veremos las mínimas diferencias.
Estos dos selectores te permiten indicar si, una vez se muestra el tooltip o panel, los elementos de título e imagen realizan alguna acción.
Imagina que quieres mostrar un panel con mucha información pero también quieres que se pueda ver la imagen en un tamaño generoso, en ese caso, puedes indicar que al hacer click en la imagen ésta se amplíe.
EDITOR VISUAL
Con este componente distribuyes dentro de tu panel o tooltip la información de tu marcador. Es decir, arrastrando los elementos de la izquierda a las cuadrículas de la derecha puedes decir como como si la imagen ca en la parte superior o si el título ni siquiera aparece en tu marcador.
Te dejo a continuación algunas combinaciones habituales, pero tienes la total libertad de componerlo como quieras:
A la derecha del editor visual tienes una serie de opciones para cada módulo. Estas son las comunes:
- Espacio interior: Define el espacio en pixels entre el contenido y el borde
- Redondear las esquinas. Define si el panel o el tootltip tienen las esquinas rectas o la cantidad de redondeo que quieres aplicarle.
Opciones para el panel:
- Posición del panel: Se trata de la posición del panel relativa al plano, es decir, en que lugar del plano se ubicará.
- Anchura: Anchura del panel, que puede ser:
- AUTO: Se adapta al contenido.
- En pixels: Indica el tamaño que tendrá el panel. Si es más grande que la pantalla se adaptará a ella, reduciendo dicho tamaño.
- En porcentaje. Igual que los píxeles, pero con un porcentaje relativo al tamaño del plano.
- Todo el ancho: Ocupará toda la anchira disponible en el plano.
- Altura: Igual que la anchura, pero para la altura. Ten en cuenta que si el contenido no cabe en el espacio que indiques, aparecerá una barra de scroll para que éste sea accesible.
Opciones para el tooltip:
- Posición del tooltip: Igual que en el panel, indica la posición del tooltip, pero en esta ocasión, relativa al marcador y en lugar de la posición centrada contamos con la posición ‘Siguiendo al ratón’. Que desplazará el tooltip al lado del cursor mientras estemos sobre el marcador.
- Anchura: A diferencia del panel, aquí la anchura indica la anchura máxima del tooltip, ajustándose siempre al contenido hasta llegar a esta anchura. Se puede definir en PX o %.
- Tamaño de flecha de tooltip: El tooltip cuenta con una flecha orientada hacia el marcador, aquí indicas su tamaño o si no quieres usar flecha.
* Los colores del tooltip y del panel vienen definidos por la gama de colores que selecciones en las opciones del plano. Tienes más información en este videotutorial de las opciones gráficas del plano.
Ten en cuenta que ahora mismo (puede que según avance Mapplanner esto cambie) cualquier acción que definas será igual para todos los eventos que la usen en esa plantilla. Esto quiere decir, que si configuras un ‘panel modal’ para el evento CLICK, será idéntico en el evento CLICK TÁCTIL, no es posible cambiarlos de forma independiente.
Aplicar la plantilla a un marcador
Para signar una plantilla a un marcador, selecciona tu marcador y en el panel del lateral accede al apartado de ‘plantilla’, pulsa el botón de ‘Cambiar plantilla’.
Se abrirá el panel para seleccionar la plantilla y puedes seleccionar entre las pestañas de PLANTILLAS PREDEFINIDAS y TUS PLANTILLAS. Normalmente querrás asignar una plantilla tuya, así que accede a esa pestaña y pulsa el botón ‘Usar plantilla’ para aplicar esta plantilla a tu marcador.
Te recomiendo asignar la plantilla en tu primer marcador y despúes duplicar este marcador tantas veces como elementos similares quieras crear, te puedes ahorrar horas de trabajo.
Editar una plantilla
Puedes acceder a la edición de una plantilla desde dos lugares:
- En el diseño del plano, en el panel de la derecha accede a TUS PLANTILLAS y en el listado, pulsa el nombre de la plantilla a editar (en azul) y aparecerá el formulario de edición.
- Desde el panel de plantillas en la pestaña TUS PLANTILLAS pulsa el enlace ‘Editar plantilla’ de la plantilla que quieres editar y de nuevo aparecerá el formulario de edición.
Simplemente modifica lo que necesites y pulsa el botón inferior de ACTUALIZAR PLANTILLA.
Eliminar una plantilla
Puedes eliminar un marcador desde dos lugares:
- En el panel de edición de plantilla, dirígete a la parte inferior derecha y pulsa el botón Eliminar plantilla
. - Desde el listado de plantillas pulsa el icono que contiene una papelera (en rojo y con fondo gris en la siguiente captura).
.
A continuación se te solicitará confirmación para la eliminación. Cuidado, esta acción no se puede deshacer.