【パブリッシャー】Googleマップにデータを表示してみる（応用）

GoogleマップAPIを利用したレポート作成についてはこれらの記事
* [Googleマップにデータを表示してみる](https://qiita.com/Miki_Yokohata/items/d781a68c729974c9ddb6)
* [Googleマップにデータを表示してみる（拡張）](https://qiita.com/Miki_Yokohata/items/09b9cffd9ad2dad88465)
 
で簡単にみてきました。その時はカスタムデータを手作りで作成していましたが、今回は一般に提供されているデータを利用してみたいと思います。
Googleで`座標情報のあるデータ`を検索すると、札幌市様が座標情報を持ったデータをCSV形式で提供されているということが分かりました。
早速そのCSVデータをダウンロードしてみました。
### CSVデータのダウンロード ###
この[URL](https://data.pf-sapporo.jp/)からアクセスします。
ページが表示されたら**データカタログ**の**経済・観光**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1af568a6-e9b2-e659-97a4-0b240f1b0a02.png)
データセットの一覧が表示されるので、このデータセットを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d1b7600c-7e20-5ae8-954e-7c78c8140bff.png)
`CSV`ボタンをクリックして先に進みます。
次のページでは`探索`メニューの**ダウンロード**をクリックしてCSVファイルのダウンロードを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/06b03add-f8e7-a007-a459-54eeabbc3f64.png)
CSVファイルがダウンロードされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d59a3683-5d72-acde-c11d-4504dcd9dde8.png)
### レポートの作成 ###
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから**パブリッシャー**を起動します。
`新規`ボタンで新しいレポートの作成を開始します。
#### 一般属性 ####
コード、グループおよびタイトルを記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/869f59fd-62bc-515c-46ad-ab09f47add6b.png)
#### クエリ - フィルター ####
`クエリーを編集`ボタンでクエリビルダを起動します。
ダウンロードしたCSVファイルをデータソースとして使用するので、`製品`には**システム**、`テーブル`には**CSVファイル**を選択します。
`ファイル名またはURLリンク`フィルターでは、先ほどダウンロードしたCSVファイルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/77f08244-612a-0ffb-a06b-76e430b8743e.png)
#### クエリ - 選択領域 ####
選択すると、SharperlightエンジンがCSVファイルを解析し、選択可能なフィールドを`選択`領域に展開表示してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/991ab659-9518-15fa-1146-67612bc644fe.png)
#### クエリ - 出力領域 ####
では、Google Map API用のデータセットを作成していきます。
次の5つの要素 **Type**, **Position**, **Title**, **Label**, **Content**を準備していきます。
**Type**は、拡張表現のTextタイプで`"Marker"`とします。名前はもちろん**Type**とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/787135fe-35c6-cfe4-46e2-04b6b07ba1b6.png)
**Position**については、このような
```
"{lat: 123456.123, lng: 123456.123}"
```
文字列を準備する必要があるので、これも拡張表現で作成します。緯度と経度フィールドを出力領域に設定し非表示とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3c699040-76bb-9083-304e-65fa870a3744.png)
そして新たに拡張表現を追加して、以下のような構文を作成します。
拡張表現から非表示にしている緯度と経度フィールドを参照しています。名前はもちろん**Position**です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/56f8cfd9-550f-5db4-9bd6-e38266f74059.png)
**Title**、つまりツールチップには、名称＿英語フィールドの値を設定します。そして**Label**には、名称フィールドの値を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ed373fac-e00c-d33c-1c05-773f2532cdca.png)
最後に**Content**です。これはHTMLのList形式で表示させます。情報として`住所`、`電話番号`および`設置者`の値を使用します。
下記のような定義になります。定義文からそれぞれ住所、電話番号、設置者フィールドを参照しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/51592194-591c-6f8d-6a5e-39ab64327fb2.png)
全部で5つの出力フィールド、完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4b8c9325-5b5d-ca3d-aa43-134e600babe2.png)
`OK`ボタンでクエリ保存して、`適用`ボタンで一旦レポートを保存します。
#### グラフ属性 ####
グラフタブに移動します。グラフの種類を**Layer Map Road**とし、ここではGoogle Mapに関する属性のみ設定します。その他は初期値のままで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9821229d-ad6a-4bba-773a-f8dd68c65d3e.png)
また、プロンプトは必要ないので、チェックを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/72964009-c655-f2e5-b1a2-73f120e5b9c7.png)
#### オプション属性 ####
オプションタブに移動して既定の出力形式を**Chart**に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8517c00d-84c1-dda5-fff8-b92654a018a4.png)
`適用`ボタンでレポートを保存します。
### レポートの検証 ###
`ビュー`ボタンでレポートをブラウザで表示します。Sharperlightサービスの起動をお忘れなく。
座標情報を元にマーカーがマップ上に表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/915ec985-c4b1-0941-8cbc-9d7531b1e94a.png)
マーカーをクリックすると拡張表現で作成した情報がポップアップで表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/643ce967-5957-e93c-c18f-d0082ca9f722.png)
### おまけ ###
データセットにColour属性を追加します。`クエリを編集`からクエリ開いて、新しい拡張表現を追加、もちろん名前は**Colour**。そして構文には、ライム色のカラーコードを文字列として設定。このようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/5cd652be-28d1-a491-e3a0-f805f16b4300.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1ebb3e25-5c17-dbe9-b3f3-1f467023dc30.png)
結果は、このようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8aaeaf9d-4be1-2774-f4ea-6f7bf8670dd4.png)
では、失礼します。