Skip to main content Skip to complementary content
Qlik Resources

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

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.

How I built this

Information noteURLs that contain resource requests to external resources must have its origins allowlisted in the Content Security Policy, else the resource will not be loaded. WMS resources must have both image-src and connect-src directives allowlisted.

See also: Managing Content Security Policy

Before you start

Before you start, the following origin must be added to the allowlist for the Content Security Policy: https://help.qlik.com. This origin needs to be added with the following Directive: image-src. This is done in the Administration activity center by a tenant administrator.

For more information about adding Content Security Policy entries, see Creating a CSP entry.

Building the map

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. Click Open advanced properties.

  4. In Map settings, do the following:

    • Change Base map to None.
    • Change Projection to User defined (degrees).

  5. In Appearance > Presentation, do the following:

    • Toggle the Scale bar to Off.
    • Set Limit zoom levels to Custom and set the zoom to 7x zoom - 8x zoom.

  6. 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/cloud-services/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).
    Information note

    At this point in the example, the image does not appear yet. After you add a point layer with the next step, the map updates with the correct scale and image position.

  7. 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 Latitude as the Latitude field and Longitude as the Longitude field.
    • In Size & Shape, set Size by Avg(CustomerIssues).

    • In Colors, do the following:

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

To get the same look and feel as the image at the top of the page, set the app theme to Sense Classic.

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here