Saltar al contenido principal Saltar al contenido complementario
Recursos de Qlik

Crear un mapa con una capa de fondo de imagen

Puede usar imágenes como mapas base personalizados en visualizaciones de mapa. Es posible que desee mostrar datos sobre un plano de planta.

Este ejemplo de gráfico de mapa muestra un plano de planta de oficina con una capa de puntos. Cada burbuja se coloca sobre el escritorio de un empleado. El promedio semanal de problemas de clientes gestionados por día por el empleado determina el tamaño y el color de cada burbuja.

Ejemplo de mapa con un fondo de imagen de planta con una capa de puntos que muestra a los empleados dimensionados según la cantidad de problemas de clientes que han resuelto

Ejemplo de mapa con un fondo de imagen de planta con una capa de puntos que muestra a los empleados dimensionados según la cantidad de problemas de clientes que han resuelto

Este ejemplo oculta la escala predeterminada. Las imágenes no tienen una escala de tamaño coherente. El tamaño de la imagen en una capa de fondo de un mapa también depende de qué coordenadas establece el usuario para las esquinas de la imagen.

Conjunto de datos

Este ejemplo utiliza dos tablas y una imagen de fondo.

Cómo crear esto

Nota informativaLas URL que contienen solicitudes de recursos a recursos externos deben tener sus orígenes permitidos en la Política de seguridad de contenidos, de lo contrario el recurso no se cargará. Los recursos WMS deben tener las directivas image-src y connect-src en la lista de permitidos.

Vea también: Administrar la Política de seguridad de contenidos

Antes de comenzar:

Antes de comenzar, el siguiente origen debe ser añadido a la lista de permitidos para la Política de seguridad de contenidos: https://help.qlik.com. Este origen debe añadirse con la siguiente Directive: image-src. Esto se hace en el centro de actividades Administración por un Administrador del espacio empresarial inquilino.

Para obtener más información sobre cómo añadir entradas a la Política de seguridad de contenidos, consulte Crear una entrada de CSP.

Construir el mapa

Haga lo siguiente:

  1. Agregue las fuentes de datos a su app y asocie las tablas usando los campos EmployeeNumber de cada tabla.
  2. En una hoja, agregue un gráfico de mapa.
  3. Haga clic en Abrir las propiedades avanzadas

  4. En Configuraciones de mapa, haga lo siguiente:

    • Cambie Mapa base a Ninguno.
    • Cambie Proyección a Definido por el usuario (grados).

  5. En Aspecto > Presentación, haga lo siguiente:

    • Cambie la Barra de escala a Desactivado.
    • Establezca Limitar niveles de zoom en Personalizado y configure el zoom en 7x zoom - 8x zoom.

  6. Agregue una capa de fondo al gráfico del mapa y, en Datos, haga lo siguiente:

    • En Formato, seleccione Imagen.
    • Establezca la URL como https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_map-image-background-example.png.
    • Configure la Esquina superior izquierda en 2,5 para Superior (latitud) y en -4,1 para Izquierda (longitud).
    • Configure la Esquina inferior derecha en -2,5 para Inferior (latitud) y en 4,1 para Derecha (longitud).
    Nota informativa

    A estas alturas del ejemplo, la imagen aún no aparece. Tras añadir la capa de puntos con el siguiente paso, el mapa se actualiza con la escala y posición de imagen correctas.

  7. Agregue una capa de puntos al gráfico de mapa y haga lo siguiente:

    • En Datos, añada Empleado como campo.
    • En Ubicación, seleccione Campos de latitud y longitud. Establezca Latitud como campo de latitud y Longitud como campo de longitud.
    • En: Tamaño y Forma, ajuste el Tamaño por Avg(CustomerIssues).

    • En Colores, haga lo siguiente:

      • Configure Colores en Personalizado y Colorear por medida.
      • Seleccione Avg(CustomerIssues) como la medida.
      • Seleccione Rangos divergentes como el esquema de color.

Para conseguir el mismo aspecto que la imagen de la parte superior de la página, configure la plantilla de la app como Sense Classic.

¿Esta página le ha sido útil?

No dude en indicarnos en qué podemos mejorar si encuentra algún problema en esta página o su contenido, como, por ejemplo, errores tipográficos, pasos que falta o errores técnicos.

Deje aquí sus comentarios