diadia

興味があることをやってみる。自分のメモを残しておきます。

django leaflet の使い方メモ

django leafletはブラウザ上でgeo系のデータをマップに描画するものである。 特徴はjavascriptを一切書かずにOSMをブラウザ上に表示したり、geoデータをマッピングすることができる。
スマホ等にアプリを通じて描画する方法はGoogle Maps Platformを使って実装する。

django-leafletを使ってみて分かったことがある。 DBに格納されたgeometry型データをマップ上に描画することは得意である。しかしマップをクリックして座標データを取得することのようなことは苦手?もしくはあまりそのような情報が見当たらなかった。したがって座標データを取得するためにはjavascriptでleafletを書いていく必要に私は迫られる事になった。leafletの使い方メモに関しては別のページにまとめることにする。

コンテンツ

  1. django leafletのドキュメント
  2. django leafletのインストール
  3. settings.pyの編集事項
  4. テンプレートにどう書けばよいのか

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()メソッドを用いれば良いようだ。

参考:
https://qiita.com/amagasu1234/items/baf15da6655b74b4723a#%E3%81%BE%E3%81%9A%E3%81%AF%E5%8D%98%E7%B4%94%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%99

...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>

 

f:id:torajirousan:20190915131850p:plain

user_nameの表示ができた

またマーカーにツールチップを加えるとマウスオーバーするだけで詳細情報を表示することもできるようだ。これも便利。
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()を使う。配列の座標列を使って表示する。