はじめに

「みんなで自由にマーカーを置ける地図があったら面白そう」

そんな思いつきから、Mina
Mapという地図アプリを個人開発しました。

この記事では、サービスの概要と使用した技術スタックについて紹介しま
す。

Mina Mapとは？

Mina Mapは、誰でも自由にマーカーやコメントを追加できるオープンな
地図サービスです。

Google Mapは便利ですが、「自分だけのマーカーを自由に置きたい」「み
んなで一つの地図を作りたい」と思ったことはありませんか？

既存の地図サービスは閲覧がメインで、ユーザーが自由に編集できるも
のは意外と少ないと感じていました。

そこで、

「みんなで簡単に地図を作れたら楽しそう！」

というシンプルな動機から開発をスタートしました。

Wikipediaのように誰でも編集できる地図、そんなイメージです。

Supabaseを選んだ理由は、認証・データベース・ストレージが一つの
サービスで完結するからです。個人開発では「なるべく管理するものを減
らす」ことが継続のコツだと思っています。

React Leafletは、Google Maps
APIと違って無料で使えるのが大きなメリット。CartoDB Voyagerタイルを
使うことで、見やすくモダンなデザインの地図を実現しています。

SupabaseのRLSを活用し、「自分が作成したマーカーのみ削除可能」と
いったアクセス制御をデータベースレベルで実装しています。

アップロード時にクライアント側で画像を自動リサイズ。ストレージ容量
の節約とロード時間の短縮を実現しています。

地図を引いた状態（低ズーム）ではマーカーを非表示にし、パフォーマン
スを最適化。ズームインすると詳細が表示される仕組みです。

「みんなで地図を作る」というコンセプトで開発したMina Map。

技術的には、Supabase + React Leafletの組み合わせが個人開発の地図ア
プリには最適だと感じました。無料枠でかなりのことができるので、同じ
ようなサービスを作りたい方の参考になれば幸いです。

ぜひ一度触ってみてください！

最後まで読んでいただきありがとうございました。
いいねやコメントいただけると励みになります！