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

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

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

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

データ セット

この例では、2 つのテーブルと 1 つの背景画像を使用しています。

CustomerIssues

CustomerIssues

Date	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

EmployeeData

Employee	EmployeeNumber	Latitude	Longitude
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

背景画像

構築方法

次の手順を実行します。

1. データ ソースをアプリに追加し、各テーブルの「EmployeeNumber」項目を使用してテーブルを関連付けします。
2. シートでマップ チャートを追加します。
3. [詳細なプロパティを開く] をクリックします。

4. [マップの設定] で以下を実行します。

   • [ベース マップ] を [なし] に変更します。
   • [プロジェクション] を [ユーザー定義 (度)] に変更します。

5. [スタイル] > [プレゼンテーション] で、以下を実行します。

   • [スケール バー] を [オフ] に切り替えます。
   • [ズーム レベルの制限] を [カスタム] に設定し、ズームを [7x zoom - 8x zoom ] (7 倍ズーム - ８倍ズーム) に設定します。

6. 背景レイヤーをマップ チャートに追加して、[データ] で以下を実行します。

   • [形式] で [画像] を選択します。
   • [URL] を「https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_map-image-background-example.png」に設定します。
   • [左上隅] で、[最上部 (緯度)] に 2.5 を設定し、[左 (経度)] に -4.1 を設定します。
   • [右下隅] で、[最下部 (緯度)] に -2.5 を設定し、[右 (経度)] に 4.1 を設定します。

7. ポイント レイヤーをマップ チャートに追加して、以下を実行します。

   • [データ] で、項目として「Employee」を追加します。
   • [場所] で、 [緯度項目と経度項目] を選択します。[Lat ] を [Latitude field] (緯度項目) と設定し、[Long] を [Longitude field] (経度項目) と設定します。
   • [サイズと図形] で [サイズの単位] を「[Avg(CustomerIssues)」に設定します。

   • [色] で以下を実行します。

     • [色] を [カスタム] に設定し、 [メジャー別] に色分けします。
     • 軸として「Avg(CustomerIssues)」を選択します。
     • 配色として「発散クラス」を選択します。