如何使用地图的绘图组件

介绍

本指南解释了如何使用Gradio的gradio.Plot组件在地图上绘制地理数据。Gradio的Plot组件支持Matplotlib、Bokeh和Plotly。在本指南中，我们将使用Plotly。Plotly允许开发者轻松地使用他们的地理数据创建各种地图。查看这里获取一些示例。

概述

我们将使用纽约市Airbnb数据集，该数据集托管在kaggle上这里。我已将其上传到Hugging Face Hub作为数据集这里，以便更轻松地使用和下载。使用这些数据，我们将在地图输出上绘制Airbnb位置，并允许根据价格和位置进行过滤。下面是我们将要构建的演示。⚡️

第一步 - 加载CSV数据 💾

让我们从Hugging Face Hub加载Airbnb NYC数据开始。

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数据框中。让我们从定义一个函数开始，该函数将用作gradio应用程序的预测函数。此函数将接受最低价格和最高价格范围以及行政区列表，以过滤结果地图。我们可以使用传入的值（min_price、max_price和boroughs列表）来过滤数据框并创建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来指定其他地图设置，例如缩放和居中。

更多信息 here 关于使用 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来布局这些组件，并且我们还会添加事件触发器，以便在演示首次加载时以及点击“更新过滤器”按钮时触发地图更新，以应用我们的新过滤器。

这是完整演示代码的样子：


import gradio as gr
import plotly.graph_objects as go
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):

    filtered_df = df[(df['neighbourhood_group'].isin(boroughs)) &
          (df['price'] > min_price) & (df['price'] < max_price)]
    names = filtered_df["name"].tolist()
    prices = filtered_df["price"].tolist()
    text_list = [(names[i], prices[i]) for i in range(0, len(names))]
    fig = go.Figure(go.Scattermapbox(
            customdata=text_list,
            lat=filtered_df['latitude'].tolist(),
            lon=filtered_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
        ),
    )

    return fig

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)

demo.launch()

步骤 4 - 部署 🤗

如果你运行上面的代码，你的应用程序将在本地开始运行。你甚至可以通过将share=True参数传递给launch来获得一个临时的可分享链接。

但如果你想要一个永久部署解决方案呢？让我们将我们的Gradio应用部署到免费的HuggingFace Spaces平台。

如果您之前没有使用过Spaces，请按照之前的指南这里。

结论 🎉

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

这里有一个演示的链接 Map demo 和 complete code（在 Hugging Face Spaces 上）