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

Sharperlightには地図との連携機能が組み込まれています。クエリで抽出された座標情報をGoogleマップに表示できます。 Google My Mapsで提供されるものを含む幅広い表示タイプ (マーカー、ラインなど)を表示することができます。
更には、ラベル、タイトル、説明、詳細フィルター、onclickアクションなどの情報や機能を追加することもできます。

今回は、Basicな使い方をしてみようと思います。
そうですね。。。東京の山手線の主要な駅にマーカーを表示してみましょうか。

その前に大事な事。
Google Cloud Platformでプロジェクトを作成し、Maps JavaScript APIを有効にしてAPIキーを作成しておく必要があります。

クエリの作成

Sharperlightアプリケーションメニューからパブリッシャーを起動します。
新規ボタンで新しいWebレポート(公開クエリともいう)の作成を開始します。
コード、グループおよびタイトルを記述します。

クエリーを編集ボタンでクエリの設計に移ります。お馴染みのクエリビルダが起動します。
データベースに地図座標をもつデータがある場合は、そのデータベースに対してデータモデルを作成しSharperlightを接続することも可能ですが、ここではカスタムデータセットを定義して簡単に説明していこうと思います。
ということで、製品にはシステム、テーブルにはカスタム定義のデータセットを指定します。

準備するデータはこのようなものを準備します。

"Type","Position","Title","Label","Colour"
"Marker","{lat: 35.681384550223896, lng: 139.7671174976865}","東京駅","TS","red"
"Marker","{lat: 35.72965955077921, lng: 139.71088936935854}","池袋駅","IS","yellow"
"Marker","{lat: 35.68984458631095, lng: 139.70061210561343}","新宿駅","SJS","yellow"
"Marker","{lat: 35.658216943171034, lng: 139.70170017121214}","渋谷駅","SBS","yellow"

Type（必須）のMarkerとはこのような記号です。

Typeにはこの他にLineやRectangleなども指定できます。それらTypeによって必要とする座標の数も変化します。
Position（必須）はその名のとおり地図座標です。latはlatitudeで緯度、lngはlongitudeで経度を表します。
Title（必須）はツールチップです。
Label（必須）は記号と共に地図上に表示されます。
ColourではMarkerの色を指定します。

出力アイテムはこのようになります。

これでクエリは完成！OKボタンで保存します。

マップへの出力設定

Webレポートのダイアログに戻ったらグラフタブに移動します。今回はGoogle Mapsに関するプロパティだけを設定し、その他のプロパティは初期値のままとします。

お手持ちのAPIキーをAPIキープロパティに貼り付けます。
ズームプロパティは、地図が表示される時点でどれほどのズームで表示するかを数値で指定します。
中央プロパティは、表示される地図の中央をどこにするかを地図座標で指定します。今回は東京駅の座標を中央プロパティに設定します。
以上で作成は終了。適用ボタンで保存します。

ブラウザでの検証

Sharperlightサービスが起動していることを確認して、ビューボタンで表示します。
このような地図が表示されました。

おまけ

上野駅、品川駅、秋葉原駅、日暮里駅も追加してみます。また新宿駅から秋葉原駅にLineをオレンジ色で描いてみます。
Labelも日本語にしてみます。

"Type" , "Position" , "Title" , "Label" , "Colour", "Style"
"Marker" , "{lat: 35.681384550223896, lng: 139.7671174976865}"  , "JR東日本　東京駅です"  , "東京駅"  , "red"  , ""
"Marker" , "{lat: 35.72965955077921, lng: 139.71088936935854}"  , "JR東日本　池袋駅です"  , "池袋駅"  , "yellow" , ""
"Marker" , "{lat: 35.68984458631095, lng: 139.70061210561343}"  , "JR東日本　新宿駅です"  , "新宿駅"  , "yellow" , ""
"Marker" , "{lat: 35.658216943171034, lng: 139.70170017121214}" , "JR東日本　渋谷駅です"  , "渋谷駅"  , "yellow" , ""
"Marker" , "{lat: 35.71424993509081, lng: 139.7774164931519}"  , "JR東日本　上野駅です"  , "上野駅"  , "yellow" , ""
"Marker" , "{lat: 35.62870076172282, lng: 139.73876614844696}"  , "JR東日本　品川駅です"  , "品川駅"  , "yellow" , ""
"Marker" , "{lat: 35.72835436176079, lng: 139.7706454215451}"  , "JR東日本　日暮里駅です"  , "日暮里駅"  , "yellow" , ""
"Marker" , "{lat: 35.69859250044313, lng: 139.7730678444849}"  , "JR東日本　秋葉原駅です"  , "秋葉原駅"  , "yellow" , ""
"Line"   , "{lat: 35.68984458631095, lng: 139.70061210561343},{lat: 35.69859250044313, lng: 139.7730678444849}","","","orange","strokeWeight:4"

以上簡単な使用方法を試してみました。
では、失礼します。