【folium】地図をブログに貼る方法
PythonとJupyterNotebookを使ってfoliumで作った地図をブログに貼る方法のメモ。
指定した地名や住所にピン📌を差したりした地図をブログに貼る方法をメモしておきます。
手順
手順は次の通りです。
- 地名や住所から座標(緯度と経度)を取得
- 座標にピン📌など印を付けた地図の作成
- ipynbファイルをmarkdownファイルに変換
- mdファイルの地図表示部分をコピーし、ブログ編集画面に貼り付け
追記
ブログの【編集モード】はMarkdownのみ確認しました。他のモードでは上手く行かないかも?🙏
手順1、2の地図の作り方
Jupyter NotebookとPythonでの地図の作成については次のリンクなど参考ください。
【geocoding jpとfolium】地名から地図を作成する - よちよちpython
【folium】地図のMarkerの色や形・アイコン・タイルを変える - よちよちpython
ということで省略し、次の手順へ進みます。
3. ipynbファイルをmarkdownファイルに変換する
手順1,2で、JupyterNotebookに地図作成まで実行すると、Outセル
に地図が表示されます。
その地図をブログに貼るには、一旦
ipynbファイル→markdownファイル
へ変換します。方法は、
- JupyterNotebookに付いている「Download As」のボタンから行う
- ターミナルから「jupyter nbconvert」コマンドを使う
などの方法がありますが、1は説明不要と思うので、コマンドを使う方法だけ書いておきます。
$ jupyter nbconvert --to markdown なんとか.ipynb
これで
「なんとか.ipynb」→「なんとか.md」
に変換される。
(「なんとか.ipynb」は地図が表示されたipynbファイル)
作業フォルダに変換されたmarkdownファイル「なんとか.md」が出来ていれば🆗👌。
4.1 地図部分のタグのコピー
手順3で作ったmdファイルを開くと、下のような<div>タグ
で囲まれた長い部分があるので、それをコピーし、ブログの編集画面に貼り付けます。
markdownファイルの地図部分
<div style="width:100%;"><div style="position:relative;width:100%;height:0;padding-bottom:60%;"><span style="color:#565656">Make this Notebook Trusted to load map: File -> Trust Notebook</span><iframe src="about:blank" style="position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;" data-html=PCFET0NUWVBFIGh0bWw+CjxoZWFkPiAgICAKICAgIDxtZXRhcy8yLjAuMi9sZWFmbGV0LmF3 (中略 結構ながい) onload="this.contentDocument.open();this.contentDocument.write(atob(this.getAttribute('data-html')));this.contentDocument.close();" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>
タグの貼り付け
出来たmd.ファイルを
- catコマンドなどでターミナルに表示させるか、
- またはメモ帳アプリなどで開くか
すると、上のような部分があるので、そこだけをコピーし、ブログ編集画面に貼り付けると、
↓のように地図が表示される。
タグ部分をコピペするのが面倒です。これも自動化しておけば…
以上です。3ヶ月ぶりの投稿。
つづき
地図をブログに貼る際のタグ抽出プログラム - よちよちpython
追記(2021/1/1)
Python3.8から3.9にバージョンアップした。モジュールを手作業でインストールし直したのですが、Jupyter Notebookで地図を作成する際に
jupyter-contrib-nbextensionsが無いぞ!
とエラーを吐かれましたのでpip install
しました。自動的に他の関連モジュールもインストールされたようです。ログをコピペしときます。
Installing collected packages: pyyaml, jupyter-contrib-core, jupyter-nbextensions-configurator, jupyter-latex-envs, jupyter-highlight-selected-word, jupyter-contrib-nbextensions
Successfully installed jupyter-contrib-core-0.3.3 jupyter-contrib-nbextensions-0.5.1 jupyter-highlight-selected-word-0.2.0 jupyter-latex-envs-1.4.6 jupyter-nbextensions-configurator-0.4.1 pyyaml-5.3.1