気象庁WebサイトのJSONを使って、風・気温と降水分布を重ねてみる40の手習い

こびわ⚒ @kobiwa_net

気温を観測している地点とそうでない地点でシンボルの大きさを変えてみた。 kobiwa.net/Training_JS/06…

こびわ⚒ @kobiwa_net

表示したい気象要素をすべて取得するようにした。 kobiwa.net/Training_JS/06…

こびわ⚒ @kobiwa_net

φ(・ω・｀)個人的メモ Leaflet を利用した地図でオリジナルアイコンを設置 benricho.org/map_icon_Leafl…

こびわ⚒ @kobiwa_net

連休後半からチマチマ作ってたAMeDASの風と気温を同時に見れるサイト、また少し前進した。 次はスケールによって表示制御と思ったところで、お昼休みが終わりそうになったので、続きはまたこんど。 kobiwa.net/Training_JS/07… pic.twitter.com/JD5XYS0bAY

拡大

こびわ⚒ @kobiwa_net

縮尺(ズームレベル)による表示制御を実装して、大縮尺の時には気温の文字や大きな矢羽根を表示する一方で、小縮尺では小さな矢羽根を表示して文字を非表示にした。あと、時刻を変えたときに、変更前の情報を消すようにした。 次はナウキャストの降水分布を表示したいところ。 kobiwa.net/Training_JS/07… pic.twitter.com/u1pYZcz673

拡大

拡大

こびわ⚒ @kobiwa_net

気象レーダー(ナウキャスト)の表示まで対応させた。 kobiwa.net/Training_JS/08… pic.twitter.com/NFzAJx0swL

拡大

こびわ⚒ @kobiwa_net

スマホで見るとこんな感じか。地理院地図のコードを何とか解読して、乗算で重ねられるようになりたいところ。 pic.twitter.com/BkLxfwTdeC

拡大

こびわ⚒ @kobiwa_net

「JavaScriptって何？」というところから、40の手習いでなんとかやりたかったことが出来るようになってきた＼(^o^)／ 次はタイルレイヤを乗算で重ねるのと、現在位置の取得かな。 地理院のgithubにヒントがありそう。 github.com/gsi-cyberjapan… kobiwa.net/Training_JS/08… pic.twitter.com/vlYSsMhQkY

拡大

拡大

こびわ⚒ @kobiwa_net

ペインを作って{mix-blend-mode:multiply;}でいける? htmq.com/css/mix-blend-…

こびわ⚒ @kobiwa_net

国土地理院のgithub見てたら、それっぽいことをしてた。 画像→raw.githubusercontent.com/gsi-cyberjapan… pic.twitter.com/mRQ1CpMxVZ

拡大

こびわ⚒ @kobiwa_net

矢羽根が円の上に来る理由が分かった＼(^o^)／ leafletjs.com/reference-1.7.… twitter.com/kobiwa_net/sta…

こびわ⚒💉×4 @kobiwa_net

あまり賢い方法じゃ無いけど、気温で色が変わるようになった。矢羽根を円の下にしたいけど、上手くいかない。 kobiwa.net/Training_JS/07…

2021-05-05 21:39:03

こびわ⚒ @kobiwa_net

map.createPane(string) の返り値がHTMLElementってことは、この返り値のstyleを弄れば出来るのかな?? leafletjs.com/reference-1.7.…

こびわ⚒ @kobiwa_net

目論見通り、map.createPane(string)の返り値で取得したHTMLElementからstyleを変更(HTMLElement.style.mixBlendMode = "multiply";)で乗算合成出来た＼(^o^)／ kobiwa.net/Training_JS/08… #leaflet twitter.com/kobiwa_net/sta… pic.twitter.com/lohiiTOTtM

拡大

こびわ⚒ @kobiwa_net

こんな感じで実装した(・ω・)v ハンガリアン記法ダサいとか突っ込まないで((；´ﾟДﾟ)) pic.twitter.com/MkSSkrCslC

拡大

拡大

こびわ⚒ @kobiwa_net

Blog書きました! [Leaflet]レイヤを乗算で重ねる(タイルレイヤの乗算合成) kobiwa.jp/2021/05/09/pos… 調べ物をしているときに、「○○出来たら良いの」という自分の投稿が最上位に出てきた時の絶望的なったら半端ない(´・ω・`)

こびわ⚒ @kobiwa_net

個人的メモ Leafletで凡例 k-side.hatenablog.jp/entry/2015/01/…

こびわ⚒ @kobiwa_net

40の手習いで作り始めたAMeDASの複数の気象要素(風・気温)とレーダー(高解像度ナウキャスト)を重ねて表示させるページが出来た。風・気温・雨を重ねるのは10年来の念願だった。個人的に使用する目的ですけど、URLを晒してみたりする。 kobiwa.net/AMeDASmap/ pic.twitter.com/JuUWPrPZ5w

拡大

拡大

こびわ⚒ @kobiwa_net

(謝辞)機械可読性の高い情報を公開してくださった気象庁、地図表示に使用したLeafletに貢献なさった方々、気象庁Webサイトの構造や、LeafletをはじめJavaScriptに関する情報を発信してくださった方々へ感謝申し上げます。

こびわ⚒ @kobiwa_net

AMeDASの気温+風と、レーダー雨量(高解像度ナウキャスト)を重ねるページ。「驚きの白さ」現象を回避できるように、階級区分の区切り方を変えれるようにしたなど。 驚きの白さ現象→togetter.com/li/403844 サイト→ kobiwa.net/AMeDASmap/ ソース→ github.com/kobiwa/AMeDAS_… pic.twitter.com/c6vUQUXyGR

拡大

こびわ⚒ @kobiwa_net

「驚きの白さ」のまとめが9年前と知って震えている:(´ºωº｀):