分類
Javascript

雙北Youbike租借站即時資訊地圖

因為介紹 open data 與 google maps javascript sdk 的使用與實作 , 利用了台北市的 open data 與 新北市 的 open data 來進行雙北 Youbike 租借站即時資訊.

台北市的 Youbike 資料:
http://data.taipei/opendata/datalist/datasetMeta?oid=8ef1626a-892a-4218-8344-f7ac46e1aa48

新北市的 Youbike 資料:
http://data.ntpc.gov.tw/od/detail?oid=71CD1490-A2DF-4198-BEF1-318479775E8A

資料來源分別為(JSON type):
http://data.taipei/youbike
http://data.ntpc.gov.tw/od/data/api/54DDDC93-589C-4858-9C95-18B2046CC1FC?$format=json

其中台北市的資料 SERVER還有支援 CORS .

接下來就利用這些資料與 Google Maps Javascript SDK 來實作這個地圖了. 資料欄位都很容易理解, 其中使用不同顏色來表示租借站的狀態, 區分為可借可還 / 可借不可還 / 不可借可還 / 暫無營運, 而為能更容易借還, 目前可借為超過 2台, 可還也以超過 2個空位為基礎, 實際數字可點擊站點得知.

可以參考看看:
http://sample.diary.tw/youbike/

[2020/12/13 13:44]

由於原本的 data source 有問題, 已無法正常取得內容, 查找一下更新後的 data source, 調整如下:

台北市的由: http://data.taipei/youbike 改為 https://tcgbusfs.blob.core.windows.net/blobyoubike/YouBikeTP.gz , 而新北市的由: http://data.ntpc.gov.tw/od/data/api/54DDDC93-589C-4858-9C95-18B2046CC1FC?$format=json 改為 https://data.ntpc.gov.tw/api/datasets/71CD1490-A2DF-4198-BEF1-318479775E8A/json/?size=10000

調整 data source 後, 原範例頁的資料就能正常呈現囉:

https://sample.diary.tw/youbike/

分類
Javascript

實做使用Google Maps API進行指定位置是否在指定區域內

有個需求是要檢查某地址是否在某特定區域內, 於是思考使用 Google Maps API 來實做, 判斷的部分可以不需要 Google Maps 顯示, 但在測試或開發時, 若有可視的地圖會比較容易理解狀況, 也比較明白指定區域與指定位置的關係, 以下分為幾個部分來進行.

首先需要能繪製指定區域, 這個和程式沒有直接關係, 但透過 Google 的 MyMaps 比較好進行:

http://mymaps.google.com/

進入後, 建立新地圖, 出現 Google Maps 之後, 使用”畫一條線”的”新增內容或形狀”工具來進行區域的繪製:

一點一點地把區域點好後, 點回起點, 就可以產生一個封閉區域了, 再給予命名, 如以下範例:

這個部分可以隨時再進行區域的調整, 到自己滿意為止, 之後我們需要的其實是這個區域的多邊形座標點, 如何取得呢? 點擊新增圖層邊的三個點, 出現選單後, 選匯出成 KML:

就可以取得對應的 KML 檔案了, 打開 KML 檔中, 最重要的是找到座標點, 內容會是這樣的文字:
<coordinates>121.5437222,25.0416515,0.0 …… </coordinates>
這些座標點就是用來做這個指定區域的座標位置了, 接下來才真正要準備實作程式.

寫了一個小程式, 把這些座標點輸出成一串之後 Google Maps API Geometry 會用到的格式:

http://sample.diary.tw/36/tools.htm

我們將上面的 <coordinates> 中的字串, 填入上面小程式的 textarea 之後, 按下”產生區域多邊形座標”, 就可以得到像是這樣的內容:

{lat: 25.0416515, lng:121.5437222},
{lat: 25.0333111, lng:121.543529},
.....

先準備好到這裡, 之後參考這個部分可以進行多邊形繪製:

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

可以看到其中會需要的陣列就由上面小程式產生的內容填入即可, 記得, 在參考 google maps 的範例程式時, 在 initMap 中, 有個 center 參數和 zoom 參數, 要填入實際上你地圖的位置附近, 不然不會出現在地圖上, 如 google maps 範例內, 是百幕達三角洲地帶, 而且 zoom 是 5, 若是以台北市來看, 大約 zomm 是在 15或16 左右.

如範例: http://sample.diary.tw/36/map1.htm

主要程式碼為:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 25.037828, lng: 121.547204},
  zoom: 16,
});

var testAreaCoords = [
    {lat: 25.0416515, lng:121.5437222},
    {lat: 25.0333111, lng:121.543529},
    {lat: 25.033116700000004, lng:121.5526271},
    {lat: 25.036052399999996, lng:121.55267000000002},
    {lat: 25.0374716, lng:121.55146840000002},
    {lat: 25.038016, lng:121.5513396},
    {lat: 25.0415348, lng:121.5474987},
    {lat: 25.0416515, lng:121.5437222}, 
];

testArea = new google.maps.Polygon({
    paths: testAreaCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.05
    
});
testArea.setMap(map);

接下來就是由指定的地址查找座標, 這個部分會用到 Google Maps API 中的 geocoder, 只需要將地址傳入, 就可以取得對應的座標了, 參考資料:

https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingStatusCodes

程式碼不多, 參考範例:

http://sample.diary.tw/36/map2.htm

輸入地址就可以取得座標(經緯度)

主要程式碼如下(注意, geocoder 是用 callback 方式回傳):

function initMap() {
    geocoder = new google.maps.Geocoder();
}

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            alert("lat=" + results[0].geometry.location.lat() + ",lng=" + results[0].geometry.location.lng());
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

最後就是利用一個很重要的判斷式來判斷某地址(已取得座標)是否在指定區域內, containsLocation() 參考:

https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation

上面的範例是用點擊地圖的方式, 看點擊的位置是否在百幕達三角洲內, 是的話就是紅色 marker, 不是的話, 就用綠色 marker.

來改寫一下程式碼, 就可以達成判斷指定的地址是否在指定的區域內了, 如範例:

http://sample.diary.tw/36/map3.htm

主要程式碼:

// check if position in polygon
if(google.maps.geometry.poly.containsLocation(results[0].geometry.location, testArea)){
    alert("在指定區域內");
}else{
    alert("不在指定區域內");
}

總結一下:

  1. 先製作指定區域座標陣列(多邊形用)
  2. 使用 geocoder 取得指定的地址轉換為座標
  3. 使用 google.maps.geometry.poly.containsLocation 來判斷2.是否在1.裡面

PS. 記得要先到 https://console.developers.google.com/ 建立一個可以使用 Google Maps API 的應用程式, 並建立對應的 browser key 放到上面的程式碼中, 以順利執行你的 web 應用程式.

分類
程式技術

Google Maps Style

Google Maps 大家很常用吧. 在做一些結合 Google Maps 的應用時, 有時會希望能把上面的圖示簡化, 或是一些圖示的顏色改變, 要如何進行呢?

可以使用 Google Maps API Styled Map Wizard: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

這個 Wizard 可以快速的開關與調整圖示的顯示與否與改變顏色, 設定好後, 再產生出 JSON 格式的描述檔, 就可以自訂 Sytle 的 Google Maps.

例如要所有的水都消失:

[ { “featureType”: “water”, “stylers”: [ { “visibility”: “off” } ] } ]

以此類推, 一方面預覽一方面快速產出對應的描述檔, 很快速地建立自訂的 Google Maps.

不過若是想要找一些現成的, 可以利用這個服務:
https://snazzymaps.com/

上面已經有現成的許多格式可供套出, 一樣是產生 JSON 格式的描述檔供應用.

需要更詳細的自訂Google Maps Style可以參考Google 的官方文件:
https://developers.google.com/maps/documentation/javascript/styling

分類
WebTrend

Google Maps提供街景地圖了

令人期待已久的 google maps 的 street view 已經上線了, 其實昨天在操作 google maps 就發現左上的那個小人已經蠢蠢欲動, 一下有顏色, 一下又變白, 原本以為可以用了, 後來又發現還不行, 不過今天證實可以用了.

這個功能相較於日本及美國, 台灣算比較晚推出, 不過相對於對兩者, 台灣也因為較晚推出, 所以拍出來的效果及細緻程度都高很多, 非常非常清晰, 流暢度也很好, 使用方式很簡單, 只要連上 google maps, 瀏覽時, 把左邊的小人(在變橘黃色的狀況下)拖出來, 就可以讓那個小人放在有變藍色的街道上看街景了.

來試看看吧: 台北市政府: link

這個街道地圖的功能很強大, 方便未來在許多應用場合, 可供結合, 而且因為精細程度夠高, 所以效果也很好, 無論是找地址, 找地點, 甚至是不熟的地方, 利用這樣的呈現方式, 相信能讓不熟路況及不知道路的人有很好的參考依據.

但相信這個的建製成本也很重, 再加上提供這樣的服務, google 一樣也是免費, 他們未來想要做的, 相信是非常非常多的, 光是在 gps 上的結合或是應用, 就可以衍生出一堆, 更不用說和其他異業的結合及應用.

雖然目前還沒有全部的地圖都 support , 不過應該會慢慢地上線, 到時候, 小人能到的地方也就愈來愈多囉. 目前有支援的地區還只有大台北地區部分, 可以參考下面當小人飛入時的區域(變藍的地方):

分類
WebTrend

經緯度轉換(換算)(papago)

這個是一個簡單的事啦. 只是 papago 只接受度分秒的方式輸入座標, 有點鳥, 因為有時要用十進位方式輸入或查詢, 所以需要做個小轉換.

其實公式不過就是這樣, 將度分秒(60進位)換成十進位, 公式很單純, 小學生也都會:

x度 y分 z秒 = x + y/60 + z/3600 度

也就是這一回事而已. 為了讓自己方便, 也讓大家方便, 乾脆做個小工具來操作好了, 注意, 是 WGS84 的格式, 若有其他格式, 請參考中研院線上轉換程式(也是線上直接算: http://webgis.sinica.edu.tw/cgi-tran/webtrans.htm)

另外也說明一下 google maps 可以接受的格式, 例如台北101的座標為: 25.033493, 121.564101, 用文字說明是

北緯 25.033493度, 東經 121.564101度,

用60進位則為

北緯 25度 2分 0.574799999999982秒, 東經 121度 33分 50.76359999997749秒

利用 google maps 的連結, 參數為 q 給定的方式, 根據這兩種格式都可以連到, 如下:
http://maps.google.com/?q=25.033493,121.564101
http://maps.google.com/?q=25 2 0.5748, 121 33 50.7636

這兩種方式, 連向的位置是完全一樣的, 當然前題是 google maps 也是用 WGS84 的格式.

sample 放到這裡: http://sample.diary.tw/18/maps.htm

另外是 google maps 無法由瀏覽地圖直接查經緯度, 可以利用這個方便一點: http://www.mygeoposition.com/

分類
WebTrend

google maps 名人地圖

才寫完”時空的魅力” http://diary.tw/archives/868 這篇, google maps 又有新服務了, 與其說是新服務, 不如說是新應用.

google maps 上面, 若是多加了”名人”來加持一下, 相信會很有趣, 就是因為這樣的應用情境, 所以 google maps 把名人地圖搬上來的確很吸引人, 利用名人的推薦, google maps 的地圖空間概念, 整合起來, 可閱性的確高很多, 來看看如何操作:

首先連到: http://maps.google.com.tw/

再來連結下面有個”探索全球”:

再來就會出現”台灣台北”的這個預設地點(當然可以選其他國家的城市看看囉), 並且出現許多名人的介紹, 可以點擊看看有什麼好吃, 好玩的資訊, 右側的地圖就會出現囉, 例如隋棠, 用一個很有趣的名模標籤, 標示了一些隋棠的地圖, 這樣一來, 大家就可以按圖索驥去試看看囉.

這樣的一個應用, 真的好玩又有趣.

相關閱讀,
google news 相關新聞: http://news.google.com.tw/news/story?um=1&ned=tw&cf=all&ncl=dmqtVPOHEZmlIuMjzXBODh-Ye8XHM
Google名人地圖標記 從虛擬搬上現實 http://www.bnext.com.tw/FocusDay_2099