smellman's Broken Diary

クソみたいなもんです

2024/12/19の日記 maplibre-react-nativeで作るトイレマップ

これはMapLibre Advent Calendar 2024の19日目の投稿です。

qiita.com

昔僕が書いたReact Nativeの本ではMapbox SDKを使ってトイレマップを実現していました。

github.com

当時(2018年)はまだMapLibreが存在していなかった時代です。

というわけで、今回はmaplibre-react-nativeを使って新しいトイレマップを作ってみました。

github.com

動かすだけなら以下の手順でいけると思います。

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でシミュレーターを起動すればいけます。

https://i.gyazo.com/fcbd3105aa3da7fb5e7d1d90b49e3b11.jpg

起動したあとにトイレを検索ボタンを押すとOverpass API経由でトイレを検索します。

https://i.gyazo.com/578ae6a0692c8a96244bc79c432a0138.jpg

トイレアイコンをタップをすると詳細が表示されるというものです。

https://i.gyazo.com/dcc62d12f7bb19000bc90c60d709eeaa.jpg

作り方は、普通に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を書き換えていきます。

github.com

まぁ、コード読めばだいたいわかると思います！

ちなみにiPhoneの実機ではビルド失敗するのでそれは解決したら報告します！

ではでは。

2024/12/08の日記 - OpenStreetMapでくそでかSVGを作るツールを作った

OpenStreetMapで高品質な印刷をするためにはOpenStreetMap.org公式でサポートされているSVG出力機能を使うことが多いです。

ただし、例えばくそでかいSVG(10000x10000とか)を出力するときなどはサーバに負荷をかけてしまい、出力できないことがあります。

wiki.openstreetmap.org

そもそも、くそでかい範囲をGUIで選択するのも厳しいです。

というわけで、OpenStreetMapのhashとサイズ指定をして任意をSVG画像を出力するツールを作りました。

github.com

使い方はREADMEを見てください。

例えば、10000x10000のSVGを出力してChromeで見て250%拡大した例を以下に張ります。

SVGファイルの例

こんな感じでくそでかいSVGファイルを作る事ができます。

また、ソースコードはmapnikを使う良い例になっていると思いますので、ぜひともソースコードも覗いてみてください。

ではでは。

P.S.

PDF出力にも対応しました。

2024/12/01の日記 - State of the Map 2024発表者募集のお知らせとFOSS4G 2024 Japan コアデイ動画公開のお知らせ

今日はFocus To-Doを使ってPomodoroしていていろいろはかどりました。

というわけで今日の成果その1です。

State of the Map 2024の発表者募集を開始しました。

stateofthemap.jp

来年の2月15日(土)に札幌にてFOSS4G Hokkaido 2024と合同開催です。

foss4g.hokkaido.jp

発表はオンラインでも受け付けているので是非。あと、2月14日(金)にもFOSS4G Hokkaido 2024 ハンズオンおよびOpenStreetMap Japanもくもく会があります。

合わせて北光社さんのブログもチェックしてください。

qiita.com

以下は今日の成果その2です。

先日開催したFOSS4G 2024 Japanの動画編集を昨日行い、今日全てYoutubeにアップロードしました。

FOSS4G 2024 Japan - YouTube

www.osgeo.jp

サイトに全部貼り付けるのとても疲れました(わら

僕はA会場に張り付いていたので、B会場及びC会場の様子もあとで見ようと思います。

とりあえず、チェックよろです！

2024/11/20の日記 - Githubで文字化け対応

Githubで長年悩まされていた文字化けの対応を行った。文字化けが入ったファイルがあるとmacOSなどでgit cloneに失敗するという現象を解決してみた。

用意する物はGithub Desktop for Windowsです。

まず、Github Desktop for Windowsでgit cloneをします。

すると"hoge.png?hogefuga"みたいなファイルがエラーになります。(macOSとかだとならない)

これらはGithub.comから直接編集して"?hogefuga"の所をひたすら削除していきます。

次に大本となる完全に文字化けしたファイルですが、Github Desktop for WIndowsではgit cloneは成功します。

で、Explorerで該当のファイルの文字化け部分をリネームしていきます。

次にこれらのファイルをgit rmしようとすると弾かれてしますので、この段階で文字化けを含んだファイルのフォルダをバックアップを取っておきます。

次にGithubから該当のディレクトリに移動して、ディレクトリごと削除します。

最後にバックアップしたフォルダを元に書き戻して、Github Desktopからpushして上げます。

あとはmacOSとかでgit cloneして正常にcloneできたら成功です。

CMSとかからstaticなファイルに変換してそれらをpushしてしまうと文字化けなどの現象が起きやすいので、皆さん注意しましょう。

ファイル名の正規化、絶対重要！

2024/11/16の日記 - ひさびさの帰省とNTFSでひっかかった話

久しぶりに帰省しました。

Image from Gyazo

Image from Gyazo

Image from Gyazo

帰省の目的はサーバのアップグレードを行う事。処理が手元のマシンだと死ぬのと、いい加減私用Laptopを仕事に使うのがきつくなってきたからです。

というわけで、(借り物の)サーバに128GBと8TBのストレージ(HDD)を突っ込みました。

さっそくHDDをGNU Partedで初期化。fdiskだと2TBまでしか作れなくてびびった。

で、仕事で借りてる外付けHDDをMacからrsyncしようとしたんだけど、動かない。

なんでだろと思って調べていたら、そもそもHDDがNTFSだったというオチでした。

じゃ、サーバに直接差すかと思ったら、こっちはUSB-Cの口が無いという罠がありました。

というわけで、別のLinuxサーバにHDDを差して、そこからrsyncするという手を使いました。

以下はコマンドのメモ。

sudo apt install ntfs-3g
sudo mkdir -p /mnt/ntfs
lsblk -f
sudo mount -t ntfs-3g /dev/sda1 /mnt/ntfs
cd /mnt/ntfs
rsync -av --partial --append --progress --no-perms --no-owner --no-group . 192.168.0.xxx:/work/hogehoge/data/

これで仕事がなんとかなりそうです。

.oO(結局借りてるサーバ使うのはどうかと思うんだけど、まぁしょうがない)

2024/08/21の日記 - 現場のプロがわかりやすく教える位置情報デベロッパー養成講座 今週末発売

本日僕が査読した本、「現場のプロがわかりやすく教える位置情報デベロッパー養成講座」の献本を受け取りました。

本書は「現場のプロがわかりやすく教える位置情報エンジニア養成講座」、通称「位置エン本」の続編となります。

位置エン本を持ってる方はもちろん、位置エン本を持ってない方は合わせてご購入ください。

現場のプロがわかりやすく教える位置情報デベロッパー養成講座

現場のプロがわかりやすく教える位置情報デベロッパー養成講座

Amazon

現場のプロがわかりやすく教える位置情報エンジニア養成講座

現場のプロがわかりやすく教える位置情報エンジニア養成講座

Amazon

2024/08/17の日記 - Organic MapsをObtainium経由でインストール

Organic MapsがGoogle Play Storeから削除されるという自体になったとのこと。

仕方が無いので、Obtainiumという仕組みを経由してOrganic Mapsの最新版を追うことに。

github.com

まず、既存のOrganic MapsをAndroid端末から削除。

次にObtainiumをF-Droid経由でインストール。

あとは上記のサイトを参考にObtainiumの設定をします。

このときにPre-releaseを含めるにチェックを入れるのがポイントです。現段階では2024-08-16が最新なのだけど、チェックを入れないと2024-07のリリースになります。

あとは再度マップをダウンロードします。

注意点としては既存のブックマークなどがアプリ削除の段階で消えるので、事前にエクスポートしておきましょう。

僕のブックマークは全てなくなりました。(まぁiOSがメインだからいいんだけど)

(2024/08/18追記): Google Play Storeから復活したようです。良かったですね。