以前の記事でGoogleマップに簡単なデータを表示しました。まだいくつかオプションがあるのでそれらを見てみます。
マーカーをクリックした場合に追加情報を表示と地図上に円を描くことを試してみたいと思います。
既存レポートの複製
Sharperlightアプリケーションメニューからパブリッシャーを起動します。
以前に作成したWebレポートを選択し、右クリックメニューから複製を選びます。
正常に作成されましたというメッセージが表示されます。
クエリの編集
複製されたレポートをダブルクリックで開きます。
コードとタイトルをそれぞれ変更します。
クエリーを編集ボタンでクエリビルダを起動します。
データセットを編集します。
マーカーをクリックした場合にポップアップでそのマーカーに関する情報を表示するといったことをしたいです。
この例ではマーカーが駅名を表しているので、その駅の情報を表示します。ウィキペディアを利用します。
データセットにContentという列を追加し、各駅の情報が掲載されているURLを貼り付けていきます。
また、池袋駅を中心とした半径1.5Kmの円をオレンジ色で表示してみます。
"Type" , "Position" , "Title" , "Label" , "Colour", "Style", "Content"
"Marker" , "{lat: 35.681384550223896, lng: 139.7671174976865}" , "JR東日本 東京駅です" , "東京駅" , "red" , "", "https://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC%E9%A7%85"
"Marker" , "{lat: 35.72965955077921, lng: 139.71088936935854}" , "JR東日本 池袋駅です" , "池袋駅" , "yellow" , "", "https://ja.wikipedia.org/wiki/%E6%B1%A0%E8%A2%8B%E9%A7%85"
"Marker" , "{lat: 35.68984458631095, lng: 139.70061210561343}" , "JR東日本 新宿駅です" , "新宿駅" , "yellow" , "", "https://ja.wikipedia.org/wiki/%E6%96%B0%E5%AE%BF%E9%A7%85"
"Marker" , "{lat: 35.658216943171034, lng: 139.70170017121214}" , "JR東日本 渋谷駅です" , "渋谷駅" , "yellow" , "", "https://ja.wikipedia.org/wiki/%E6%B8%8B%E8%B0%B7%E9%A7%85"
"Marker" , "{lat: 35.71424993509081, lng: 139.7774164931519}" , "JR東日本 上野駅です" , "上野駅" , "yellow" , "", "https://ja.wikipedia.org/wiki/%E4%B8%8A%E9%87%8E%E9%A7%85"
"Marker" , "{lat: 35.62870076172282, lng: 139.73876614844696}" , "JR東日本 品川駅です" , "品川駅" , "yellow" , "", "https://ja.wikipedia.org/wiki/%E5%93%81%E5%B7%9D%E9%A7%85"
"Marker" , "{lat: 35.72835436176079, lng: 139.7706454215451}" , "JR東日本 日暮里駅です" , "日暮里駅" , "yellow" , "", "https://ja.wikipedia.org/wiki/%E6%97%A5%E6%9A%AE%E9%87%8C%E9%A7%85"
"Marker" , "{lat: 35.69859250044313, lng: 139.7730678444849}" , "JR東日本 秋葉原駅です" , "秋葉原駅" , "yellow" , "", "https://ja.wikipedia.org/wiki/%E7%A7%8B%E8%91%89%E5%8E%9F%E9%A7%85"
"Line" , "{lat: 35.68984458631095, lng: 139.70061210561343},{lat: 35.69859250044313, lng: 139.7730678444849}","","","orange","strokeWeight:4", ""
"circle" , "{lat: 35.72965955077921, lng: 139.71088936935854}","","","orange","radius:1500,strokeWeight:4", ""
OKボタンでクエリを保存し、適用ボタンでレポートを保存します。
レポートの検証
ビューボタンを利用して、レポートをブラウザで拝見します。Sharperlightサービスの起動をお忘れなく。
先ずは池袋駅の周りに円が表示されているのが確認できます。成功！！！
次に、東京駅のマーカーをクリックしてみます。ポップアップが表示されウィキペディアの内容が表示されました。これまた成功！！！
これらは数あるオプションの幾つかにすぎません。
様々な用途に応じてこれらのオプションを屈指し、簡単に必要な情報を発信できるページが作成できればいいですね。
では、失礼します。