将鼠标悬停在应显示文本的区域上

Question

我目前正在查看社区。但是，当我将鼠标悬停在它上面时，我希望显示带有邻域和平均价格的文本。我已经粘贴了我的代码和我制作的卡片。下面你可以看到我喜欢它。

当我将鼠标悬停在文本上时如何显示文本？

import folium
from folium.plugins import FastMarkerCluster
from branca.colormap import LinearColormap

map_ams_price = folium.Map(location=[52.3680, 4.9036], zoom_start=11, tiles="cartodbpositron")
map_ams_price.choropleth(
    geo_data=r'C:\neighbourhoods.geojson',
    data=df,
    columns=['neighbourhood_cleansed', 'price'],
    key_on='feature.properties.neighbourhood',
    fill_color='BuPu', 
    fill_opacity=0.7, 
    line_opacity=0.2,
    legend_name='Avg',
    reset=True,
    tooltip=folium.features.GeoJsonTooltip(fields=['neighbourhood_cleansed', 'price'],
                                                      labels=True,
                                                      sticky=False),
)

map_ams_price

最小示例

# the price is the avg price
d = {'neighbourhood_cleansed': ['Oostelijk Havengebied - Indische Buurt', 'Centrum-Oost',
       'Centrum-West', 'Zuid', 'De Baarsjes - Oud-West', 'Bos en Lommer',
       'De Pijp - Rivierenbuurt', 'Oud-Oost', 'Noord-West', 'Westerpark',
       'Slotervaart', 'Oud-Noord', 'Watergraafsmeer',
       'IJburg - Zeeburgereiland', 'Noord-Oost', 'Buitenveldert - Zuidas',
       'Geuzenveld - Slotermeer', 'De Aker - Nieuw Sloten', 'Osdorp',
       'Bijlmer-Centrum', 'Gaasperdam - Driemond', 'Bijlmer-Oost'],
'price': [20.0,30.0,40.0,50.0,60.0,70.0,80.0,20.0,30.0,40.0,50.0,60.0,70.0,80.0,20.0,30.0,40.0,50.0,60.0,70.0,80.0,20.0]}
df = pd.DataFrame(data=d)

您可以在此处找到 geojson https://pastecode.io/s/a76fdvey

Answer 1

正如我在评论中提到的，为了在等值线图中提供工具提示，它们必须位于 geojson 文件中，而不是数据框值中，以便显示。所以我对要使用的geojson文件使用geopandas，合并数据框并将价格信息添加到geojson文件中。原始数据框中的列名称已被修改以匹配 geojson 文件。它也可以通过添加别名来用作标签。工具提示可以设置样式，所以我也添加了它。

import json
import requests
import geopandas as gpd

url = "http://data.insideairbnb.com/the-netherlands/north-holland/amsterdam/2021-09-07/visualisations/neighbourhoods.geojson"

gpd_geo = gpd.read_file(url)
gpd_geo = gpd_geo.merge(df, on='neighbourhood')
geo_json_data = gpd_geo.to_json()

import folium
from folium.plugins import FastMarkerCluster
from branca.colormap import LinearColormap
from folium.features import GeoJsonPopup, GeoJsonTooltip

map_ams_price = folium.Map(location=[52.3680, 4.9036], zoom_start=11, tiles="cartodbpositron")
choropleth = folium.Choropleth(
    geo_data=geo_json_data,
    data=df,
    columns=['neighbourhood', 'price'],
    key_on='feature.properties.neighbourhood',
    fill_color='BuPu', 
    fill_opacity=0.7, 
    line_opacity=0.2,
    legend_name='Avg',
    reset=True,
    highlight=True,
).add_to(map_ams_price)

choropleth.geojson.add_child(
    folium.features.GeoJsonTooltip(fields=['neighbourhood', 'price'],
                                   aliases=['neighbourhood:', 'average_price:'],
                                   labels=True,
                                   localize=True,
                                   sticky=False,
                                   style="""
                                   background-color: #F0EFEF;
                                   border: 2px solid black;
                                   border-radius: 3px;
                                   box-shadow: 3px;
                                   """,)
)

map_ams_price

将鼠标悬停在应显示文本的区域上

Hover over an area a text should appear

python

data-visualization

geojson

folium