把資料畫在地圖上

Open Data中有很多資料是跟位置有關的，但是如果只是顯示經緯度，會非常不直覺，所以我來學怎麼將這些資料畫在地圖上顯示出來。

Leaflet

Leaflet 是一套適用於各種平台的 JavaScript 地圖繪製工具，可以呈現類似 Google 地圖的效果。

html的部分

<div id="mapid"></div>

css的部分

#mapid {
    height: 600px;
    width: 800px;
}

javascript的部分

(function() {

    // 建立 Leaflet 地圖
    var map = L.map('mapid');

    // 設定經緯度座標，以下是橘子蘋果總部的經緯度
    // 第二個參數數字越大代表zoom in越近
    map.setView(new L.LatLng(25.0272439, 121.5220343), 16);

    // 設定圖資來源
    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osm = new L.TileLayer(osmUrl, {
        minZoom: 8, //縮小地圖的最小值
        maxZoom: 16 //放大地圖的最大值
    });
    map.addLayer(osm);

    //插入橘子蘋果的marker
    var orangeAppleMarker = L.marker([25.0272439, 121.5220343]).addTo(map);
    orangeAppleMarker.bindPopup("橘子蘋果總部");

})();

搭配ajax的寫法大致如下

//「臺北市超級市場」API
var supermarketUrl = "http://data.taipei/opendata/datalist/apiAccess?scope=resourceAquire&rid=44441899-7d26-462a-a672-5cb8a60091b6";

getSuperMarkets(function(superMarkets) {
    superMarkets.forEach(function(market) {
        var marker = L.marker([market['GTag_latitude'], market['GTag_longitude']]).addTo(map);
        marker.bindPopup('<strong>'+market['stitle']+'</strong><br>'+market['xAddress']);
    });
});

function getSuperMarkets(callback) {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: supermarketUrl ,
        success: function(response) {
            callback(response.result.results);
        }
    });
}

資料範例

{
    result: {
        offset: 0,
        limit: 1,
        count: 35,
        sort: "",
        results: [
            {
            _id: "1",
            stitle: "天母超級市場",
            xbody: "惠康百貨股份有限公司成立於民國76年，是全國最大的生鮮超市。惠康公司在台灣的業務以經營頂好Wellcome超市為主；近年來發展Jasons Market Place及頂好Wellcome Gourmet超市。我們提供多樣性商品以及便利性的服務，讓消費者有全新的購物體驗。 ",
            xcreatedDate: "2012/6/1",
            xAddress: "臺北市士林區中山北路七段154巷6號",
            GTag_longitude: "121.532946",
            GTag_latitude: "25.123421"
            }
        ]
    }
}

OpenStreetMap - 地圖的open data

OpenStreetMap (開放街圖，簡稱OSM) 是自由而且開源的全球地圖，於2004年由英國的 Steve Coast 發起，採用類似 Wiki 的協作編輯以及開放的授權與格式。 OSM 的地圖由像你一樣的使用者繪製。

http://openstreetmap.tw/