http://leafletjs.com/ と http://riotjs.com/ を一緒に使ってみます。 1. シナリオ 地理院地図で 平成28年熊本地震・UAV動画 というレイヤーが公開されています。このレイヤーの実体は緯度経度と動画のタイトル、youtube へのリンク、撮影日がエンコードされた GeoJSON で以下の URL から入手が可能です。 https://cyberjapandata.gsi.go.jp/xyz/20160414kumamoto_0416uav/2/3/1.geojson 地理院地図でこのレイヤーを表示 すると、以下のようにポップアップに最低限の情報とリンクが表示されます。 ここでは、ポップアップの中身の HTML を Riot.js を使ってカスタマイズし、以下のように動画を埋め込みで再生できるようにしてみましょう。 2. コード 以下の3つのファイル
