描述

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

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

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

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

第 1 步 - 建立志愿者表格

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

使用 G-Sheets 的在線 Web 表單

?

第 2 步 - 構建地圖

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

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

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

第 2 階段 - 數(shù)字地圖

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

采用街區(qū)的互動版（采用藍色街道）

?

第 1 步 - 獲取數(shù)據(jù)

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

來自市政當局的 GIS 街道數(shù)據(jù)

?

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

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

第 2 步 - 將街道數(shù)據(jù)轉換為 GeoJSON

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

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

第 3 步 - 過濾和豐富數(shù)據(jù)

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

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

第 4 步 - 將數(shù)據(jù)加載到 Mapbox

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

第 5 步 - 構建地圖數(shù)據(jù)視圖

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

第 6 步 - 添加區(qū)域圖層以使地圖可用

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

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

地圖的頂級視圖

?

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

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

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

第8 步 - 將 API 集成到數(shù)字地圖中

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

更新地圖的管理工具

?

?