Geolocationフィールドを使ってBing Mapsにピンを立ててみた

例えばですが、営業所や事業所の位置をGoogle マップみたいな地図サービス上で表示させることってよくありますよね。
それをSharePointでもやってみたいと思い、遅ればせながらSharePoint2013の新機能、Geolocationフィールドを使って試してみることにしました。

Geolocationフィールドってなんぞ?という向きはとりあえずこちらを見てください。
SharePoint 2013 でロケーションとマップ機能を組み込む

要するに、リストにGeolocationフィールドという列を追加して位置情報を登録しておくと、自動でBing Mapsにピン表示してくれるというスグレモノです。
・・・なんですが、実際に使えるようになるには、いろいろ前提条件やら準備やらあってなかなか大変でした。
ので、その顛末をまとめておきます。

以下の記事はPowerShellもVisual Studioも使わずに実装するやり方です。サーバーに権限がなく、手持ちの武器はテキストエディタだけ、というみなさんもぜひ試してみてください。

大前提
オンプレミス環境のみですが、上記MSの記事に、

地理位置情報フィールドの値またはデータをリストに表示するには、SQLSysClrTypes.msi という MSI パッケージをすべての SharePoint フロントエンド Web サーバーにインストールする必要があります。このパッケージは、新しい図形座標、地理、および階層 ID の種類を SQL Server 2008 に実装するコンポーネントをインストールします。

とあります。なので、オンプレ環境で検証する場合は、SQLSysClrTypes.msi がWFEにインストール済みか確認してください。
SharePoint Onlineであれば、既定でインストールされているのですぐに作業が開始できます。

準備その1:Bing Mapsキーを取得する
Bing Mapを使うためには、まず Bing Maps Account Centerでアカウント作ってキーを取得する必要があります。
Microsoftにアカウントがあればそれでサインインできるので、新規でアカウントつくる必要はありません。
サインインすると、左側の「My Account」のところに「Create or view keys」というメニューがあるのでクリックします。
20140919-01
クリックすると以下のような画面になるので、「Application name」に適当に入れてSubmitします。
20140919-02
これで、Bing Mapsキーが取得できました!

※今回は検証目的だったので、個人のアカウントでTrialキーを取得しちゃいましたが、実環境で使う場合はBing Mapの利用規約やライセンスをきちんと確認する必要があります。
ライセンスについてはこちらの記事が参考になりました。
Bing Maps Key のライセンスについて調べてみた – chorus log

準備その2:サイトコレクションにBing Mapsキーを設定する
MSDNの記事
[方法] SharePoint 2013 で、Web およびファーム レベルで Bing Maps キーを設定する
ではPower ShellかVisual Studioでコンソールアプリケーションを作って設定するやり方しか紹介されてません。
サーバーにログインできず、Visual Studioはおろかテキストエディタしか持たないエンドユーザーでは手も足も出ません。
ここでかなりめげそうになりTwitterでぶつぶつ言ってたところ、Microsoft MVP 太田さんから以下の記事をご紹介いただき(ありがとうございます!)、
SP 2013: Getting started with the new Geolocation field in SharePoint 2013 – Tobias Zimmergren's thoughts on technology and business
JavaScriptだけでキーを設定できるのがわかりました。コードを書く際は、上記の記事を参考にしてみてください。

準備その3:Geolocationフィールドをリストに追加する
これで、ようやくGeolocationフィールドを使える状態になったわけですが、このフィールド、MSDNの記事
[方法] SharePoint 2013 で地理位置情報列をプログラムでリストに追加する
によると

既定では、[地理位置情報] 列が SharePoint リストに含まれていません。[地理位置情報] 列を SharePoint リストに追加するには、コードを記述する必要があります。

とあり、ブラウザからGUIで追加することができません。
さらに、上記の記事はVisual Studioを使ってクライアント オブジェクト モデルでフィールドを追加するやり方しか紹介されてませんので、準備その2でご紹介したTobias Zimmergrenさんの記事を参照してJavaScriptでコードを書きます。

・・・と、ここまで書いたところで後出しジャンケンのようで申し訳ないですが、上記準備その2とその3をまとめてできちゃう素晴らしいコードを紹介している記事をみつけました。
My SharePoint Insight: Adding geolocation field to SharePoint Online
こちらのコードをまるっと使えば、フィールドの追加までいとも簡単にできてしまいます。
20140919-07
いやーほんとにありがたいですね・・・
(ただし、私の環境ではHTMLをそのままスクリプトエディタに貼り付けると、inputタグのonclickイベントが消えてしまったので別ファイルにしてコンテンツエディタ webパーツでリンクしました)

Geolocationフィールドを追加したリストの設定を見てみます。
20140919-03
ちゃんと追加されていますね。
これで、ようやくリストアイテムに位置情報を追加できるようになりましたのでアイテムを作ってみます。
新規アイテム作成フォームで、「Specify location」をクリックします。
20140919-04
すると、緯度経度を入力するポップアップが出ますので、入力します。
20140919-05
これだけで、さっそくフォーム上にBing Mapsに位置がピンされた状態で表示されます。
20140919-06

ビュー上で地球儀のマークをクリックするとBing Mapsがポップアップ表示されます。
20140919-08

もうここまでできれば終わったも同然で、あとはこちらのMSDNの記事なり
SharePoint 2013 で地理位置情報フィールドのマップ ビューを作成する
見ていただければいろいろと好きにできると思うのですが、実際作っててはまったりしたポイントをおまけに書いておきます。

はまりポイント1:マップビューでBing Mapsの大きさを変えたい!
私の環境のせいかもなのですが、マップビューにしたときにBing Mapsが横長になってしまって、広範囲の地図を表示させたいときにあんまりうれしくありません。
20140919-09
ウィンドウの大きさに左右されるのかなーってちょっと思ったのですが・・・
で、リストビューwebパーツの編集で高さを固定にしてみたりもしたのですが、地図の大きさは変わってくれず。
最終的に以下のようなCSSで高さを固定しました。

#cardsContainer_WPQ2, #mapContainer_WPQ2{
	height: 650px !important;
}

※CSSで指定しているid名は環境によって違うと思うので、ご自身の環境に合わせて変えてくださいね。

はまりポイント2:左側のリストとポップアップで表示させるプロパティを変えたい!
デフォルトだと、地図左側のリストに表示されるのと、ピンにマウスホバーしたときに表示されるポップアップのプロパティは同じになるようです。
20140919-10
でも、左側のリストはタイトルだけでいいけど、ポップアップではタイトルに加えて詳細説明も、ってしたいシチュエーションがあると思います。
マップ ビューの設定にはそのように出しわけるオプションがなかったので、やはりCSSで表示を変えてみました。
ついでに、プロパティの列名が「Description:」みたいにポップアップ内に表示されてしまうので、それも非表示にしてみました。

div[id^='cardContent'], span[id^='MapCalloutContent'] span.ms-floatLeft.ms-soften{
	display: none;
}

完成形はこんな感じです。
20140919-11

そのほか、参考にさせていただいた記事です。
Adding Geolocation Columns to SharePoint Lists | Marc D Anderson's Blog

いかがでしたしょうか?
なんだか長い記事になっちゃいましたが、参考にしていただけるとうれしいです!

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中