描述

在大流行期間管理社區響應需要提供信息和教育的工具。幾個世紀以來，地圖已經做到了這一點，我們現在擁有了驚人的數字工具，只需點擊幾個按鈕即可完成。以下是我們的社區如何應對危機，并希望其他人可以利用這些工具來構建自己的應用程序，以幫助通知和動員他們的社區。

第 1 階段 - 啟動并運行工具。快速地！

那是 2020 年 3 月，新聞似乎每天都在惡化。COVID-19 出現在我們的社區中，人們正在尋求行動。啟動了一個項目，允許來自整個社區的志愿者“采用他們居住的街區”，并在需要的時候幫助他們的鄰居。一個名為 ForRichmond 的非營利組織開始了這項工作，它跨越了弗吉尼亞州中部的地理邊界。由于我們也被隔離，該項目將需要依賴數字工具。那是我自愿提供幫助的地方。

鑒于這種巨大的影響，我建議讓應用程序盡快啟動并運行。雖然我們發現了一些很棒的應用程序可供建模，但我們認為開始這項工作的時間非常寶貴。所以我們從 MVP 模型開始努力，從一個基本的應用程序開始運行。

第 1 步 - 建立志愿者表格

我們合作的非營利組織已經擁有一個由 Squarespace 托管的基本靜態網站。能夠獲得可以用于注冊志愿者并直接加載到 g-sheet 的表單頁面設置。該頁面隨后被鏈接到他們的主網站，并在多個社交媒體渠道上共享。

使用 G-Sheets 的在線 Web 表單

?

第 2 步 - 構建地圖

這家非營利組織的創始人已經聽說過費城的一個類似項目，并且能夠將我與該項目的負責人聯系起來。這是基于開放街道地圖。根據研究，我發現還有一個名為 Mapbox 的商業產品，它構建了添加到它的工具和服務。我注冊了該服務，并能夠使用免費套餐快速構建地圖。每當有人想通過在網站上填寫表格來“采用區塊”時，我們就可以在地圖上繪制該區塊以供參考。然后將該地圖集成到 Squarespace 網站上托管的網頁中，以供其他人查看采用了多少塊的進度。

第 3 步（進行中）- 手動維護地圖

當志愿者在表格中注冊時，需要有人從 G-sheet 中取出數據，然后進入 Mapbox 的 Studio 界面并繪制志愿服務的街道。這需要通過文本和電子郵件進行一些協調。進行更改后，將發布新版本的地圖，然后將其反映在站點中。這有點手動，但很容易啟動和運行，因此達到了 MVP 的目標。這是一個供參考的流程。

第 2 階段 - 數字地圖

在啟動并運行 MVP 后，我開始著手研究下一個版本。兩個關鍵限制是（1）在某人注冊一個區塊的時間和由于手動輸入而出現的時間之間存在延遲，以及（2）試圖根據文本輸入字段理解志愿者的意圖。第二點與地理有關。在經典的市中心街道網格中，很容易描述什么是街區。例如，Main Street 的 3300 街區，或 K & L Street 之間的 Centre Ave。在郊區，街區更加模糊，因為它們不遵循網格，而是由彎曲的道路和死胡同組成。要解決此問題，需要更改界面，并預定義用戶可以明確選擇的塊。這是同樣使用 Mapbox 構建的新版本的視圖，以及它是如何構建的。

采用街區的互動版（采用藍色街道）

?

第 1 步 - 獲取數據

大里士滿都會區有超過一百萬人居住在其中，分布在數百平方英里的土地上。手動繪制所有這些數據需要數年時間，但幸運的是，這些信息已經存在——只是找出位置的問題。我們的研究表明，當地市政當局的 GIS 部門已經為其他目的構建了數字地圖，并將其作為公共數據發布。這是里士滿市的其中一個站點的示例。

來自市政當局的 GIS 街道數據

?

https://richmond-geo-hub-cor.hub.arcgis.com/maps/edit?content=cor%3A%3Acenterlines

可以下載這些數據，然后在其他項目中使用。我下載了我們想要獲取街區級別數據的我們地區所有四個城市的數據，因此這使得我們能夠推進構建所有可以采用的住宅街區的區域地圖的新方法。

第 2 步 - 將街道數據轉換為 GeoJSON

雖然我能夠獲得數據版本，但一致的主題是數據集的格式與 Mapbox 中所需的格式不同。KML 數據是 GIS 部門常用的格式，但需要的是 geojson。這需要轉換。這些下載的文件也很大——在 10-100MB 范圍內，考慮到我們最終需要使用 API 來加載這些數據，我需要保持大小可控。我使用在線實用程序將 KML 結構轉換為更常見的 csv 格式（參見下面的鏈接），然后創建多個分片，將文件分解成更易于管理的文件（每個分片大約 5-10MB）。

https://www.convertcsv.com/xml-to-csv.htm

第 3 步 - 過濾和豐富數據

接下來是減少數據集以獲取我們需要的信息的步驟。這將有助于提高應用程序的可用性和性能。這個應用程序只需要住宅街道。我們從市政當局收到的地圖用于街道維護，因此包括高速公路和立交橋之類的東西都被刪除了。這是通過在 AWS 中編寫為 lambda 函數的數據過濾過程來完成的，該函數可以處理暫存在 S3 存儲桶中的數據。

交互式地圖還需要為每個塊添加屬性。這使得在 Mapbox 中更容易渲染地圖。為了實現這一點，有一個布爾值指示該塊是否已被采用，以及誰采用了它。這些屬性在上一步中添加到過濾后的數據中，繼續使用 json 格式。

第 4 步 - 將數據加載到 Mapbox

要創建將由瀏覽器呈現的地圖，我需要將數據導入 Mapbox 到唯一的數據集中。這可以通過 API 或 Studio 界面來完成，我選擇了后者。一次可以處理多大的上傳文件是有限制的，因此文件大小需要實用。這是針對上一步中處理的所有四個數據集完成的。

第 5 步 - 構建地圖數據視圖

將數據加載到 Mapbox 后，需要創建反映不同街道數據組的瓦片集。這些瓦片集是瀏覽器在地圖中呈現的用戶可以與之交互的圖層，并且也在瀏覽器代碼中的 SDK 中引用。每個圖層都有自己的屬性——顏色、字體大小、線寬等。這一切都在 Mapbox Studio 中完成，稱為樣式。

第 6 步 - 添加區域圖層以使地圖可用

我需要添加的一個意外范圍是地圖的匯總層，我們稱之為區域層。前面步驟中的基礎數據集總共有 10 萬個城市街區（特征），所以當試圖一次顯示它們時，用戶體驗很糟糕，因為它只是變成了一個單一顏色的大塊，因為所有街道都混合在一起。

為了解決這個問題，我創建了一個區域的摘要視圖，在嘗試獲取整個內容時可用。這是通過使用 Mapbox studio 創建一個數據集來概述這些區域的。然后地圖的起點在這個級別被縮小，顯示更廣泛的區域。

地圖的頂級視圖

?

網頁中嵌入了 javascript，允許用戶單擊其中一個區域，然后放大該區域。從那里可以單擊更用戶友好的地圖版本。

第 7 步 - 構建可以更新地圖的 API

Mapbox 已經有可以管理更新的 API。要調用 API，將需要要更新的功能的唯一標識符。鑒于 Mapbox 設置了唯一標識符，需要在加載地圖后從 Mapbox 中提取地圖，并在調用 API 之前構建一個用作包裝器的查找實用程序，以應用唯一標識符。這是用 NodeJS 編寫的，并托管在 AWS 中。

第8 步 - 將 API 集成到數字地圖中

一旦我們有 API 工作，然后將其集成到我們的。我構建了一個簡單的 AngularJS Web 應用程序，然后調用 API 將塊分配給單個志愿者。這使多個人能夠直接更新地圖，從而使項目能夠擴大規模。

更新地圖的管理工具

?

?