2026/10/08 10:44

Map Capture — 地図にひとこと添えて、場所を伝える

地図と座標、文字メモ、手書きを一枚の画像にまとめるMap Capture。バイブコーディングでつくった道具を、使い方と仕組みから掘り下げる。

地図のリンクだけでは、どこを見てほしいかまで伝わらないことがある。「この角で待ち合わせ」「この道から入る」といったひとことを、地図と一緒に渡したい。Map Captureは、そのための小さなWebアプリだ。AIと対話しながら、バイブコーディングでつくった。

場所と、その場所についてのメモを一枚に

画面の中心には赤い照準があり、上部にはその位置の緯度・経度とズーム値が表示される。地図を動かすと数値も変わる。ここで表示しているのは地図の中心座標であって、常に自分の現在地というわけではない。

起動時には現在地の取得を試みる。取得できなければ東京駅付近から始まり、あとからGPSボタンで現在地へ戻ることもできる。場所を決めたら文字メモを入力し、必要ならPenで赤い線を引く。Saveで、地図・座標・文字・手書きをまとめたPNGを保存する。

待ち合わせの入口を囲む、歩いた道に印を付ける、現地で気づいたことを短く書く。用途は違っても、見る人に「ここ」と「何を伝えたいか」を一緒に渡せる。

地図の表示にはLeafletを使い、その上に手書き用のCanvasを重ねている。Penがオフのときは地図を操作でき、オンにすると指やマウスの動きが線になる。この切り替えによって、同じ画面を「探す面」と「書く面」に使っている。

背景地図はOpenStreetMapと地理院地図を切り替えられる。ズームボタンは細かい刻みで拡大・縮小し、照準を中心に、伝えたい範囲を調整する。保存にはhtml2canvasを使い、下部の操作ボタンを除いた地図エリアを画像にしている。

この道具の手書きは画面上の位置に描かれる。線に緯度・経度を付けて保存しているわけではないため、書いたあとに地図を動かすと、線と場所の関係がずれる。背景地図の切り替えも、線を地理的に追従させる処理ではない。

使うときは、先に地図の位置と縮尺を決め、最後に書き込んで保存するのが扱いやすい。Clearは手書きを消す操作で、文字メモまで消すものではない。再編集できる地図データや継続的な記録ではなく、その場の説明を画像にする道具として考えると用途がはっきりする。

このアプリでは、地図、位置情報、手書き、画像保存という別々の機能を、一つの操作の流れにつなげている。コードを読むと、機能の数以上に「どの順番で触るか」が使いやすさを左右することが分かる。

次に育てるなら、地図を動かす際の手書きの扱い、保存成功の表示、文字や線を再編集できる仕組みが検討点になる。この記事は現在のコードに基づく紹介であり、端末ごとの位置情報取得や画像保存の成否を網羅して確認したものではない。