Skip to main content

Creating a map with an image background layer

ON THIS PAGE

Creating a map with an image background layer

You can use images as custom base maps in map visualizations. You may want to display data over a floor plan.

This example map chart displays an office floor plan with a point layer. Each bubble is positioned over an employee's desk. The weekly average of customer issues handled per day by the employee determines the size and color of each bubble.

Map example with floor plan image background with a point layer showing employees sized by the number of customer issues they have resolved

This example hides the default scale. Images do not have a consistent size scale. Image size in a map background layer is also dependent on what coordinates the user sets for the corners of the image.

Dataset

This example uses two tables and a background image. You can import the two tables into your app using the web file connector.

How I built this

Do the following:

  1. Add the data sources to your app and associate the tables using the EmployeeNumber fields in each table.
  2. In a sheet, add a map chart.
  3. In Map settings, do the following:

    • Change Base map to None.
    • Change Projection to User defined (degrees).
  4. In AppearancePresentation, do the following:

    • Toggle the Scale bar to Off.
    • Set Limit zoom levels to Custom and set the zoom to 7x zoom - 8x zoom.
  5. Add a background layer to the map chart and in Data, do the following:

    • In Format, select Image.
    • Set the URL to https://help.qlik.com/en-US/sense/Subsystems/Hub/Content/Resources/Images/ui_map-image-background-example.png.
    • Set the Top left corner to 2.5 for Top (latitude) and -4.1 for Left (longitude).
    • Set the Bottom right corner to -2.5 for Bottom (latitude) and 4.1 for Right (longitude).
  6. Add a point layer to the map chart and do the following:

    • In Data, add Employee as the field.
    • In Location, select Latitude and longitude fields. Set Lat as the Latitude field and Long as the Longitude field.
    • In Size & Shape, set Size byAvg(CustomerIssues).
    • In Color, do the following:

      • Set Color to Custom and color By measure.
      • Select Avg(CustomerIssues) as the measure.
      • Select Diverging classes as the color scheme.