こんにちは！Yokoです。
前回は路線・駅と銭湯のデータを準備し、データロードエディタで取り込みのスクリプトを作成しました。
いよいよ、マップを実装していきます。
マップの設定箇所はたくさんあるので、これがベストと言えるかどうか…
ではありますが、見た目を確認しながら進めていきますね。
Qlikのマップチャート
Qlik Senseでは、地図上を塗りつぶすエリアマップ、位置を地図上にプロットするポイントマップがよく使われま（これ以外に、ライン、密度、チャートレイヤなどがあります）。
今回は地図上に位置をプロットしたいので、ポイントマップを使います。
また、マップチャートはレイヤを持っていて、複数のレイヤを重ねていくことができます。
よって、今回は最初に駅のレイヤを作成し、その後に銭湯のレイヤを重ねていくことにします。
駅レイヤの作成
アセットパネルから「マップ」をシート上にドロップすると、世界地図が表示されますので、チャートのプロパティを表示し、設定していきます。
「レイヤ」から[レイヤの追加]を選択し、レイヤのプロパティを設定します。
以下、設定を解説します。
| プロパティ | 設定 |
|---|---|
| レイヤ | ポイントレイヤを選択 |
| ポイントレイヤ＞データ | 駅名 |
| ポイントレイヤ＞場所 | [緯度]項目と[経度]項目にチェック ・緯度：駅_緯度 ・経度：駅_経度 |
| ポイントレイヤ＞サイズと図形 | 形状：メディアライブラリからの画像 |
メディアライブラリには予め駅アイコンと銭湯のアイコンを準備しておきました。今回はstation.pngを挿入します。
その他のプロパティを設定します。
| プロパティ | 設定 |
|---|---|
| ポイントレイヤ＞色 | アイコンを使用したので、色の設定は指定できない。 geo.property.color.outlineの不透明度は0 |
| ポイントレイヤ＞オプション | ラベルの表示：オン ラベルのフォントの色：#1032cf |
銭湯レイヤの作成
駅レイヤができたので、銭湯レイヤを追加していきます。チャートプロパティの最初に戻って、レイヤの追加をクリックして、銭湯の設定を行っていきます。
駅の設定とほとんど変わらないので、解説はしません。
異なるのは、メディアライブラリからの画像を追加する際に、銭湯アイコン（1010.png）を指定したことと、ラベルの色を赤（#f93f17）にしたくらいです。
マップの確認
設定が終わったで、表示を確認してみます。
マウスでズームして、新宿辺りを表示すると、新宿周辺の駅と銭湯が一緒に表示されました。
アイコン表示もいい感じです。
これで形は出来上がったようです。
まとめ
駅データと銭湯データという２つの位置情報を１つのマップ上に重ねて表示できましたね。
これで、Qlikのマップのレイヤを使うと異なる位置情報を重ねて表示することができることがわかりました。
しかし、マップ上でスクロールして探すんですか？
うーーん、これは不便だ！
ということで、次回は検索機能を実装していきます。
ではまた！
