2
私はFlaskを使って最初のWebアプリケーションを構築しています。 Webアプリケーションのコンセプトは、PandasとBokehを使用してデータを操作して視覚化することです。これはすべて比較的単純です。Python - Bokehを使ってFlaskにgmap_plotを埋め込む
今、私はGMapPlotを使ってニューヨークの地図に情報をプロットしています。プロットを表示するためにoutput_fileを使用すると、期待される結果が得られます。
は、私は自分のHTMLテンプレートにプロットを返すようにしようとすると、しかし、マップが空
を期待しました。
import pandas as pd
import datetime
from flask import render_template, request
from web_app.app import app
from bokeh.io import output_file, show
from bokeh.embed import components
from bokeh.models import (
GMapPlot, GMapOptions, ColumnDataSource, Circle, DataRange1d, PanTool, WheelZoomTool, BoxSelectTool
)
@app.route('/heatmap', methods=['GET', 'POST'])
def generate_heatmap():
date1 = datetime.datetime.strptime(request.form['startFilter'],"%Y-%m-%d").date()
date2 = datetime.datetime.strptime(request.form['stopFilter'], "%Y-%m-%d").date()
date2 += datetime.timedelta(days=1)
date_start = str(date1)
date_stop = str(date2)
df = pd.read_csv("...", sep=",")
df = df.set_index(['starttime'])
df = df.loc[date_start:date_stop]
start_lats = pd.Series(df['start station latitude']).unique()
stop_lats = pd.Series(df['end station latitude']).unique()
start_long = pd.Series(df['start station longitude']).unique()
stop_long = pd.Series(df['end station longitude']).unique()
lats = start_lats.tolist() + stop_lats.tolist()
long = start_long.tolist() + stop_long.tolist()
map_options = GMapOptions(lat=40.741557, lng=-73.990467, map_type="roadmap", zoom=11)
plot = GMapPlot(
x_range=DataRange1d(), y_range=DataRange1d(), map_options=map_options, title="NYC"
)
source = ColumnDataSource(
data=dict(
lat=lats,
lon=long,
)
)
circle = Circle(x="lon", y="lat", size=8, fill_color="blue", fill_alpha=0.8, line_color=None)
plot.add_glyph(source, circle)
plot.add_tools(PanTool(), WheelZoomTool(), BoxSelectTool())
output_file("gmap_plot.html")
show(plot)
script, div = components(plot)
return render_template('heatmap.html', script = script, div = div)
と私のHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Heatmap</title>
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.css" type="text/css" />
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.js"></script>
{{ script | safe }}
</head>
<body>
<div class='bokeh'>
{{ div | safe }}
</div>
</body>
ここに表示されている問題が発生している可能性があります:https://github.com/bokeh/bokeh/issues/3737 – Alex