https://github.com/timeless-residents/handson-mapbox-gl-js
Hands-on project using Mapbox GL JS
https://github.com/timeless-residents/handson-mapbox-gl-js
geospatial javascript mapbox-gl-js maps webgl
Last synced: 6 months ago
JSON representation
Hands-on project using Mapbox GL JS
- Host: GitHub
- URL: https://github.com/timeless-residents/handson-mapbox-gl-js
- Owner: timeless-residents
- Created: 2025-02-25T02:20:40.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-02-25T03:05:33.000Z (7 months ago)
- Last Synced: 2025-02-25T03:26:41.360Z (7 months ago)
- Topics: geospatial, javascript, mapbox-gl-js, maps, webgl
- Language: JavaScript
- Homepage: https://timeless-residents.github.io/handson-mapbox-gl-js/
- Size: 854 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# handson-mapbox-gl-js
このリポジトリは、Mapbox GL JSを使用したハンズオンのプロジェクトです。
## 目次
- [handson-mapbox-gl-js](#handson-mapbox-gl-js)
- [目次](#目次)
- [インストール](#インストール)
- [使い方](#使い方)
- [プロジェクト構成](#プロジェクト構成)
- [GitHub Actions ワークフロー](#github-actions-ワークフロー)
- [GitHub Pagesへのデプロイ](#github-pagesへのデプロイ)
- [設定方法](#設定方法)
- [環境変数の設定](#環境変数の設定)
- [リポジトリメタデータの更新](#リポジトリメタデータの更新)
- [使用方法](#使用方法)
- [ライセンス](#ライセンス)## インストール
このプロジェクトをクローンし、依存関係をインストールします。
```bash
git clone https://github.com/timeless-residents/handson-mapbox-gl-js.git
cd handson-mapbox-gl-js
npm install
```## 使い方
開発サーバーを起動し、ブラウザでプロジェクトを確認します。
```bash
npm start
```ブラウザで `http://localhost:9000` を開きます。
## プロジェクト構成
```
handson-mapbox-gl-js/
├── src/
│ ├── index.html
│ ├── styles.css
│ └── main.js
├── package.json
└── README.md
```- `src/`:プロジェクトのソースコードが含まれています。
- `index.html`:メインのHTMLファイルです。
- `styles.css`:スタイルシートです。
- `main.js`:JavaScriptのエントリーポイントです。## GitHub Actions ワークフロー
このプロジェクトは以下のGitHub Actionsワークフローを使用しています:
### GitHub Pagesへのデプロイ
GitHub Actionsを使用して、プロジェクトをGitHub Pagesに自動的にデプロイすることができます。
### 設定方法
1. リポジトリの「Settings」タブを開きます
2. 左側のメニューから「Pages」を選択します
3. 「Source」セクションで「GitHub Actions」を選択しますプッシュするたびに、GitHub Actionsワークフローが実行され、`main`ブランチのコードが自動的にビルドされ、`gh-pages`ブランチにデプロイされます。
### 環境変数の設定
このプロジェクトはMapbox GL JSを使用しており、Mapboxアクセストークンが必要です。GitHub Actionsでのデプロイ時にこのトークンを使用するには、以下の手順で設定します:
1. リポジトリの「Settings」タブを開きます
2. 左側のメニューから「Secrets and variables」→「Actions」を選択します
3. 「New repository secret」ボタンをクリックします
4. 名前を`MAPBOX_ACCESS_TOKEN`とし、値にMapboxアクセストークンを入力して保存しますワークフローは自動的にこの環境変数を使用してビルドを行います。シークレットが設定されていない場合でもビルドは実行されますが、Mapbox機能は正常に動作しません。
**注意**: 公開リポジトリの場合、`.env`ファイルに直接トークンを含めないでください。代わりに`.env.example`などのサンプルファイルを作成し、実際のトークンはGitHubシークレットとして設定してください。
### リポジトリメタデータの更新
英語でのリポジトリの説明とトピックを更新するためのワークフローも用意されています。
#### 使用方法
1. リポジトリの「Actions」タブを開きます
2. 左側のワークフローリストから「Update Repository Metadata」を選択します
3. 「Run workflow」ボタンをクリックします
4. 必要に応じて説明文とトピックを入力します(デフォルト値が設定されています)
5. 「Run workflow」ボタンをクリックして実行しますこのワークフローは以下の操作を行います:
- リポジトリの説明を英語で設定します(デフォルト: "Hands-on project using Mapbox GL JS")
- リポジトリのトピックを設定します(デフォルト: mapbox-gl-js, javascript, webgl, maps, geospatial)## ライセンス
このプロジェクトはMITライセンスの下で公開されています。詳細は[LICENSE](LICENSE)ファイルを参照してください。