これはMapLibre Advent Calendar 2024の19日目の投稿です。
昔僕が書いたReact Nativeの本ではMapbox SDKを使ってトイレマップを実現していました。
当時(2018年)はまだMapLibreが存在していなかった時代です。
というわけで、今回はmaplibre-react-nativeを使って新しいトイレマップを作ってみました。
動かすだけなら以下の手順でいけると思います。
git clone https://github.com/smellman/ToiletMap-maplibre.git cd ToiletMap-maplibre npm install bundle install cd ios bundle exec pod install cd .. npm run start
あとは "ios/ToiletMap.xcworkspace" を開いてxcodeでシミュレーターを起動すればいけます。
起動したあとにトイレを検索ボタンを押すとOverpass API経由でトイレを検索します。
トイレアイコンをタップをすると詳細が表示されるというものです。
作り方は、普通にreact nativeのcliで新しいプロジェクトを作ってから、maplibre-react-nativeをインストールします。
npx @react-native-community/cli init ToiletMap cd ToiletMap npm install @maplibre/maplibre-react-native --save
maplibre-react-nativeはちょっと古いバージョン(alpha)が入ってしまうので、"^10.0.0-beta.11"に書き換えてもう一度npm installをします。
次にpod installとnpm run startをします。
cd ios bundle exec pod install cd .. npm run start
あとはxcodeで"ios/ToiletMap.xcworkspace"を開いてシミュレーターでビルドしながらApp.tsxを書き換えていきます。
まぁ、コード読めばだいたいわかると思います！
ちなみにiPhoneの実機ではビルド失敗するのでそれは解決したら報告します！
ではでは。
