兵庫県が公表したため池データベースから、Google Maps PlatformでSplit.jsを組み合わせ、Bootstrapを使って、レスポンシブデザインで作成した地図。
Maps JavaScript APIのサンプルにあるResizable Split Map Panesを参考に作成。一画面を分割し、中央の分割バーを左右にスライドさせることで、地図と写真を任意に見比べることができる。
leafletのプラグインであるLeaflet.Syncを使った「ひょうごのため池【地図と写真で見る】(Leaflet.Sync)」の地図と写真が同期する2画面表示と比較してみると面白い。
上の画像をクリックすると、開始画面は左にGoogle MapのROADMAP(地図)、右にGoogle MapのSATELLITE(航空写真)を表示。市区町別選択により、ズームアップして左の地図画面でマーカー表示。マウスオーバー（ホバー）で属性表示が可能。
【出典】この地図は、以下の著作物を改変して利用しています。
【ご注意】地図メニューのGoogle関係の地図は、Google Maps Platformサービスの1日当たりのリクエスト、1分当たりのリクエスト及び1ユーザー1分当たりのリクエスト回数に制限を設けていますのでご了承ください。この場合、Gooogle Maps Platform版の利用も制限されます。 太平洋標準時0時にリセット[JST17時(夏時16時)]
コメント