Tuesday, April 24, 2007

Flickr GMap Show

Update: Flickr Gmap Show with Greasemonkey user script

其實我己經評估 Flickr 好幾次了,目前所知比較值得用的網路相簿大致上有 Picasa Web Albums, Flickr。國內的幾個照片網站都各有各的缺點,無名、Xuite就不用說了,我在 Pixnet 雖然空間可以到 1G,但也就只是和 picasa 相同而已,又沒比較好用,所以沒有理由選擇它,而還有一個是相本角落,不過這個網站以我的技術應該沒資格申請 VIP 就是了。

接下來比較 Picasa 和 Flickr,則各有優勢之處,在免費的情況下,兩者都可以允許外連,也都不限流量,但 Picasa 不是隨便的網站都可以外連,而且外連的圖片會自動縮圖,但 Picasa 一申請馬上就給你 1G,就以整理照片的介面來說也算是很比便。而 Flickr 不管你的容量,而是讓你每個月上傳 100mb,和只能顯示 200 張,3 set 等限制。就以免費版而言,Picasa 似乎是個比較好的選擇。但無奈我的照片超過 1G,而且我儘量不想縮圖,所以再來比較一下付錢版。

Picasa 和 Flickr 付的錢幾乎可以說是一樣的,而 Picasa 付了錢以後就是一個"容量變大,規格不變"的空間了,而 Flickr 付了錢後就變得很不一樣了,無限的上傳流量,無限的空間,無限的照片數量,無限的管理功能,無廣告,允許下載原始照片,還有超強的社群(照片的社群和相關工具的社群)。其實如果要付錢,那其實就不用考慮什麼了。總而言之,反正就衝 Flickr Pro 試試看了。每個交了錢的 Flickr user 應該都會經過一段瘋狂上傳和整理的段落,Flickr 真是太多好玩的東西了,但要把以前的照片都拿出來整理真不是件容易的事,尤其一定要記得的是像機的時間一定要調整正確,不然調整照片的時間就是最麻煩的一件事了。

說這麼多還沒說到重點。Flickr 其中一件好玩的事就是在地圖標記照片,這個功能尤其用在旅遊照片時最是方便,而且在看照片的時候也別有一番體驗。但美中不足的是 Flickr 官方是用 Yahoo Map 來顯示,雖然知道 Flickr 被 Yahoo 買了後這是必然的結果,但老實說 Y!Map 真的還是比不上 GMap,所以就有很多相關的工具結合 Flickr 和 GMap 的,其中很多是用 Greasemonkey user script 來做的,像是 .CK 大的 http://webdev.yuan.cc/ 就有非常多好用的工具。另外也有相關的網站直接結合 Flickr 和 GMap ,像是 geowalkloc.alize.us 等。因為 Flickr 剛出來時並沒有地方設定照片的地理位置,所以愛好者發展出一種叫 geotagged 的方式來標示座標,而比較有歷史的應用程式都會依這套方法來運作,甚至也有建立資料庫來記錄有標示座標的照片,但後來 Flickr 本身就支援標示座標的功能,就不需要用 tag 的方式來記錄座標,但也因此而形成兩套標示系統,而目前很多工具還是使用 geotagged 的方式來運作,而還沒改用 Flickr 內建的座標記錄。

玩了一陣子之後,我覺得希望有一個工具可以在地圖標示出我某一 Set 的照片,也可以嵌在某個網頁之類的地方。但找了一下後覺得現在的工具功能都很強大,但幾乎都需要連到其他的 Server 端,不然就是需要自己有主機可以跑 Server 程式,我看了一下 Flickr API 和 GMap API ,覺得我想要的功能應該可以只需要用 JavaScript 就達成,所以就研究了一下,順便當作學習 JavaScript 的一個機會。

結果就是一個叫 Flickr Gmap Show 的 JavaScript 工具,目前主要就做兩個功能,一個可以瀏覽 GMap 在地圖上顯示有標示座標的照片,再來就是可以顯示一組 Set 中具有座標的照片。而一個特色就是在地圖上標示照片時會結合附近區域的照片而不會擠在一起,這個功能也出現在 Flickr 官方的地圖上。但因為所以的動作都是用 JavaScript 來做,所以如果 Client 端的電腦慢的話,反應應該也會很慢,而用 Firefox 會比用 IE 來的順暢一點。而理論上只要去申請一個 GMap API Key,應該就可以內嵌在任何地方才對。

flickr-gmap-show (host on Google Code)
http://flickr-gmap-show.googlecode.com/svn/trunk/flickr-gmap.html
(直接連到 google code svn ...)

fgs-screenshot
(這個 Set 真是太棒了,拿來當例子)

在寫的過程中才發現,我真是對 Javascript 一竅不通啊...

(Update: 本篇所提 script 已有新版本,而舊版本雖然仍可用但已不再維護,請有興趣使用的朋友參考開發站或是本站相關文章)

10 comments:

阮昭維 said...

您好,wctang大大
我很喜歡這一個js程式
我覺得這做的相當棒
我想請教一下
我們可以下載這隻程式放在自己的主機使用嗎
還是說只允許大家連到您的server來使用 XD

無論如何
我還是要說這真的是一個很棒的工具 :D

wctang said...

of course, 基本上只要依範例改掉 Google Map API key 就可以用了。這是用 MIT license 釋出的,所以完全可以自行取用或是修改,當然要連到我放的地方也可以,反正是放在 Google 上 :) 。

阮昭維 said...

Ok 感謝 :)

CK said...

I just wrote an article for your excellent work. Please see here.

Anonymous said...

我覺得PChome相簿也挺不錯的,不僅有無限的容量,雖然廣告多了一點,但相簿管理及分享功能都較無名、pixnet、xuite很完整...不知是否也可以加以分析看看呢..


謝謝

wctang said...

稍微看了一下 PChome 相簿,他是比較類似 flickr 的限制方式,也就是無限容量,但有上傳限制,一般會員每週50MB,VIP每月3GB,這個限制其實是比 flickr 還嚴格的。不過他好像沒有像 flickr 的免費會員只能列出 200 張的限制,也沒有相簿數目限制 (沒註冊不確定)。
基本上還算不錯啦,不過現在 flickr 已經推出中文版,所以建議你可以去看看,如果可以接受或者覺得值得付費的話,應該會讓你有更驚豔的感覺。

Vincent said...

您好,
請問是否有辦法將 Flickr 相片 丟到 google map上面,並且內嵌在網頁上讓大家欣賞呢?謝謝

wctang said...

@Vincent:
的確有對應的工具,可以參考 http://www.flickr.com/groups/geotagging/discuss/72157601198353554/
的討論,或者你有使用 greasemonkey 的版本的話,最近也有加入 Embedded Link 的功能,不過這些功能目前都還沒有仔細說明用法,有時間我會把這些工具整理一下並加上說明文件。

Gavin said...

你好:
我在我自己的blog依樣畫葫蘆做了一個
http://gavin-note.blogspot.com/
不過我想要像你提供網址的查詢方式
http://flickr-gmap-show.googlecode.com/svn/trunk/flickr-gmap.html
在不同區域間會有連接線相連,請問要怎麼做?

wctang said...

@Gavin,
唔,在這篇裡我所寫的 javascript 其實後來很久沒在維護了,但我後來算是推出一個比較新的版本,但是還沒有整理出用 script 的方式嵌到網頁中,目前只能用 iframe 的方式來整合。使用方式可以參考這篇所提的。
至於你提到的線段相連,那個只是根據照片前的時間先後順序來加上線段相連,但如果手上有 GPS track 的資料的話,可以提供更好的顯示效果,上述那篇有提供整合 GPS 的例子。

Post a Comment