はじめに
僕の作っている「FoodGram」というアプリではMapLibreを使用して投稿されたレストランの表示をしています。
最近は、投稿数が1200件を超えて、マップも充実してきました🙌
iOS/Androidのどちらもアプリをダウンロードすることができるので、ぜひ投稿をお待ちしています！
ダウンロードリンク
【 iOS 】
【 Android 】
MapLibreを採用する理由は以下のサイトで記載しています。
やりたいこと
- フード投稿されたレストランをピンを刺したい
- ピンの表示領域を調節していいようにしたい
具体的な実装方法
1. maplibre_glのインストール
flutter pub add maplibre_gl
2. iOS/Android初期設定
info.plist
<dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string>マップ表示にの現在地の取得のために許可が必要になります</string>
</dict>
android/app/src/main/AndroidManifest.xml
<manifest>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
</manifest>
3.ピンの表示領域を調整する
調節するやり方はとても簡単で、MapLibreMapControllerにあるものをうまく使うことで実装することができました。
/// ピンが重なっても表示されるかどうか
await state.mapController?.setSymbolIconAllowOverlap(false);
表示領域の違いの写真
２つの画像でアイコンのサイズが少し異なっていますが、お気になさらず。。。
| true | false |
|---|---|
 |
 |
対応したPRをご共有します
最後に
たったこれだけの設定でも、UIの見え方が大きく変わります。
今後も MapLibre を活用して、もっと見やすくて楽しい地図にしていきたいと思っています！
アプリの宣伝
個人開発で作成しているアプリの「FoodGram」についても少し語らせてください
FoodGramは、世界中のユーザーと食の楽しさを共有できるフードシェアアプリです。美味しい料理やお気に入りのグルメスポットを記録・共有しながら、みんなでグローバルな「フードマップ」を作りましょう🍜。
ダウンロードリンク
- 「FoodGram」は、フードシェアアプリとなっており、あなたの好きなレストランの食事をぜひこのアプリで共有していただけると嬉しいです!!