Slack Weather Radar Map

by seratch


Japan Weather Radar Map (雨雲レーダー) on Slack

This is a working example app which displays Japan weather radar maps on Slack. This application is built with Bolt⚡️ and Yahoo! JAPAN Static Map API (雨雲レーダー表示).


/amesh {prefecture name}

This command posts an animated GIF showing the forecasting weather map.

/amesh {prefecture name} now

This command instantly posts the present moment image.

/amesh {prefecture name} today

This command posts the transition of weather map in the last 24 hours.

Map Mode

The defualt map mode is map. If you'd like to customize the appearance, set YAHOO_JAPAN_API_MAP_MODE env variable with either of the following values.

  • map - 通常の地図
  • photo - 航空写真
  • map-b1 - 地下街
  • hd - ハイビジョン地図
  • hybrid - ハイブリッド地図
  • blankmap - 白地図
  • osm - Open Street Map

Here is the output with hybrid mode.

How to run this app

Create a Slack App

  • Features > OAuth & Permissions:
    • Scopes:
      • "bot"
      • "commands"
      • "files:write:user"
    • Click "Save Changes"
  • Features > Slash Commands:
    • Click "Create New Command"
      • Command
        • Set /amesh
      • Request URL
        • Set https://{your app name}
      • Short Description
        • Set something helpful for users
      • Click "Save"
  • Features > Bot User:
    • Click "Add a Bot User"
    • Click "Add Bot User"
  • Settings > Install App:
    • Complete "Install App"

Run the app on your laptop

# prep
nvm use 10.13.0 # Bolt runs on Node 10.13+
cp -p _env .env
vi .env
source .env
npm i

# run the app
npm run local

# on another terminal window
ngrok http 3000

Deploy to Heroku


Run /amesh commands on Slack

/amesh # displays weather map for Tokyo area
/amesh osaka now # displays a single image for Osaka area
/amesh hokkaido today # displays the transition of weather map in the last 24 hours for Hokkaido area