分類
Javascript

台灣寺廟地圖

想做個台灣的寺廟地圖, 我們先來找政府 opendata 資料, 可以看到在這裡有:

https://data.gov.tw/dataset/8203

內容為全國宗教資訊系統資料-寺廟

資料只有一種格式, 就是 XML, 連結在此:

https://data.moi.gov.tw/MoiOD/System/DownloadFile.aspx?DATA=78CA6206-2E8C-4688-AB54-925330B0784B

不過會被重導至一個拿不到資料的連結:

http://religion.moi.gov.tw/Report/temple.xml

沒關係, 改為 https 即可, 如下:

https://religion.moi.gov.tw/Report/temple.xml

內容如下:

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfOpenData_3 xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <OpenData_3>
    <寺廟名稱>竹圍仔福德祠</寺廟名稱>
    <主祀神祇>福德正神</主祀神祇>
    <行政區>臺南市</行政區>
    <地址>臺南市白河區大竹里14鄰大排竹206號</地址>
    <教別>道教</教別>
    <建別>適用監督寺廟條例寺廟</建別>
    <組織型態>管理人(住持)制</組織型態>
    <電話>06-6851562</電話>
    <負責人>錢玉珠</負責人>
    <其他 />
    <WGS84X>120.396797180176</WGS84X>
    <WGS84Y>23.3648853302002</WGS84Y>
  </OpenData_3>
  <OpenData_3>
    <寺廟名稱>福德祠</寺廟名稱>
    <主祀神祇>福德正神</主祀神祇>
    <行政區>臺南市</行政區>
    <地址>臺南市白河區糞箕湖河東里33之2號</地址>
    <教別>道教</教別>
    <建別>適用監督寺廟條例寺廟</建別>
    <組織型態>管理人(住持)制</組織型態>
    <電話>06-6852378</電話>
    <負責人>吳朝正</負責人>
    <其他 />
    <WGS84X>120.438499450684</WGS84X>
    <WGS84Y>23.3971004486084</WGS84Y>
  </OpenData_3>
  ....
</ArrayOfOpenData_3>

因為沒有 JSON format, 於是利用這個工具來轉換:

https://codebeautify.org/xmlviewer

由 XML 轉為 JSON, 如下:

{
    "ArrayOfOpenData_3": {
        "OpenData_3": [
            {
                "寺廟名稱": "竹圍仔福德祠",
                "主祀神祇": "福德正神",
                "行政區": "臺南市",
                "地址": "臺南市白河區大竹里14鄰大排竹206號",
                "教別": "道教",
                "建別": "適用監督寺廟條例寺廟",
                "組織型態": "管理人(住持)制",
                "電話": "06-6851562",
                "負責人": "錢玉珠",
                "其他": "",
                "WGS84X": "120.396797180176",
                "WGS84Y": "23.3648853302002"
            },
            {
                "寺廟名稱": "福德祠",
                "主祀神祇": "福德正神",
                "行政區": "臺南市",
                "地址": "臺南市白河區糞箕湖河東里33之2號",
                "教別": "道教",
                "建別": "適用監督寺廟條例寺廟",
                "組織型態": "管理人(住持)制",
                "電話": "06-6852378",
                "負責人": "吳朝正",
                "其他": "",
                "WGS84X": "120.438499450684",
                "WGS84Y": "23.3971004486084"
            },
            ...
        ],
        "_xmlns:xsd": "http://www.w3.org/2001/XMLSchema",
        "_xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance"
    }
}

就可以拿來用了, 配合一下 Google Maps Javascript API:

https://developers.google.com/maps/documentation/javascript/examples/marker-simple

我們就可以把這組 JSON 的資料畫面 Google Maps 上面了, 想看看效果嗎? 有密集恐懼症的朋友要留意一下:

https://sample.diary.tw/templemaps/

[2021/7/13 18:06] 朋友提到因為 loading json 時間長, 增加了 jquery LoadingOverlay 功能來實現等待的效果, 才不會覺得沒動作, 另外也加上了”教別”的統計了, 看看這個有趣的數字吧:

教別 數量
道教 9708
佛教 2285
一貫道 231
其他(儒教) 23
undefined 7
軒轅教 6
理教 6
彌勒大道 6
天德聖教 5
天道 3
天帝教 2
其他(佛教) 1
其他(黃中) 1
三一(夏)教 1
其他 1
其他(唯心聖教) 1
其他(藏傳佛教寧瑪巴) 1
其他(天主教) 1
其他(道教) 1
其他(顯教) 1
其他(道) 1

[2021/7/19]新增Table View

利用 Tabulator (http://tabulator.info/)這個工具來將取得的 open data資料以 table view進行檢視的方式, 對於結構化資料也很方便, 並將排序與過濾器加上, 可以更快速方便地檢視想看到的資料, 請參閱:

https://sample.diary.tw/templemaps/table.htm

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *