Hi,
I am looking for a solution to load another geojson layer in my choropleth map when clicking on one of the feature from the current geojson layer. The idea is to go from 1 digit postcode to 2 digit postcode and so on.
Here is a snippet of my code. Can I add two callbacks for one figure?
geodata = pd.read_sql(
"""SELECT jsonb_build_object('type','FeatureCollection','features',jsonb_agg(features.feature))FROM (SELECT jsonb_build_object('type','Feature',
'id', plz1,'geometry',ST_AsGeoJSON(geom)::jsonb,'properties', to_jsonb(inputs) - 'geom') AS feature FROM (SELECT * FROM plz1) inputs) features;""",
mydb,
)
geodata_dict = geodata.iloc[0]["jsonb_build_object"]
# write dict to json
with open("test.json", "w") as outfile:
json.dump(geodata_dict, outfile)
# read json
with open("test.json") as f:
data = json.load(f)
# using view kpi
df = pd.read_sql("""SELECT * from kpi_v2""", mydb)
df = df.rename(
columns={
"plz1": "Postcode Region",
"pue": "Power Usage Effectiveness",
"erf": "Energy Reuse Factor",
"wue": "Water Usage Effectiveness",
"cer": "Cooling Efficiency Ratio",
"ref": "Renewable Energy Factor",
}
)
OPTIONS = [
"Power Usage Effectiveness",
"Energy Reuse Factor",
"Water Usage Effectiveness",
"Cooling Efficiency Ratio",
"Renewable Energy Factor",
]
# choropleth map
@app.callback(Output("my-graph", "figure"), [Input("var_choice", "value")])
def update_figure(var_choice):
def genereatecolorscale(text):
if text == "Power Usage Effectiveness":
return (1, 3)
if text == "Energy Reuse Factor":
return (0, 8)
if text == "Water Usage Effectiveness":
return (0, 10)
if text == "Cooling Efficiency Ratio":
return (0, 12)
if text == "Renewable Energy Factor":
return (0, 1)
else:
return (1, 6)
range = genereatecolorscale(var_choice)
fig = px.choropleth_mapbox(
data_frame=df,
geojson=data,
locations="Postcode Region",
color=var_choice,
featureidkey="properties.plz1",
color_continuous_scale="balance",
opacity=0.5,
range_color=range,
mapbox_style="open-street-map",
zoom=4,
center={"lat": 51.110924, "lon": 9.682127},
)
fig.update_geos(fitbounds="locations")
fig.update_layout(
paper_bgcolor="rgba(0,0,0,0)",
width=400,
margin=dict(l=0, r=30, t=10, b=10),
legend_font_color="#31364c",
font_color="#31364c",
coloraxis_colorbar=dict(title=""),
)
return fig
@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(
pathname,
): # pathname is just the / after the port thats why its loading...http://127.0.0.1:8050/
if pathname == "/":
return [
html.Div(
[
dcc.Dropdown(
id="var_choice",
value="Power Usage Effectiveness",
options=[
{"label": i, "value": i} for i in OPTIONS
],
optionHeight=20,
style={
"background-color": "#121212",
"color": "black",
},
),
dcc.Graph(id="my-graph"),
html.Label(
"Erläuterung der Kennzahlen:",
style={
"margin-top": "10px",
"color": "#31364c",
"font-weight": "bold",
},
),
],
className="row",
style={"font-color": "red"},
)
]