foliumをオフライン環境で使う方法

オフライン環境のJupyterLab上で、foliumを使って地図を表示させるには、工夫が必要だったのでメモ。

1. Web上にあるJavaScriptやCSSファイルを全てローカルに持ってくる。

foliumで呼び出しているWeb上のファイルを調べてローカルへ持ってくる。

• JavaScript

JupyterLab

folium.Map.default_js

[('leaflet', 'https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'),
('jquery', 'https://code.jquery.com/jquery-1.12.4.min.js'),
('bootstrap',
'https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js'),
('awesome_markers',
'https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js')]

• CSS
  'bootstrap_css'と'glyphicons_css'のファイル名が同じなので、適宜変更する。

JupyterLab

folium.Map.default_css

[('leaflet_css',
'https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'),
('bootstrap_css',
'https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css'),
('glyphicons_css',
'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'),
('awesome_markers_font_css',
'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css'),
('awesome_markers_css',
'https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css'),
('awesome_rotate_css',
'https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css')]

2. サーバーを立てる

ターミナルとかでサーバーを立てる。

$ python3 -m http.server 8000
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

3. ライブラリを書き換える

どうせ元の指定先のJavaScriptやCSSファイルはオフラインでは呼び出せないので指定先を書き換える。

JupyterLab

js_path = 'http://127.0.0.1:8000/folium_js/'
folium.Map.default_js = [
        ('leaflet', js_path + 'leaflet.js'),
        ('jquery', js_path + 'jquery-1.12.4.min.js'),
        ('bootstrap', js_path + 'bootstrap.bundle.min.js'),
        ('awesome_markers', js_path + 'leaflet.awesome-markers.js'),
    ]

css_path = 'http://127.0.0.1:8000/folium_css/'
folium.Map.default_css = [
        ('leaflet_css', css_path + 'leaflet.css'),
        ('bootstrap_css', css_path + 'bootstrap.min.css'),
        ('glyphicons_css', css_path + 'glyphicons_bootstrap.min.css'),
        ('awesome_markers_font_css', css_path + 'all.min.css'),
        ('awesome_markers_css', css_path + 'leaflet.awesome-markers.css'),
        ('awesome_rotate_css', css_path + 'leaflet.awesome.rotate.min.css')
    ]

4. 地図の表示

ラスタータイルなどはこちらの記事などを参考にローカルに持ってくる。

JupyterLab

m = folium.Map(location = [ido, keido],
                   tiles = 'http://127.0.0.1:8000/{z}/{x}/{y}.png',
                   attr = 'aaa',
                   zoom_start = 10)
m

以上で表示されるはず。
他に賢いやり方あったら教えてください…

問題の背景的なもの

・folium側の問題
　Web上のJavaScriptやCSSファイルを呼び出しているため、オフライン環境ではleaflet.jsが読み込めない。
・JupyterLab側の問題
　セキュリティ上の問題で、ローカルにあるJavaScriptやCSSファイルは指定できないらしい。

参考記事

• 簡単にローカルで Web サーバーを立てる３つの方法（Node/Python/VSCode）
  https://snowsystem.net/development/web-server-simple-launch/

• 指定した領域のラスタータイルをダウンロードしたりGeoTIFFに変換してくれるPythonパッケージをPyPIで公開しました！
  https://qiita.com/nokonoko_1203/items/5c32c22b92bb72e7770c