画像背景レイヤーを使用してマップを作成します

マップビジュアライゼーションで画像をカスタムベースマップとして使用できます。平面図にデータを表示したい場合があります。

このマップチャートの例では、ポイントレイヤーを含むオフィスの平面図を表示しています。それぞれのバブルボールは、従業員のデスク上に配置されています。従業員が 1 日当たりに処理した顧客の問題の週平均の件数によって、各バブルボールのサイズと色が指定されています。

解決した顧客の問題の件数によってサイズ指定された従業員を示すポイントレイヤーを含む、平面図の画像背景を含んでいるマップの例

この例では、既定のスケールが非表示になっています。画像には一貫したサイズのスケールは含まれていません。マップ背景レイヤー内での画像サイズは、画像のコーナーにユーザーが設定した座標によっても変わります。

データセット

この例では、2 つのテーブルと 1 つの背景画像を使用しています。2 つのテーブルをアプリにインポートするには、Web ファイルコネクタを使用します。

CustomerIssues
日付	EmployeeNumber	CustomerIssues
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

EmployeeData
Employee	EmployeeNumber	緯度	経度
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

構築方法

次の手順を実行します。

データソースをアプリに追加し、各テーブルの「EmployeeNumber」項目を使用してテーブルを関連付けします。
シートでマップチャートを追加します。
[マップの設定] で以下を実行します。
- [ベースマップ] を [なし] に変更します。
- [プロジェクション] を [ユーザー定義 (度)] に変更します。
[スタイル] > [プレゼンテーション] で、以下を実行します。
- [スケールバー] を [オフ] に切り替えます。
- [ズームレベルの制限] を [カスタム] に設定し、ズームを [7x zoom - 8x zoom ] (7 倍ズーム - ８倍ズーム) に設定します。
背景レイヤーをマップチャートに追加して、[データ] で以下を実行します。
- [形式] で [画像] を選択します。
- [URL] を「https://help.qlik.com/en-US/sense/Subsystems/Hub/Content/Resources/Images/ui_map-image-background-example.png」に設定します。
- [左上隅] で、[最上部 (緯度)] に 2.5 を設定し、[左 (経度)] に -4.1 を設定します。
- [右下隅] で、[最下部 (緯度)] に -2.5 を設定し、[右 (経度)] に 4.1 を設定します。
情報メモ
この例では、この時点では画像はまだ表示されません。次の手順でポイントレイヤーを追加すると、マップが正しいスケールと画像の位置で更新されます。
ポイントレイヤーをマップチャートに追加して、以下を実行します。
- [データ] で、項目として「Employee」を追加します。
- [場所] で、 [緯度項目と経度項目] を選択します。[緯度 ] を [緯度項目] と設定し、 [経度] を [経度項目 ] と設定します。
- [サイズと図形] で [サイズの単位] を「[Avg(CustomerIssues)」に設定します。
- [Colors] で、次の手順を実行します。
  - [色] を [カスタム] に設定し、 [メジャー別] に色分けします。
  - 軸として「Avg(CustomerIssues)」を選択します。
  - 配色として「発散クラス」を選択します。

ページ上部の画像と同じ見た目にするには、アプリのテーマを [Senseクラシック] に設定します。

このページは役に立ちましたか?

このページまたはコンテンツに、タイポ、ステップの省略、技術的エラーなどの問題が見つかった場合は、お知らせください。改善に役立たせていただきます。

こちらにフィードバックをお寄せください

画像背景レイヤーを使用してマップを作成します

データ セット

構築方法

このページは役に立ちましたか?

データセット