15日目この記事は1年以上前に書かれました。内容が古くなっている可能性がありますのでご注意下さい。foliumについては前回の記事を参考にして下さい。今回は、既存のfolium(またはfoliumプラグイン)のクラスの派生クラスを作成し、その中でLeafletプラグインを利用して機能拡張する方法を紹介します。今回利用するLeafletプラグインはLeaflet.GestureHandlingです。地図の上でマウスホイールを操作して以下のような表示に遭遇したことが一度はあると思います。全画面に地図が表示されるサイトではマウスホイールによるズームは便利ですが、ページの一部に地図が埋め込まれているような場合、ページをスクロールさせたいのにマウスカーソルが地図上にあると地図がズームしてしまい、煩わしいことがあります。Leaflet.GestureHandlingを使用すると、地図上にマウスカーソルがあっても、マウスホイールによるズームは行われません。src="leaflet-gesture-handling.js"></script>以下のようにmapのインスタンスを作成する際にオプションで指定します。true});foliumのMapクラスでは、gestureHandlingを指定することはできません。そこで、Mapクラスを派生させてMap2クラスを作成し、Leaflet.GestureHandlingの.jsと.cssを読み込ませて、gestureHandlingを指定できるようにします。今回作成したサンプル(sample4.py)の完全なコードは以下のとおりです。main().htmlに読み込ませる.jsと.cssを指定するdefault_jsとdefault_cssを定義する際には、必ず親クラスのdefault_jsとdefault_cssに追加する必要があります。しないと、本来親クラスによって読み込ませられる筈だった.jsと.cssが、読み込まれないことになってしまいます。'leaflet-gesture-handling.css')]Pythonプログラム、生成するHTMLファイル、Leafletプラグインのすべてが同じフォルダにあるという前提としているために、タプルの2つめがURLではなく単にファイル名になっているのは前回と同じです。Map2のインスタンスを生成するときにはgestureHandlingをTrueにしています。True)実行結果は、以下のような画面になります。本記事中のプログラムはGitHubでも公開しています。