python - Folium 自定义弹出窗口

Question

使用 Folium 0.3.0 运行 Python 3.5.2。

我正在尝试创建自定义弹出窗口，每当我单击包含数据的特定国家/地区时就会出现。我设法让弹出窗口出现，但我迷失了将值动态传递给它们的过程。我熟悉 Python，但不熟悉 JSON 等。

我从拥有一个 Series 对象 final_dict 开始。此外，我有一个国家多边形数据集 countries_reduced.json。正在关注example found here ，我修改了 folium.GeoJson 模板，以便在我将鼠标悬停在一个有数据的国家/地区时突出显示，并进一步在我单击该国家/地区时显示一个弹出窗口。弹出窗口本身显示得很好，但是到目前为止，我只成功地从 final_dict 中传递了 一些 值(例如 final_dict[0] ) 对于所有国家，按线路完成

var html_aaa = $('<div id="html_aaa" style="width: 100.0%; height: 100.0%;">"""+ "{0:.2f}%".format(final_dict[0] * 100) + """</div>')[0];

在下面的代码片段中。比如如图here ，美国的弹出窗口显示为 -0.02%，尽管它应该显示为 0.18%。

有什么想法可以动态地将点击国家对应的值传入弹出窗口吗？

我的代码如下:

import pandas as pd
import numpy as np

# Data
array = np.array([-0.000247 , 0.00178 , -0.0183 , 0.00831 , 0.0135 , -0.00266 , 0.00461])
final_dict = pd.Series(array, index=['JPN', 'USA', 'ARG', 'DEU', 'SWE', 'FIN' , 'FRA'])

# Create map
import json
import folium
geo_json_data = json.load(open('countries_reduced.json'))
linear = folium.LinearColormap(['red','yellow','green'], vmin=-0.02, vmax=0.02)
linear.to_step(21)

m = folium.Map([0,0], tiles='Mapbox Bright', zoom_start=2)
g = folium.GeoJson(
    geo_json_data,
    style_function=lambda feature: {
        'fillColor': linear(final_dict[feature['id']]),                    
        'color' : 'black',
        'weight' : 2,
        'dashArray' : '5, 5'
        }, 
    ).add_to(m)

 # Following example provided here: https://github.com/python-visualization/folium/issues/341,
 # I overwrite the g_Template 
from jinja2 import Template    
g._template = Template("""
            {% macro script(this, kwargs) %}
               var {{this.get_name()}} = {};                
               var popup_aaa = L.popup({maxWidth: '300'});
               var html_aaa = $('<div id="html_aaa" style="width: 100.0%; height: 100.0%;">"""+ "{0:.2f}%".format(final_dict[0] * 100) + """</div>')[0];
               popup_aaa.setContent(html_aaa);                

                {{this.get_name()}}.style = function(feature) {return feature.properties.style;};

                {{this.get_name()}}.highlightStyle = function(feature) {return {
                        weight: 5,
                        color: '#666',
                        dashArray: '',
                        fillOpacity: 0.7
                        };
                    };
                {{this.get_name()}}.onEachFeature = function onEachFeature(feature, layer) {
                    layer.on({
                        mouseover: function(e) {
                            e.target.setStyle({{this.get_name()}}.highlightStyle(e.target.feature));
                            e.target.bindPopup(popup_aaa);},
                        mouseout: function(e) {
                            {{this.get_name()}}.geoJson.resetStyle(e.target);
                            }
                        });
                    };
                {{this.get_name()}}.geoJson = L.geoJson(
                    {% if this.embed %}{{this.style_data()}}{% else %}"{{this.data}}"{% endif %},{
                        style : {{this.get_name()}}.style,
                        onEachFeature: {{this.get_name()}}.onEachFeature
                        })
                    .addTo({{this._parent.get_name()}});
            {% endmacro %}
""")    

# And draw the map with additions, save
m.add_child(g)
m.add_child(linear)
m.save('map4.html') 

Answer 1

您在 final_dict[0] 中使用的索引适用于日本，而不是美国。

为了确保您可以将该行更改为 final_dict['USA']。