地図とヒートマップの相性はよいです。どの地域で特に問題が発生しているか、気温が高い、風が強いかなど多くの情報が地図とヒートマップの組み合わせで表現されています。しかし自分で作るのは骨が折れるでしょう。 そこで使ってみたいのがLeaflet Imageです。地図を使ってフリーハンドで描けるヒートマップライブラリになります。

Leaflet Imageの使い方

描いているところです。デモでは地図は表示していない模様です。

マウスを当て続けると、より色が濃くなります。

アニメーションGIFで見るとこんな感じです。

Leaflet Imageは地図サーバがCORSに対応している必要があります。そうすることで、地図にブラウザから加工できます。OSMやMapBoxといった地図プロバイダに対応していますが、おそらくGoogle Mapsには対応していないでしょう。

Leaflet ImageはJavaScript製のオープンソース・ソフトウェア(2-clause BSD lisence)です。

Leaflet Image mapbox/leaflet-image: leaflet maps to images