A newer version of the Gradio SDK is available:
5.23.1
如何使用地图组件绘制图表
Related spaces: Tags: PLOTS, MAPS
简介
本指南介绍如何使用 Gradio 的 Plot 组件在地图上绘制地理数据。Gradio 的 Plot 组件可以与 Matplotlib、Bokeh 和 Plotly 一起使用。在本指南中，我们将使用 Plotly 进行操作。Plotly 可以让开发人员轻松创建各种地图来展示他们的地理数据。点击这里查看一些示例。
概述
我们将使用纽约市的 Airbnb 数据集，该数据集托管在 kaggle 上，点击这里。我已经将其上传到 Hugging Face Hub 作为一个数据集，方便使用和下载，点击这里。使用这些数据，我们将在地图上绘制 Airbnb 的位置，并允许基于价格和位置进行筛选。下面是我们将要构建的演示。 ⚡️
$demo_map_airbnb
步骤 1-加载 CSV 数据 💾
让我们首先从 Hugging Face Hub 加载纽约市的 Airbnb 数据。
from datasets import load_dataset
dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
df = dataset.to_pandas()
def filter_map(min_price, max_price, boroughs):
new_df = df[(df['neighbourhood_group'].isin(boroughs)) &
(df['price'] > min_price) & (df['price'] < max_price)]
names = new_df["name"].tolist()
prices = new_df["price"].tolist()
text_list = [(names[i], prices[i]) for i in range(0, len(names))]
在上面的代码中，我们先将 CSV 数据加载到一个 pandas dataframe 中。让我们首先定义一个函数，这将作为 gradio 应用程序的预测函数。该函数将接受最低价格、最高价格范围和筛选结果地区的列表作为参数。我们可以使用传入的值 (min_price、max_price 和地区列表) 来筛选数据框并创建 new_df。接下来，我们将创建包含每个 Airbnb 的名称和价格的 text_list，以便在地图上使用作为标签。
步骤 2-地图图表 🌐
Plotly 使得处理地图变得很容易。让我们看一下下面的代码，了解如何创建地图图表。
import plotly.graph_objects as go
fig = go.Figure(go.Scattermapbox(
customdata=text_list,
lat=new_df['latitude'].tolist(),
lon=new_df['longitude'].tolist(),
mode='markers',
marker=go.scattermapbox.Marker(
size=6
),
hoverinfo="text",
hovertemplate='<b>Name</b>: %{customdata[0]}<br><b>Price</b>: $%{customdata[1]}'
))
fig.update_layout(
mapbox_style="open-street-map",
hovermode='closest',
mapbox=dict(
bearing=0,
center=go.layout.mapbox.Center(
lat=40.67,
lon=-73.90
),
pitch=0,
zoom=9
),
)
上面的代码中，我们通过传入经纬度列表来创建一个散点图。我们还传入了名称和价格的自定义数据，以便在鼠标悬停在每个标记上时显示额外的信息。接下来，我们使用 update_layout 来指定其他地图设置，例如缩放和居中。
有关使用 Mapbox 和 Plotly 创建散点图的更多信息，请点击这里。
步骤 3-Gradio 应用程序 ⚡️
我们将使用两个 gr.Number 组件和一个 gr.CheckboxGroup 组件，允许用户指定价格范围和地区位置。然后，我们将使用 gr.Plot 组件作为我们之前创建的 Plotly + Mapbox 地图的输出。
with gr.Blocks() as demo:
with gr.Column():
with gr.Row():
min_price = gr.Number(value=250, label="Minimum Price")
max_price = gr.Number(value=1000, label="Maximum Price")
boroughs = gr.CheckboxGroup(choices=["Queens", "Brooklyn", "Manhattan", "Bronx", "Staten Island"], value=["Queens", "Brooklyn"], label="Select Boroughs:")
btn = gr.Button(value="Update Filter")
map = gr.Plot()
demo.load(filter_map, [min_price, max_price, boroughs], map)
btn.click(filter_map, [min_price, max_price, boroughs], map)
我们使用 gr.Column 和 gr.Row 布局这些组件，并为演示加载时和点击 " 更新筛选 " 按钮时添加了事件触发器，以触发地图更新新的筛选条件。
以下是完整演示代码：
$code_map_airbnb
步骤 4-部署 Deployment 🤗
如果你运行上面的代码，你的应用程序将在本地运行。
如果要获取临时共享链接，可以将 share=True 参数传递给 launch。
但如果你想要一个永久的部署解决方案呢？ 让我们将我们的 Gradio 应用程序部署到免费的 HuggingFace Spaces 平台。
如果你以前没有使用过 Spaces，请按照之前的指南这里。
结论 🎉
你已经完成了！这是构建地图演示所需的所有代码。