写真から位置を取得して地図に表示する方法

〜Exifデータと地図の連携で可視化する「撮影の瞬間」〜
対比：写真は記録か、それとも記憶か
技術の進歩と背景：Exif × Leaflet の連携
実装例：画像から位置情報を読み取り地図に表示
同様の事例：災害記録、地域観光、環境モニタリング
因果関係：位置情報の有無がもたらす違い
まとめ：写真が語る「場所」の力

〜Exifデータと地図の連携で可視化する「撮影の瞬間」〜

スマートフォンやデジタルカメラで撮影された写真には、多くの場合「Exif（Exchangeable image file format）」という付加情報が含まれています。撮影日時、カメラの設定、そしてGPSによる位置情報など、その瞬間を裏付けるメタデータです。

とりわけGPS情報は、撮影場所を地図上で可視化するうえで非常に有用です。本記事では、Exifから緯度経度を取得し、地図ライブラリ「Leaflet」を使って写真の撮影場所を地図上に表示する方法を、実際のコードとともに解説します。

Exifデータを扱うことで、観光記録、調査報告、防災記録などさまざまな応用が可能になります。

対比：写真は記録か、それとも記憶か

これまで写真は、目に見える「記録」としてだけでなく、「思い出」としての記憶の装置として扱われてきました。しかしExifデータを活用すれば、写真は単なる静的な記録ではなく、「空間」に根差した動的なデータとなります。

例えば、同じ風景の写真でも、撮影された正確な場所（緯度34.6895、経度135.1953）が取得できれば、被写体の位置関係、方角、距離の分析が可能です。それは、記憶の曖昧さを補完し、現地検証や空間分析への橋渡しにもなります。

技術の進歩と背景：Exif × Leaflet の連携

では、ExifのGPS情報を読み取って、地図に表示する仕組みを見ていきましょう。今回使用する技術要素は以下の通りです。

Exif情報取得ライブラリ：exif-js
JavaScriptでExifメタデータを読み取るための軽量ライブラリです。
地図ライブラリ：Leaflet.js
OpenStreetMapなどを表示するためのオープンソース地図表示ライブラリです。

これらを組み合わせることで、ブラウザだけで画像ファイルから位置情報を抽出し、地図にプロットするWebアプリを構築できます。

実装例：画像から位置情報を読み取り地図に表示

以下に、実際に動作するHTML＋JavaScriptのコードを示します。このコードをローカルで .html ファイルとして保存し、ブラウザで開けば動作します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Exif位置表示</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map { height: 400px; margin-top: 20px; }
  </style>
</head>
<body>
  <h2>写真から位置を取得して地図に表示</h2>

  <input type="file" id="fileInput" accept="image/*" />
  <div id="map"></div>

  <script src="https://unpkg.com/exif-js"></script>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

  <script>
    let map = null;

    function toDecimal(coord, ref) {
      const d = coord[0].numerator / coord[0].denominator;
      const m = coord[1].numerator / coord[1].denominator;
      const s = coord[2].numerator / coord[2].denominator;
      let dec = d + m / 60 + s / 3600;
      if (ref === "S" || ref === "W") dec = -dec;
      return dec;
    }

    document.getElementById("fileInput").addEventListener("change", function () {
      const file = this.files[0];
      if (!file) return;

      EXIF.getData(file, function () {
        const lat = EXIF.getTag(this, "GPSLatitude");
        const lon = EXIF.getTag(this, "GPSLongitude");
        const latRef = EXIF.getTag(this, "GPSLatitudeRef");
        const lonRef = EXIF.getTag(this, "GPSLongitudeRef");

        if (lat && lon && latRef && lonRef) {
          const latitude = toDecimal(lat, latRef);
          const longitude = toDecimal(lon, lonRef);

          if (map) {
            map.remove();
          }

          map = L.map("map").setView([latitude, longitude], 15);

          L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: '&copy; OpenStreetMap contributors'
          }).addTo(map);

          L.marker([latitude, longitude]).addTo(map)
            .bindPopup("撮影場所")
            .openPopup();

        } else {
          alert("この写真にはGPS情報が含まれていません。");
        }
      });
    });
  </script>
</body>
</html>

このコードでは、Exifに含まれるGPS情報を度分秒形式から10進数に変換する toDecimal() 関数を用いて、Leaflet地図上にピンを表示します。

同様の事例：災害記録、地域観光、環境モニタリング

この技術は、単なる趣味用途にとどまりません。以下のような分野で応用が進んでいます。

災害現場の可視化
消防隊や災害対応チームが撮影した現場写真を位置情報と共に記録することで、復旧や分析に役立ちます。
観光・地域ブランディング
地域イベントや観光スポットの写真を、位置情報付きでマッピングすることで、訪問者向けのガイドコンテンツを生成できます。
自然観察・モニタリング
動植物の観察写真を位置と共に記録することで、エリアの生態分布を把握する科学的手法としても注目されています。

因果関係：位置情報の有無がもたらす違い

位置情報が含まれる写真と、そうでない写真では、扱い方に大きな違いが生まれます。

例えば、防災対応において「いつ・どこで・何が起きたか」を即座に地図上で把握できるか否かは、初動対応の質に直結します。ExifデータのGPSがあれば、その「どこで」に正確にアクセスでき、地図情報と照合しながら対策が可能となります。

逆に位置情報が欠落していると、記憶やメモに頼るしかなく、現場検証や再現性に課題を残します。

まとめ：写真が語る「場所」の力

写真というメディアは、視覚だけでなく、空間という第2の情報を内包しています。Exifに含まれるGPS情報を活用すれば、撮影された「その場所」に立ち戻ることが可能になります。

今回ご紹介したHTMLコードは、Web技術だけでExifを解析し、Leafletを使って撮影地点を地図に表示するものです。小規模なWebアプリはもちろん、地域活動や業務システムの一部としても応用が可能です。

あなたの撮影した「その瞬間」が、次の誰かの「行動」を促す起点になるかもしれません。ぜひ、写真のExif情報を活かした地図連携の世界に触れてみてください。

#Exif #位置情報 #Leaflet #オープンデータ #写真活用 #WebGIS #Exif可視化 #JavaScript #地図アプリ開発 #空間情報活用