MENU

溶けかけてるうさぎ HP GALLERY BLOG TOP RECENT ARTICLES POPULAR ARTICLES ABOUT THIS BLOG

CATEGORY

大学 (140) 仕事 (17) 航空宇宙 (104) 写真 (78) 旅行 (32) 飯・酒 (17) コンピュータ (119) その他 (44)

TAG

ARCHIVE

RECENT

【写真】撮影写真を Map 上に表示できるようにした 【カメラ】X100 シリーズが好きすぎる(主にリーフシャッタ) 【カメラ】X100V から X100VI に買い替えました 【自宅サーバー】Google Domains から Cloudflare にドメインを移管 【カメラ】FUJIFILM XF レンズのサイズ比較ができるようにしてみた

【写真】撮影写真を Map 上に表示できるようにした

事象発生日:2024-06-16

記事公開日:2024-10-26

アクセス数:439

仕事でも Web GIS を扱い始めたことや,最近は GPS 情報を EXIF に保存しながら写真を撮影していることなどから,自分の撮影した写真を雑に公開しているページ『Gallery』写真を撮影場所で表示 できるようにしました.

モチベーション

最近仕事でも Web GIS を触るようになり,さらに,そういえば数年前から趣味の写真で撮影するときに EXIF に GPS 情報を付与するようにしてるな,と思い出したことから,撮影した写真を撮影場所で地図上に表示できたら便利だよな,と思うようになりました.

地図描画ライブラリとして,仕事では にあるとおり MapLibre を使っていて,どうせならプライベートでは違うものを,ということで Leaflet を使ってみることにしました.

完成形

こんな感じで実装できました.

▶ 『GALLERY Map

地図上に表示

こんな感じです.

まだ 2024 年以降の写真を登録してないので,表示される枚数はそこまで多くないです.

また,撮影範囲で絞り込むと,その範囲で撮影されたピンに絞り込まれ,ちょうどよいズームレンズに調整されるようにしたり,ある画像から同じ日に撮影された画像一覧にジャンプできるようにしたり,といった機能も実装してみました.

自分の過去写真を探すのに便利です.

写真詳細ページでの撮影場所の表示

写真詳細ページでも,撮影場所がパッと分かるようにしておきました.

出典・参考

ArkEdge Space Blog. サーバレスではじめる Web GIS アプリのプロトタイピング. Retrieved June 16, 2024, from https://blog.arkedge.space/entry/2024/06/05/080000
MapLibre. Retrieved October 26, 2024, from https://maplibre.org/
Leaflet. Retrieved October 26, 2024, from https://leafletjs.com/

関連記事

コメントを投稿

名前

Email (※公開されることはありません)

コメント