[Personal Project] Japan Weather Forecast Map

By /

Github link access here.

Japan Weather Forecast Map

An interactive React.js web application that displays Japan’s weather forecasts on a map. Users can view 3-day and weekly weather forecasts for different prefectures with detailed information including temperature, precipitation, wind, and waves.

Features

  • Interactive map of Japan using Leaflet.js.
  • Click on a prefecture to view detailed weather forecasts.
  • Switch between 3-day and weekly forecasts.
  • Area dropdown dynamically updates based on the selected forecast type.
  • Display includes:
    • Weather conditions with icons.
    • Precipitation probability (%).
    • Wind and wave information.
    • Min and max temperatures.
    • Publishing office of the forecast.
  • Responsive and scrollable panel for better UX.
  • Automatically adjusts selected area when switching between forecast types.

Technologies

This project is built using the following technologies:

  • React.js – Frontend framework for building interactive UI.

  • Leaflet.js – JavaScript library for displaying interactive maps of Japan.

  • JMA Forecast API – Provides official weather forecast data from the Japan Meteorological Agency.

  • Docker – Containerises the application for easy deployment.

  • Node.js & npm – For managing dependencies and running the development server.

Requirements

  • Docker Desktop (recommended)
    • Docker Compose v2 (docker compose)
  • Node.js 18+ (only required for local development without Docker)

Installation

  1. Clone the repository:
git clone [email protected]:EthanYifanJu/japan-weather-forcast.git

cd ./japan-weather-map
  1. Build and start the app using Docker:
docker compose up --build
  1. Open the app in your browser:
http://localhost:3000

Stopping the Application

Press Ctrl+ C for Windows users or ^+C for Mac users. Then clean uo containers:

docker compose down

Local Development (Without Docker)

If you prefer not to use Docker:

npm install
npm start

Then open:

http://localhost:3000

Project Structure

src/
├─ App.js # Main app component with map and popup panel
├─ jmaAreaMap.js # Mapping of prefectures to JMA codes
├─ jmaWeatherCode.js # Mapping of weather codes to names/icons
├─ App.css # Main stylesheet
├─ weather-icons/ # Folder containing weather icon images
└─ index.js # React entry point

Usage

  1. Click on a prefecture on the map.
  2. The weather popup panel will appear.
  3. Switch between 3-day and weekly tabs.
  4. Select an area from the dropdown if multiple areas are available.
  5. View detailed forecast data including:
    • Weather icons and description
    • Precipitation probability (%)
    • Wind and wave information
    • Min and max temperatures
    • Publishing office

Dependencies

Licence

MIT Licence © Ethan CHOO

日本の天気予報マップ

日本の天気予報を地図上で表示するインタラクティブな React.js Webアプリケーションです。ユーザーは各都道府県の 3日間 および 週間 の天気予報を確認でき、気温、降水確率、風、波などの詳細情報も閲覧可能です。

機能

  • Leaflet.js を使用した日本地図のインタラクティブ表示
  • 都道府県をクリックして詳細な 天気予報 を表示
  • 3日間 と 週間 の予報を切り替え
  • 地域ドロップダウン は選択した予報タイプに応じて動的に更新
  • 表示内容:
    • 天気の状態（アイコン付き）
    • 降水確率 (%)
    • 風と波の情報
    • 最低・最高気温
    • 予報発表機関
  • レスポンシブでスクロール可能なパネルによる快適な操作性
  • 予報タイプ切り替え時に自動で選択地域を調整

技術

このプロジェクトで使用している技術:

  • React.js – インタラクティブなUIを構築するフロントエンドフレームワーク

  • Leaflet.js – 日本の地図を表示するためのJavaScriptライブラリ

  • JMA Forecast API – 気象庁の公式天気予報データを提供

  • Docker – アプリケーションをコンテナ化して簡単にデプロイ可能に

  • Node.js & npm – 依存関係の管理と開発サーバーの実行

動作環境 / 必要要件

  • Docker Desktop（推奨）
    • Docker Compose v2（docker compose）
  • Node.js 18 以上
    • Docker を使用しないローカル開発の場合のみ必要

インストール方法（Docker 推奨）

  1. リポジトリをクローン:
git clone [email protected]:EthanYifanJu/japan-weather-forcast.git

cd ./japan-weather-map
  1. Docker を使用してビルド＆起動:
docker compose up --build
  1. ブラウザで以下にアクセス:
http://localhost:3000

アプリの停止方法

Windows の場合は Ctrl + C、Mac の場合は ^ + C を押して終了してください。
その後、コンテナを停止・削除します：

docker compose down

ローカル開発（Docker を使用しない場合）

Docker を使わずに起動する場合：

npm install
npm start

以下にアクセスしてください：

http://localhost:3000

プロジェクト構成

src/
├─ App.js # 地図とポップアップパネルを含むメインコンポーネント
├─ jmaAreaMap.js # 都道府県と気象庁コードのマッピング
├─ jmaWeatherCode.js # 天気コードと名前/アイコンのマッピング
├─ App.css # メインスタイルシート
├─ weather-icons/ # 天気アイコン画像フォルダ
└─ index.js # React エントリーポイント

使い方

  1. 地図上の都道府県をクリック

  2. 天気ポップアップパネル が表示されます

  3. 3日間 と 週間 タブを切り替え

  4. 複数の地域がある場合はドロップダウンで選択

  5. 詳細予報データを確認:

    • 天気アイコンと説明
    • 降水確率 (%)
    • 風と波の情報
    • 最低・最高気温
    • 発表機関

依存ライブラリ

ライセンス

MIT ライセンス © Ethan CHOO

Leave a Comment

Your email address will not be published. Required fields are marked *

Table of Contents

← Index
Scroll to Top