Djangoでページ内にfoliumの地図を小さく載せたい

実現したいこと

現在pycharm上でDjangoでGPSから取得したデータをPythonライブラリのfoliumを使ってマーカーを置いていくWebアプリを作成中です。

最終的には、Djangoでfoliumを使ってマーカーを置いた地図とマーカーの数を選択するようなボタンを、
１つのページで表示されるようにしたいです。（下図）

ただ、今回は地図を小さくしたいところで躓いています。
ちなみにGPSデータはLOGファイルで保存してあり、plot_mdl（）でリストにして、そこから緯度経度をとっています。

発生している問題・エラーメッセージ

plot.htmlの中でsrcでmap.htmlを入れたいのですが、同ディレクトリにあるにも関わらず
map.htmlがないと怒られてしまいます...

Page not found (404)
Request Method:	GET
Request URL:	http://127.0.0.1:8000/mapping/map.html
Using the URLconf defined in montemapping.urls, Django tried these URL patterns, in this order:
^mapping/ [name='plot']
The current path, mapping/map.html, didn't match any of these.
You're seeing this error because you have DEBUG = True in your Django settings file. Change that to False, and Django will display a standard 404 page.

該当のソースコード

app
├── db.sqlite3
├── manage.py
├── mapping
------urls.py
------view.py
├── templates
------plot.html
------map.html
├── mymodule
------plotmodule

urls
1urlpatterns = [
2    path('', views.plot, name='plot'),
3]

view
1def plot(request):
2    plot_mdl()
3    return render(request, 'plot.html')
4

plotmodule
1def plot_mdl():
2~
3#マーカーを置くコード
4~
5    map.save('templates/map.html')

html
1#plot.html
2
3<!DOCTYPE html>
4<html>
5<head lang="ja">
6    <meta charset="UTF-8">
7    <title>folium Map</title>
8</head>
9
10<body>
11<iframe src="map.html" width=100%″ height=”60%″></iframe>
12</body>
13
14</html>

試したこと

view関数のrenderの引数をmap.htmlに変えると、map.htmlが読み込まれてマーカーの置かれた地図が全画面表示されました...
view関数のrenderの引数をmap.htmlに変えた状態でplot_mdlの最後に以下のようなコードを入れてmap.htmlの表示を変えようとしてみましたが、その変更が反映されずに全画面表示されるだけでした

plotmodule
1def plot_mdl():
2~
3#マーカーを置くコード
4~
5    map.save('templates/map.html')
6    html = open('templates/map.html').read()
7    dom = lxml.html.fromstring(html)
8    size = dom.xpath('//style')[0]
9    size.text = 'html, body {width: 70%;height: 70%;margin: 0;padding: 0;}'
10

そもそもsrcで読み込もうとしていること自体が間違っているかもしれませんが、htmlの中で別のhtmlを開く方法が自分の調べた中ではそれしか見つかりませんでした。もし他に方法があれば教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

folium と iframe をどうしてもお使いになりたいのであれば、 templates/map.html は src="map.html" では参照することができないので、 map.html は templates/ の下ではなく STATIC_ROOT の下に保存し、 Django の static files の機能を使って iframe に入れ込む、ということをされる必要があるかと思います。 static files について詳しくは次のページが参考になります:

https://docs.djangoproject.com/en/2.1/howto/static-files/

folium と iframe に特にこだわりはなくあくまでも最終的なイメージ（＝インタラクティブな地図ページ）を実現することが重要であれば、 Django と Leaflet.js とカスタム JS で 1 ページに収まる形でストレートに実現された方がスムーズなのではないかと思います。その場合の処理のおおよそのイメージは次のとおりです。

最初に Django で地図を含むページ全体を描画
- Leaflet.js とカスタム JS をページに読み込んでおく
カスタム JS でフォームのイベントを読んで地図を更新
- カスタム JS: フォームでイベントが起こったら Ajax リクエストをかける
- Django: Ajax リクエストに対して反応する
- カスタム JS: Django から返ってきたレスポンスをもとに Leaflet.js の API を使って地図を更新

ご参考になるでしょうか。

投稿2018/11/06 01:47

gh640

総合スコア1407

parcyparcy

2018/11/16 02:57

ご返事が遅れてしまい申し訳ありません... ちょうど作り直そうと思っていたところなので、 Leaflet.jsとカスタムJSを利用して作り直してみることにしました。処理の流れなど細かく書いていただきありがとうございます！

gh640

2018/11/16 04:46

ご返事くださりありがとうございます。もう読んでいらっしゃらないかなぁと思っていました。そうなんですね！やらなくてはいけないことが多くて大変かと思いますが、がんばってください :D ちなみに、「処理のイメージ」のところを補足させてください。フラットなリストとして表示されていますが、入力のときは 2 階層のリストとして記入したつもりでした（ Markdown として間違っていないと思うのですが……）。私の意図は、次の 2 要素だけルートに置いていて、それ以外は 1 階層下に置いているつもりだったので、そのように読み取っていただければと思います。 > - 最初に Django で地図を含むページ全体を描画 > - カスタム JS でフォームのイベントを読んで地図を更新ともあれ。がんばってください :)

行動規範の内容に同意します