天龍特公地製作過程
天龍特公地是公有地大行動的子項目之一,主要是因為獲得一份野生並帶點神秘色彩資料,裡面記載臺北市區全部公有可建築空地,其資料是如此無比珍貴,卻因為是CSV
格式,難以讓人閱讀,就萌生做成 Web 版,提供大家方便使用,正是此計畫用意。
Google Maps API
在 2014 年三月多,Google Maps API (v3) 開始支援 GeoJSON 功能1,方便在 Google 地圖存取 GeoJSON 資料,GeoJSON 是目前火紅地理資訊的開放標準資料格式,官方定義:
GeoJSON is a format for encoding a variety of geographic data structures. A GeoJSON object may represent a geometry, a feature, or a collection of features. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.
先來研究Google Maps API 提供範例:
1 | var map; |
弄一張地圖出來,把GeoJSON餵給它,就完成了! (謎之音:啥!就這麼簡單…)
既然,Google Maps API 在套 GeoJSON 那麼方便,那就直接實作吧!
準備動作
- GeoJSON
GeoJSON 從那裡來? 首先,要感謝 @runnywang 把零時資料中心的神秘資料轉成GeoJSON2 ,然後,我又弄了一個 API ,如下所示:
1 | /api/taipei/:area |
專門吐臺北市各區 GeoJSON 資料,有了這些後,基本上,我可以無痛地,隨便將一個區 GeoJSON 打在地圖上。
- Google Maps
為了讓地圖更好看,所以~決定加點顏色,現在來看看 Google Maps API 上,另一個範例:
1 | var map; |
跟上一個範例的程式碼差不多,不過~這次多設定 featureStyle
,這個多邊形瞬間多了一道顏色。
接著,我又想讓使用者,按下多邊形後,會出現這塊公有地資訊,所以~我又找了一個處理事件的範例來看。
1 | var map; |
開始拼裝
進入拼裝程序,部份程式碼是將上面那些東西全部串起來結果,其流程是接收到一個臺北市區名,就向 API 要這區的 GeoJSON 資料,取得後就利用 Google Maps API 載入 GeoJSON,並顯示以該區為中心的地圖,在幫各個多邊形加點顏色及事件處理,好讓使用者按下去時,就能出現資訊。若完整程式碼有興趣,歡迎到 CodePen 上,就能看全部東西。
結語
你/妳知道嗎?我們台灣的公有土地總量逐年下降,即私有化,以及許多公有土地開發的公共監理機制未盡完備,而淪為地產炒作標的,故公有地大行動的出發點,是公有土地資訊,全民都有知的權利,希望能藉由這個子計畫項目,可以喚起公民對公有地的認知。
請大家一起來關注屬於你、我、他、她,大家所擁有的土地。