django leaflet の使い方メモ
django leafletはブラウザ上でgeo系のデータをマップに描画するものである。
特徴はjavascriptを一切書かずにOSMをブラウザ上に表示したり、geoデータをマッピングすることができる。
スマホ等にアプリを通じて描画する方法はGoogle Maps Platformを使って実装する。
django-leafletを使ってみて分かったことがある。 DBに格納されたgeometry型データをマップ上に描画することは得意である。しかしマップをクリックして座標データを取得することのようなことは苦手？もしくはあまりそのような情報が見当たらなかった。したがって座標データを取得するためにはjavascriptでleafletを書いていく必要に私は迫られる事になった。leafletの使い方メモに関しては別のページにまとめることにする。
コンテンツ
1. django leafletのドキュメント
Welcome to Django Leaflet’s documentation! — Django Leaflet 0.20 documentation
2. django leafletのインストール
pip install django-leaflet
3. settings.pyの編集事項
INSTALLED_APPSにleafletを追加するだけで良い。
INSTALLED_APPS = [
...
'leaflet',
]
4. テンプレートにどう書けばよいのか
{% load leaflet_tags %} {% leaflet_css %} {% leaflet_js %} <h1>list</h1> {{ object.point.x }}<br /> {{ object.point.y }}<br /> {% leaflet_map "main" callback="map_init_basic" %} <script type="text/javascript"> function map_init_basic(map, options) { var lon = "{{ object.point.x }}"; var lat = "{{ object.point.y }}"; #マップの拡大率を調整 map.setView([lat, lon], 18); #地図に座標点をプロットする lon,latではなくlat,lonの順 L.marker([lat, lon]).addTo(map); } </script>
L.marker()は、マーカーの表示の役割を担う。マーカーオブジェクト作成に緯度、経度情報を格納した配列を引数に取る。
参考：http://ktgis.net/service/leafletlearn/index.html#step5
https://leafletjs.com/reference-1.5.0.html#marker
https://leafletjs.com/reference-1.5.0.html#latlng
pointを複数表示させる方法(ListView)
views.pyはいつもどおりデータオブジェクトをリスト表示させるロジックを書けば良い。templateをgeodjango仕様にすればpointを複数リスト表示することができる。
...sample_template
{% load leaflet_tags %}
{% leaflet_css %}
{% leaflet_js %}
<h1>list</h1>
{% leaflet_map "main" callback="map_init_basic" %}
<script type="text/javascript">
function map_init_basic(map, options) {
{% for object in objects %}
var lon = "{{ object.point.x }}";
var lat = "{{ object.point.y }}";
#マップの拡大率を調整
map.setView([lat, lon], 10);
#地図に座標点をプロットする lon,latではなくlat,lonの順
L.marker([lat, lon]).addTo(map);
{% endfor %}
}
</script>
javascriptのscriptタグ内でもdjangoのテンプレート制御構文を使うことができるようだ。これを使えばデータオブジェクトを全て地図上に表示することができる。
次にpointをクリックしたらデータ詳細が表示されるようにするには
地図上に位置情報をプロットするだけではなくて、マーカーをクリックしたらその他のプロパティを表示したい。これには.bindPopup()メソッドを用いれば良いようだ。
...sample_template
{% load leaflet_tags %}
{% leaflet_css %}
{% leaflet_js %}
<h1>list</h1>
{% leaflet_map "main" callback="map_init_basic" %}
<script type="text/javascript">
function map_init_basic(map, options) {
{% for object in objects %}
var lon = "{{ object.point.x }}";
var lat = "{{ object.point.y }}";
#マップの拡大率を調整
map.setView([lat, lon], 10);
#地図に座標点をプロットする lon,latではなくlat,lonの順
L.marker([lat, lon]).bindPopup("{{ object.user_name }}").addTo(map);
{% endfor %}
}
</script>
またマーカーにツールチップを加えるとマウスオーバーするだけで詳細情報を表示することもできるようだ。これも便利。
http://ktgis.net/service/leafletlearn/index.html#step6
http://ktgis.net/service/leafletlearn/leaflet6.html
https://leafletjs.com/reference-1.5.0.html#tooltip
ポリゴンデータをleafletで表示させる方法
参考先によると、円や線、多角形などの図形をLeafletではベクタレイヤと呼んでいる。おそらくポリゴンデータもベクタレイヤとしてleafletで表示することができると思われる。だから図形を表示させる方法を整理しておく。
円、線、多角形を表示させるにはそれぞれL.circle, L.polyline, L.polygonがある。ポリゴンデータを描画したい場合、L.polygon()を使う。配列の座標列を使って表示する。
