# 如何使用地图组件绘制图表

Related spaces:
Tags: PLOTS, MAPS

## 简介

本指南介绍如何使用 Gradio 的 `Plot` 组件在地图上绘制地理数据。Gradio 的 `Plot` 组件可以与 Matplotlib、Bokeh 和 Plotly 一起使用。在本指南中，我们将使用 Plotly 进行操作。Plotly 可以让开发人员轻松创建各种地图来展示他们的地理数据。点击[这里](https://plotly.com/python/maps/)查看一些示例。

## 概述

我们将使用纽约市的 Airbnb 数据集，该数据集托管在 kaggle 上，点击[这里](https://www.kaggle.com/datasets/dgomonov/new-york-city-airbnb-open-data)。我已经将其上传到 Hugging Face Hub 作为一个数据集，方便使用和下载，点击[这里](https://huggingface.co/datasets/gradio/NYC-Airbnb-Open-Data)。使用这些数据，我们将在地图上绘制 Airbnb 的位置，并允许基于价格和位置进行筛选。下面是我们将要构建的演示。 ⚡️

$demo_map_airbnb

## 步骤 1-加载 CSV 数据 💾

让我们首先从 Hugging Face Hub 加载纽约市的 Airbnb 数据。

```python
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 使得处理地图变得很容易。让我们看一下下面的代码，了解如何创建地图图表。

```python
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 创建散点图的更多信息，请点击[这里](https://plotly.com/python/scattermapbox/)。

## 步骤 3-Gradio 应用程序 ⚡️

我们将使用两个 `gr.Number` 组件和一个 `gr.CheckboxGroup` 组件，允许用户指定价格范围和地区位置。然后，我们将使用 `gr.Plot` 组件作为我们之前创建的 Plotly + Mapbox 地图的输出。

```python
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，请按照之前的指南[这里](/using_hugging_face_integrations)。

## 结论 🎉

你已经完成了！这是构建地图演示所需的所有代码。

链接到演示：[地图演示](https://huggingface.co/spaces/gradio/map_airbnb)和[完整代码](https://huggingface.co/spaces/gradio/map_airbnb/blob/main/run.py)（在 Hugging Face Spaces）