※地図出典: ©OpenStreetMap contributors
- Leafletを使うとWebサイト上に地図を簡単に埋め込むことができることを知ったので、その習作として作ってみました。
- 武蔵府中郷土かるたの標識設置場所をもとに散歩コースを生成し、マップ上に表示します。
- 出発駅~かるた標識、かるた標識~到着駅の2つのルートを表示します。
- アプリケーションのバックエンド側はNode.js(Express)、フロント側はBootstrapとOnsenUIで見た目を整えています。
- マップの表示はLeafletとOpenStreetMap、ルート検索はLeaflet Routing Machineを使用しています。
- リポジトリの内容をcloneし、ルート上で下記コマンドを実行して必要なモジュールをインストールしてください。
$ npm install
- モジュールのバージョンがうまく合わず
npm start
実行時にエラーが発生する場合は、下記コマンドのほうが良いかもしれません。
$ npm ci
- 下記コマンドをcloneしたリポジトリのルート上で実行し、http://localhost:3000にアクセスするとページが表示されます。
$ npm start
- かるた読み札と標識設置場所の情報は、府中市が公開している下記オープンデータ(CC-BY)をもとにしています。