はじめに
「みんなで自由にマーカーを置ける地図があったら面白そう」
そんな思いつきから、Mina
Mapという地図アプリを個人開発しました。
この記事では、サービスの概要と使用した技術スタックについて紹介しま
す。
Mina Mapとは？
Mina Mapは、誰でも自由にマーカーやコメントを追加できるオープンな
地図サービスです。
主な機能
| 機能 | 説明 |
|---|---|
| 📍 マーカー追加 | 地図上の好きな場所にマーカーを設置 |
| 💬 コメント機能 | 場所に関するコメントを投稿 |
| 📸 画像アップロード | マーカーに写真を添付して共有 |
| 🏷️ ランドマーク名 | マーカーに名前をつけて地図上に表示 |
| 🗺️ ルート計算 | 2点間の経路を表示 |
| 📋 掲示板 | マーカーごとの掲示板で情報交換 |
こんな使い方を想定しています
- お気に入りのカフェやレストランをマッピング
- 地域のおすすめスポットをみんなで共有
- イベント会場や待ち合わせ場所の共有
- 旅行の計画・思い出の記録
開発の動機
Google Mapは便利ですが、「自分だけのマーカーを自由に置きたい」「み
んなで一つの地図を作りたい」と思ったことはありませんか？
既存の地図サービスは閲覧がメインで、ユーザーが自由に編集できるも
のは意外と少ないと感じていました。
そこで、
「みんなで簡単に地図を作れたら楽しそう！」
というシンプルな動機から開発をスタートしました。
Wikipediaのように誰でも編集できる地図、そんなイメージです。
技術スタック
フロントエンド
| 技術 | 用途 |
|---|---|
| React + TypeScript | UIフレームワーク |
| Vite | ビルドツール |
| Tailwind CSS | スタイリング |
| React Leaflet | 地図表示（OpenStreetMap） |
バックエンド
| 技術 | 用途 |
|---|---|
| Supabase | BaaS（認証・DB・Storage） |
| PostgreSQL | データベース（Supabase内蔵） |
| Edge Functions | サーバーレス関数 |
インフラ・その他
| 技術 | 用途 |
|---|---|
| Vercel | ホスティング |
| Stripe | 決済（サブスクリプション） |
| CartoDB Voyager | 地図タイル |
なぜこの構成？
Supabaseを選んだ理由は、認証・データベース・ストレージが一つの
サービスで完結するからです。個人開発では「なるべく管理するものを減
らす」ことが継続のコツだと思っています。
React Leafletは、Google Maps
APIと違って無料で使えるのが大きなメリット。CartoDB Voyagerタイルを
使うことで、見やすくモダンなデザインの地図を実現しています。
工夫したポイント
1. Row Level Security（RLS）でセキュリティ確保
SupabaseのRLSを活用し、「自分が作成したマーカーのみ削除可能」と
いったアクセス制御をデータベースレベルで実装しています。
2. 画像の自動リサイズ
アップロード時にクライアント側で画像を自動リサイズ。ストレージ容量
の節約とロード時間の短縮を実現しています。
3. ズームレベルに応じた表示制御
地図を引いた状態（低ズーム）ではマーカーを非表示にし、パフォーマン
スを最適化。ズームインすると詳細が表示される仕組みです。
今後の展望
- マーカーの検索・フィルター機能
- お気に入りマーカーの保存
- マーカーのカテゴリ分類の拡充
- PWA対応（オフライン閲覧）
おわりに
「みんなで地図を作る」というコンセプトで開発したMina Map。
技術的には、Supabase + React Leafletの組み合わせが個人開発の地図ア
プリには最適だと感じました。無料枠でかなりのことができるので、同じ
ようなサービスを作りたい方の参考になれば幸いです。
ぜひ一度触ってみてください！
最後まで読んでいただきありがとうございました。
いいねやコメントいただけると励みになります！