geopandasで読み込んだシェープファイルを使ってfoliumで地図を描く

前回　geopandasを使えば簡単にシェープファイルを扱えるよという記事を投稿したけど、ただ白地図を描いてるだけじゃツマラナイと思い色々試してみました。

やってみようとしたのはハザードマップを作ること。
ほとんどの自治体がホームページなどでハザードマップを公開しているけれど、その殆どがPDFファイルだったり機能もりもりな地図表示サービスだったりで使い勝手はいまいちだとずっと思ってました。なので簡単にスマホやPCで気やすく見られるモノを作れないかってやってみたわけです。

この投稿ではローカル環境でやりましたが、Google Colabo環境でも動きます。

今回はお試しとして地図上にハザードマップに示される土砂災害関連情報のうち急傾斜地と土石流の被害を受けると想定される地域情報を対象としました。

例として私が住んでる広島県廿日市市を対象として作ってみました。

防災関連データは以下で公開されている情報を使いました。

ダウンロードしたシェープファイルはgeopandasでDataFeameとして取り込めます。

import geopandas as gdp

gdf = gdp.read_file('xxx.shp')

で、geopandasで作成しても同じDataFrameだしgeojsonと中身は大して変わらないに違いないからたぶん大丈夫だろうと言う乱暴な考えで、試しにそのままfuliumに読み込ませてみたら、そのまま表示されました。
何も考えずにやってみたけど、結果オーライです。

ご存知の通りgeopandasで作成したDataFrameはpandasと同じように扱えるので、必要な情報のみ抽出したりももちろんできます。

これは国土地理院で公開されている自治体区域を示すシェープデータをダウンロードしてきて、これから紹介する手順で同じように作ったものです。
国土地理院データは都道府県別にしか公開されていませんが、自治体名をキーに抽出すればらくらくです。
事例は今回のハザードマップ対象の廿日市市のエリアを示しています。

地図はfoliumで作成しますが、foliumでググった時に紹介される事例の殆どは地図を描いてそこにマーカーの描き方で、それだけじゃつまらんというのも今回コイツを試してみたきっかけのひとつです。

まずは地図の中心の指定と初期の表示具合を指定してオブジェクトを作成します。今回は廿日市市の中心っぽい緯度経度を指定してます。

import folium

folium_map = folium.Map(location=[34.33349495924916, 132.3049340204783], zoom_start=15)

次にgeopandasで作ったDataFrameを.GeoJsonを使って先ほど作ったmapオブジェクトにレイヤーとして追加(.add_to)します。

import geopandas as gpd

def fol_geo(data,color):
    folium.GeoJson(data,
                    style_function=lambda feature: {"color": color}
                    ).add_to(folium_map)

fol_geo(gpd.read_file('static/土砂災害警戒区域D.shp'),"red")  #土石流地域
fol_geo(gpd.read_file('static/土砂災害警戒区域K.shp'),"lightred")  #急傾斜地域

folium_map.save('hazardmap.html')

同じmapオブジェクトへDataFrameの追加を繰り返せば複数レイヤとして重ね合わせることができるので処理部分を関数としてます。またレイヤーごとに色指定も可能だったので、データごとにパラメタを渡しています。

シェープファイルからgeopandasで作成されたDataFrameには色指定がないので、そのままmapオブジェクトに追加するとデフォルトの青で表示されます。そこでレイヤー毎に色指定するため自分で色々やってみたんですが上手く行かず、結果ぐぐってみたら見つかったヤツ(style_function=lambdaからのlambda関数部分）を追加してあげたらうまくいきました。

上のように「土石流地域」→「急傾斜地域」と処理を行うと、処理された順番に下から上へとレイヤーが重ね合わされるっぽいです。

で、完成したhtmlファイルをちょっと見栄え良くしたかったのと、対象データごとに別htmlを作って切り替えてみせたかったので、それぞれ取り込むシェープファイルを変えたhtmlファイルを作ってからflaskで簡単なWebプログラムを作ってみた結果が以下の画面です。

多少コードに手を加えていますが、もともとがfoliumが作ったhtmlなので、地図データ部分は移動拡大縮小など自由自在です。

上の画像データの元であるHTMLファイルが直接表示できるようにしてみましたので、リンクをクリックすると直接ファイルを見ることができます。興味ある方はどんな具合にグリグリ動くか確認して見てください。（ただしHTMLファイル単体を公開しているだけなので、リンク先には飛ばず本画面表示のみ）

ちなみにこれが自治体が公開しているハザードマップです。PDFファイルで情報量は非常に多いのですが、地区ごとのPDFファイルは分割されていたりと使い勝手という部分で言えばちょっとねって言うのが正直な気持ちです。

いっぽう今回作成した地図のほぼ同じエリアがこちら。情報量は最低限で少ないのですが、縮小拡大や隣の地区移動も自由自在なのがいいとこ。

この辺りは山を造成して作られた住宅地なので、土石流に注意が必要だということがわかります。

今回はひとつの市単位でやりましたが、試しに津波警戒地域をやってみたら公開データは全県分のみのため非常に作成と表示に処理時間がかかったから、その辺りはなんとかしなきゃならんす点ですね。

最終的にはスマホなどで見たとき、ブラウザから位置情報を取得して、そこを中心とした地図が表示されるとか、住所で検索するとその場所周辺の地図が表示されるとかにするべきだと思うんだけど、そうなると色々とやることが多いので今回はここまで。

ともかく近日中にはGCPで公開するとかflaskじゃなくてstreamlitで同じような事ができないか考えてみましょう。

で、シェープデータをgooglemapのマイマップに取り込めないかと考え中なんだけど、ちょっとめんどくさそうだからそれはまたいつか。

そんなわけで、私がちょこちょこやったことをきっかけに、どなたかがもっと使い勝手がよいものを作ってもらえればうれしいです。