📌
れきちずをNext.jsで使用する
概要
れきちずをNext.jsで使用する方法を調べてみましたので、備忘録です。
背景
以下の記事で、「れきちず」の使い方を紹介しました。
そして、2025年4月4日に「全国版が公開」されたことを知りました。
そこでNext.jsを用いて作成したアプリケーションへの導入にあたり、その使い方を調べてみました。
デモアプリ
以下のようなアプリケーションを試作しました。
使用方法の調査にあたり、公式サイトで提供されている地図の切り替えや重ね合わせ機能、および検索機能などを再現することを目的としました。この実装にあたり、以下のReactライブラリを使用しました。
開発メモ
検索機能
検索機能には、GeoLODのAPIを利用させていただきました。なお、「れきちず」の公式サイトでは、専用の検索APIが用いられているようでした。
react-maplibre
本ライブラリを使用して、やりたいことの多くを実現できました。一方、TerrainControlではTerrainのON/OFFと合わせてピッチを変更することが難しい？、useMapではaddLayer/removeLayerが難しい？など、いくつか苦労した点もありました。
まとめ
「れきちず」およびNext.jsを用いたアプリケーション開発にあたり、参考になりましたら幸いです。
「れきちず」の開発に関わる方々に深く感謝いたします。
Discussion