https://github.com/aptpod/visual-parts-fleet-map
https://github.com/aptpod/visual-parts-fleet-map
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/aptpod/visual-parts-fleet-map
- Owner: aptpod
- License: apache-2.0
- Created: 2021-04-23T13:43:03.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-25T23:25:12.000Z (about 5 years ago)
- Last Synced: 2025-08-04T21:13:43.152Z (11 months ago)
- Language: HTML
- Size: 1.83 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# visual-parts-fleet-map
Fleet Map デモを想定したサンプル Visual Parts です。
当サンプルプロジェクトは、2021/4/26に公開されたテックブログ記事に関連する情報提供を目的として公開しています。
現在の最新バージョンでの動作保証はいたしかねますのでご了承ください。
### 完成図
### ディレクトリ構成
```
src
- assets
- images
- fleet-map
- th-fleet-map@3x.png ....... サムネイル画像を準備します
- entrypoint
- fleet-map
- parts ....................... View のReactサブコンポーネントを実装します
- bar-sub-division-meter
- car-maker
- edge-card
- edges-panel-title
- map-zoom-controller
- scrollbar
- selector
- props-selector.ts ........ Visual Parts SDK のデータから View の Component Props に変換します
- component.tsx .............. View のReactコンポネントを実装します
- container.tsx .............. Visual Parts SDK と Fleet Map Component を連結します
- index.ts ................... ビジュアルパーツ Fleet Map を定義します
- extension.tsx .............. ビジュアルパーツ固有の定義、及びPanel Option を定義します
- utils.ts ................... ヘルパーを実装します
- index.ts ..................... エントリポイントの定義します (複数のビジュアルパーツを実装する場合はここにimportの行を追加します)
```
### ローカル開発環境で実行する場合
`src/entrypoint/fleet-map/constant.ts` の `OPEN_STREET_MAP_URL_DEFAULT` のクエリストリングに `API_KEY` を設定してください。
`API_KEY` は [Thunderforest Global Maps](https://www.thunderforest.com/pricing/) で Sign Up すると取得することが可能です。