Facebookのアイコン画像を地図のマーカーアイコンに使う #JavaScript

Node.jsの勉強がてら地図上でお話しできるチャットアプリを作成していたら、チャットルームの管理が面倒なので、FacebookのMessengerで管理しているグループと連動できないかと思ってやってみた雑記です。

一応、Socket.ioを使ったチャットルームロジックの実装で完結してますが、おまけにFacebookのアイコン画像を地図上のマーカーアイコンとして表示する方法を簡単に紹介します。

というかとても簡単です。

アイコン画像URLの生成

FB.api関数のコールバックでresponse.idからFacebookのユーザーIDを取得できるので、以下のようにURL化すればよし。
これがユーザーIDに対応したFacebookのアイコン画像URLになります。

profile_img_url = 'https://graph.facebook.com/' + response.id + '/picture';

マーカーにアイコン画像を指定

さて、ここからが地図の話です。
地図はオープンソースのJavaScriptライブラリLeaflet を使っています。
Webの地図はGoogle一択な人も使ってみてください。
楽しいですよ。

アイコンを定義するためにLeafIconクラスのiconUrlオプションに先ほどのアイコン画像URLを指定します。
ちなみにLeafIconはLeaflet標準のアイコン生成クラスであるL.Iconの拡張クラスです。わざわざ拡張している訳は次のセクションで説明します。

locationIcon = new LeafIcon({iconUrl: profile_img_url});

L.markerクラスに上のlocationIconを指定して、addTo(map)で地図に追加します。
これで、地図の上にFacebookのアイコン画像がマーカーとして表示されます。

var marker = L.marker([lat, long], { alt: 'people', title: myname, icon: locationIcon }).addTo(map);

地図アイコンをちょっと素敵に

上でも述べましたが、LeafIconというクラスはL.Iconの拡張クラスです。
LeafIconをL.Iconに差し替えても何の問題もないのですが、アイコン画像をそのままマーカーとして地図に貼り付けるのでは芸がないし、地図にベタッと貼りついた感じは良いUIとは言えないので、CSSとアイコンの位置を調整してカスタムアイコン化しています。

.leaflet-marker-icon {
  border: 4px #fff solid; /* 白いボーダーライン */
  border-radius: 40px; /* 画像を円状に変形 */
  -webkit-border-radius: 40px;
  box-shadow: 0 0 0 2px #00D0CE, 0 8px 5px rgba(0,0,0,0.4); /* 緑のボーダーラインと影 */
  z-index: 999999999;
}

var LeafIcon = L.Icon.extend({
  options: {
    iconSize: [80, 80], // プロフィール写真のサイズ
    iconAnchor: [40, 40], // プロフィール写真の相対位置
    popupAnchor: [0, -38] // ポップアップの相対位置
  }
});

デモとソースはGitHubリポジトリを見てみてください。
当たり前ですが、デモとはいえ自分の位置が他の人にばれちゃうので気をつけて使ってくださいね。