Esta es una demostración de un plano interactivo muy sencillo montado en aproximadamente una hora desde el momento en que se cuenta con todo el material. Un claro ejemplo de que puedes mostrar tus instalaciones de una forma más atractiva con muy poco esfuerzo gracias a Mapplanner.co
Por supuesto, nuestra aplicación te permite complicarlo mucho más como puedes ver en otras demos
Esta demo está basada en un proyecto muy interesante del estudio de arquitectura francés studiolada en el que comparten toda la información de esta casa open source (costes, planos,etc). Si quieres, puedes informarte mejor esta web.
A continuación tienes una tabla con las características principales de esta demo.
- Tema
- Soft
- CSS extra
- Ningún css extra
- Marcadores
16 marcadores, en la mayoría de casos se ha optado por los marcadores de tipo icono, ya que son más rápidos de colocar en el plano. Igualmente el plano cuenta con tres marcadores de tipo área (polígono) para delimitar zonas concretas.
- Plantillas
Se han creado para este plano 3 plantillas que se comportan de forma muy similar en todos los dispositivos:
- Plantilla para mostrar una foto, tiene una vista previa en Tooltip y al pulsar se hace uso del visor de imágenes para ampliar al máximo la imagen a mostrar. El icono tiene la animación de inclinación a la derecha.
- Plantilla de información corta también usando Tooltip para esta finalidad. El icono tiene la animación de inclinación a la izquierda.
- Plantilla de información larga con el uso de un panel modal, en este caso centrado y con un tamaño generoso.
- Zoom
- habilitado (2)
- Plantas
- 2
- Panel
- Centrado y con un tamaño ajustado al 80% del tamaño del plano. Se muestra al hacer click sobre algún marcador de área (polígono).
- Tooltip
- Se usa para los iconos de foto y de información corta, en este caso se ha optado por ubicarlos fijos en la parte superior e inferior respectivamente. Como podrás observar, en las fotos se usa para tener una vista previa al colocar el cursor encima y en el caso de los iconos de información, se muestra al pulsar.
- Lightbox
- Al pulsar sobre un icono de imagen puedes ver la imagen en un gran tamaño.
Si lo deseas también puedes ver otras demos.