# Tworzenie mapy z warstwą tła grafiki

W wizualizacjach map grafiki mogą być używane jako niestandardowe mapy podstawowe. Może pojawić się potrzeba wyświetlenia danych na planie piętra.

Ten przykładowy wykres mapy prezentuje plan piętra biura z warstwą punktów. Każdy bąbelek jest ustawiony nad biurkiem pracownika. Wielkość i kolor każdego bąbelka są zależne od średniej tygodniowej liczby problemów klientów, które obsługuje konkretny pracownik w ciągu dnia.

Przykład mapy z tłem w postaci grafiki planu piętra z warstwą punktów pokazujących pracowników, przy czym wielkość każdego pracownika jest zależna od liczby rozwiązanych przez niego problemów klientów

Przykład mapy z tłem w postaci grafiki planu piętra z warstwą punktów pokazujących pracowników, przy czym wielkość każdego pracownika jest zależna od liczby rozwiązanych przez niego problemów klientów

Przykład mapy z tłem w postaci grafiki planu piętra z warstwą punktów pokazujących pracowników, przy czym wielkość każdego pracownika jest zależna od liczby rozwiązanych przez niego problemów klientów ![Przykład mapy z tłem w postaci grafiki planu piętra z warstwą punktów pokazujących pracowników, przy czym wielkość każdego pracownika jest zależna od liczby rozwiązanych przez niego problemów klientów](https://help.qlik.com/pl-PL/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_map-image-background-example_point.png)

W tym przykładzie skala domyślna jest ukryta. Grafiki nie mają spójnej skali rozmiarów. Wielkość grafiki na warstwie tła mapy jest również zależna od współrzędnych ustawionych przez użytkownika dla rogów grafiki.

## Zestaw danych

W tym przykładzie użyto dwóch tabel i grafiki tła.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/Map/map-backgroundimage-example.htm)

#### Problemy klientów

Problemy klientów

| Data | Numer pracownika | Problemy klientów |
| --- | --- | --- |
| 8/1/2019 | 1 | 24 |
| 8/1/2019 | 2 | 31 |
| 8/1/2019 | 3 | 21 |
| 8/1/2019 | 4 | 42 |
| 8/1/2019 | 5 | 24 |
| 8/1/2019 | 6 | 40 |
| 8/1/2019 | 7 | 40 |
| 8/1/2019 | 8 | 19 |
| 8/1/2019 | 9 | 23 |
| 8/1/2019 | 10 | 47 |
| 8/1/2019 | 11 | 38 |
| 8/1/2019 | 12 | 21 |
| 8/1/2019 | 13 | 22 |
| 8/1/2019 | 14 | 15 |
| 8/1/2019 | 15 | 30 |
| 8/1/2019 | 16 | 46 |
| 8/1/2019 | 17 | 41 |
| 8/1/2019 | 18 | 31 |
| 8/1/2019 | 19 | 50 |
| 8/1/2019 | 20 | 27 |
| 8/1/2019 | 21 | 35 |
| 8/1/2019 | 22 | 38 |
| 8/1/2019 | 23 | 37 |
| 8/1/2019 | 24 | 31 |
| 8/1/2019 | 25 | 13 |
| 8/1/2019 | 26 | 11 |
| 8/2/2019 | 1 | 35 |
| 8/2/2019 | 2 | 31 |
| 8/2/2019 | 3 | 33 |
| 8/2/2019 | 4 | 14 |
| 8/2/2019 | 5 | 24 |
| 8/2/2019 | 6 | 33 |
| 8/2/2019 | 7 | 40 |
| 8/2/2019 | 8 | 14 |
| 8/2/2019 | 9 | 44 |
| 8/2/2019 | 10 | 24 |
| 8/2/2019 | 11 | 37 |
| 8/2/2019 | 12 | 39 |
| 8/2/2019 | 13 | 49 |
| 8/2/2019 | 14 | 16 |
| 8/2/2019 | 15 | 42 |
| 8/2/2019 | 16 | 13 |
| 8/2/2019 | 17 | 45 |
| 8/2/2019 | 18 | 48 |
| 8/2/2019 | 19 | 46 |
| 8/2/2019 | 20 | 18 |
| 8/2/2019 | 21 | 18 |
| 8/2/2019 | 22 | 45 |
| 8/2/2019 | 23 | 47 |
| 8/2/2019 | 24 | 31 |
| 8/2/2019 | 25 | 10 |
| 8/2/2019 | 26 | 21 |
| 8/3/2019 | 1 | 16 |
| 8/3/2019 | 2 | 34 |
| 8/3/2019 | 3 | 15 |
| 8/3/2019 | 4 | 44 |
| 8/3/2019 | 5 | 49 |
| 8/3/2019 | 6 | 18 |
| 8/3/2019 | 7 | 16 |
| 8/3/2019 | 8 | 41 |
| 8/3/2019 | 9 | 27 |
| 8/3/2019 | 10 | 46 |
| 8/3/2019 | 11 | 21 |
| 8/3/2019 | 12 | 49 |
| 8/3/2019 | 13 | 38 |
| 8/3/2019 | 14 | 30 |
| 8/3/2019 | 15 | 48 |
| 8/3/2019 | 16 | 17 |
| 8/3/2019 | 17 | 42 |
| 8/3/2019 | 18 | 48 |
| 8/3/2019 | 19 | 44 |
| 8/3/2019 | 20 | 44 |
| 8/3/2019 | 21 | 12 |
| 8/3/2019 | 22 | 44 |
| 8/3/2019 | 23 | 17 |
| 8/3/2019 | 24 | 24 |
| 8/3/2019 | 25 | 25 |
| 8/3/2019 | 26 | 33 |
| 8/4/2019 | 1 | 20 |
| 8/4/2019 | 2 | 45 |
| 8/4/2019 | 3 | 32 |
| 8/4/2019 | 4 | 37 |
| 8/4/2019 | 5 | 32 |
| 8/4/2019 | 6 | 50 |
| 8/4/2019 | 7 | 41 |
| 8/4/2019 | 8 | 14 |
| 8/4/2019 | 9 | 37 |
| 8/4/2019 | 10 | 39 |
| 8/4/2019 | 11 | 28 |
| 8/4/2019 | 12 | 35 |
| 8/4/2019 | 13 | 24 |
| 8/4/2019 | 14 | 19 |
| 8/4/2019 | 15 | 25 |
| 8/4/2019 | 16 | 26 |
| 8/4/2019 | 17 | 23 |
| 8/4/2019 | 18 | 45 |
| 8/4/2019 | 19 | 48 |
| 8/4/2019 | 20 | 36 |
| 8/4/2019 | 21 | 40 |
| 8/4/2019 | 22 | 21 |
| 8/4/2019 | 23 | 10 |
| 8/4/2019 | 24 | 42 |
| 8/4/2019 | 25 | 35 |
| 8/4/2019 | 26 | 26 |
| 8/5/2019 | 1 | 24 |
| 8/5/2019 | 2 | 28 |
| 8/5/2019 | 3 | 44 |
| 8/5/2019 | 4 | 19 |
| 8/5/2019 | 5 | 34 |
| 8/5/2019 | 6 | 37 |
| 8/5/2019 | 7 | 14 |
| 8/5/2019 | 8 | 26 |
| 8/5/2019 | 9 | 38 |
| 8/5/2019 | 10 | 25 |
| 8/5/2019 | 11 | 41 |
| 8/5/2019 | 12 | 35 |
| 8/5/2019 | 13 | 48 |
| 8/5/2019 | 14 | 36 |
| 8/5/2019 | 15 | 36 |
| 8/5/2019 | 16 | 37 |
| 8/5/2019 | 17 | 31 |
| 8/5/2019 | 18 | 44 |
| 8/5/2019 | 19 | 21 |
| 8/5/2019 | 20 | 28 |
| 8/5/2019 | 21 | 13 |
| 8/5/2019 | 22 | 10 |
| 8/5/2019 | 23 | 50 |
| 8/5/2019 | 24 | 35 |
| 8/5/2019 | 25 | 11 |
| 8/5/2019 | 26 | 39 |
| 8/6/2019 | 1 | 26 |
| 8/6/2019 | 2 | 14 |
| 8/6/2019 | 3 | 45 |
| 8/6/2019 | 4 | 27 |
| 8/6/2019 | 5 | 33 |
| 8/6/2019 | 6 | 21 |
| 8/6/2019 | 7 | 14 |
| 8/6/2019 | 8 | 45 |
| 8/6/2019 | 9 | 41 |
| 8/6/2019 | 10 | 35 |
| 8/6/2019 | 11 | 35 |
| 8/6/2019 | 12 | 13 |
| 8/6/2019 | 13 | 35 |
| 8/6/2019 | 14 | 26 |
| 8/6/2019 | 15 | 40 |
| 8/6/2019 | 16 | 14 |
| 8/6/2019 | 17 | 20 |
| 8/6/2019 | 18 | 23 |
| 8/6/2019 | 19 | 11 |
| 8/6/2019 | 20 | 23 |
| 8/6/2019 | 21 | 31 |
| 8/6/2019 | 22 | 48 |
| 8/6/2019 | 23 | 39 |
| 8/6/2019 | 24 | 50 |
| 8/6/2019 | 25 | 47 |
| 8/6/2019 | 26 | 40 |
| 8/7/2019 | 1 | 49 |
| 8/7/2019 | 2 | 39 |
| 8/7/2019 | 3 | 16 |
| 8/7/2019 | 4 | 28 |
| 8/7/2019 | 5 | 46 |
| 8/7/2019 | 6 | 37 |
| 8/7/2019 | 7 | 36 |
| 8/7/2019 | 8 | 15 |
| 8/7/2019 | 9 | 18 |
| 8/7/2019 | 10 | 25 |
| 8/7/2019 | 11 | 12 |
| 8/7/2019 | 12 | 37 |
| 8/7/2019 | 13 | 40 |
| 8/7/2019 | 14 | 35 |
| 8/7/2019 | 15 | 11 |
| 8/7/2019 | 16 | 12 |
| 8/7/2019 | 17 | 22 |
| 8/7/2019 | 18 | 16 |
| 8/7/2019 | 19 | 46 |
| 8/7/2019 | 20 | 39 |
| 8/7/2019 | 21 | 41 |
| 8/7/2019 | 22 | 26 |
| 8/7/2019 | 23 | 25 |
| 8/7/2019 | 24 | 34 |
| 8/7/2019 | 25 | 50 |
| 8/7/2019 | 26 | 41 |

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/Map/map-backgroundimage-example.htm)

#### Dane pracownika

Dane pracownika

| Pracownik | Numer pracownika | Szerokość geograficzna | Długość geograficzna |
| --- | --- | --- | --- |
| Nehru Pollard | 1 | 2.1 | -2.1 |
| Duncan Bell | 2 | 1.675 | -2.1 |
| Arthur Miller | 3 | 2.1 | -1.6 |
| Latifah Randall | 4 | 1.675 | -1.6 |
| Glenna Giles | 5 | 2.1 | -1.1 |
| Chaim Gates | 6 | 1.675 | -1.1 |
| Elijah Mcgowan | 7 | 2.1 | -0.585 |
| Serina Richards | 8 | 1.675 | -0.585 |
| Nora Odonnell | 9 | 2.1 | 0.595 |
| Fiona Craig | 10 | 1.675 | 0.595 |
| Kirestin Mcguire | 11 | 2.1 | 1.155 |
| Francesca Wilkerson | 12 | 1.675 | 1.155 |
| Virginia Sanford | 13 | 2.1 | 1.6 |
| Beau Weeks | 14 | 1.675 | 1.6 |
| Justin Cook | 15 | 2.1 | 2.2 |
| Lisandra Sloan | 16 | 1.675 | 2.2 |
| Brody Ball | 17 | 2.1 | 2.6 |
| Kirk Welch | 18 | 1.675 | 2.6 |
| Julian Mcgee | 19 | 0.7 | 3.25 |
| Geoffrey Wheeler | 20 | 0.7 | 3.7 |
| Carter Leonard | 21 | 0.14 | 3.25 |
| Noel Watson | 22 | 0.14 | 3.7 |
| Damian Everett | 23 | -0.3 | 3.25 |
| Justina Frazier | 24 | -0.3 | 3.7 |
| MacKenzie Garcia | 25 | -0.85 | 3.25 |
| Germane Carey | 26 | -0.85 | 3.7 |

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/Map/map-backgroundimage-example.htm)

#### Grafika tła

Przykład grafiki tła

Przykład grafiki tła

Przykład grafiki tła ![Przykład grafiki tła](https://help.qlik.com/pl-PL/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_map-image-background-example.png)

## Sposób tworzenia

InformacjaPochodzenie adresów URL zawierających żądania zasobów zewnętrznych musi znajdować się na liście dozwolonych funkcji Zasada zabezpieczeń zawartości. W przeciwnym razie zasób nie zostanie załadowany. Zasoby WMS muszą mieć dyrektywy img-src i connect-src na liście dozwolonych.

Zobacz temat: [Zarządzanie zasadami zabezpieczeń zawartości](https://help.qlik.com/pl-PL/cloud-services/Subsystems/Hub/Content/Sense_Hub/Admin/mc-administer-content-security-policy.htm)

### Zanim rozpoczniesz

Następujące pochodzenie musi zostać dodane do listy dozwolonych w Zasadach zabezpieczeń zawartości Twojej dzierżawy: https://help.qlik.com. Dodaj pochodzenie z dyrektywą img-src. Odbywa się to w centrum aktywności Administrowanie przez administratora.

Więcej informacji zawiera temat [Tworzenie wpisu w CSP](https://help.qlik.com/pl-PL/cloud-services/Subsystems/Hub/Content/Sense_Hub/Admin/mc-administer-content-security-policy.htm#AddEntry).

### Tworzenie mapy

Wykonaj następujące czynności:

1. Dodaj źródła danych do swojej aplikacji i powiąż tabele, używając pól Numer pracownika w każdej tabeli.

2. W arkuszu dodaj wykres mapy.

3. W obszarze Ustawienia mapy wykonaj następujące czynności:

   * Zmień ustawienie Mapa podstawowa na Brak.
   * Zmień ustawienie Rzutowanie na Zdefiniowane przez użytkownika (stopnie).

4. Po wybraniu opcji Wygląd > Prezentacja wykonaj następujące czynności:

   * Przełącz Pasek skali na wartość Wył.
   * Ustaw pozycję Ogranicz poziomy powiększenia na wartość Niestandardowe, a następnie ustaw powiększenie na Powiększenie 7-krotne – powiększenie 8-krotne.

5. Dodaj warstwę tła do wykresu mapy, a następnie w obszarze Dane wykonaj następujące czynności:

   * W obszarze Format wybierz pozycję Grafika.
   * Jako Adres URL ustaw https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Resources/Images/ui\_map-image-background-example.png.
   * Ustaw pozycję Lewy górny róg na 2,5 dla Góra (szerokość geograficzna) i na –4,1 dla Lewa strona (długość geograficzna).
   * Ustaw pozycję Prawy dolny róg na –2,5 dla Dół (szerokość geograficzna) i na 4,1 dla Prawa strona (długość geograficzna).

   Informacja

   W tym punkcie przykładu grafika jeszcze się nie pojawia. Po dodaniu warstwy punktów w następnym kroku, mapa aktualizuje się z prawidłową skalą i pozycją grafiki.

6. Dodaj warstwę punktów do wykresu mapy i wykonaj następujące czynności:

   * W obszarze Dane dodaj Employee jako pole.

   * W obszarze Lokalizacja wybierz opcję Pola długości i szerokości geograficznej. Ustaw Latitudejako Pole szerokości geograficznej, a Longitude jako Pole długości geograficznej.

   * W obszarze Rozmiar i kształt ustaw Rozmiar wg na Avg(CustomerIssues).

   * W obszarze Kolory wykonaj następujące czynności:

     * Ustaw opcję Kolor na wartość Niestandardowy i kolor Wg miar.
     * Wybierz Średnia (problemy klientów) jako miarę.
     * Wybierz Klasy rozbieżne jako schemat kolorów.

Aby uzyskać taki sam wygląd jak na obrazie u góry strony, ustaw kompozycję aplikacji na Sense klasyczny.