Flickr Edit On GMap v0.9


  • UI revise. The ‘split’ between map and photo is now adjustable. In previous version, only medium(500px) photo is supported. An appropriate size of photo will be displayed to fit the area of photo part.
  • GPS track now support only local GPX file
  • Remove logout function. Leaving the page results in logging out.

Google Spreadsheet and Track Viewer on Gmap

Track Viewer on Gmap can load track specified in URL, so that it can be embeded in other pages using iframe.
The format of Google Spreadsheet track format and the way to produce is described here:

format: just simple as “Index, Lat, Lon, Altitude, Time”, as shown:

To generate this spreadsheet, you can 1, use GPSbanel, and 2, use
this page, or craft manually yourself.

The generated excel( or csv files) must be uploaded to Google Docs, and “published” so that everybody else can view it.

Using GPSBABEL: Select the output format as “Tab delimited filelds useful for OpenOffice, Ploticus…”. Please NOTE: the Altitude fields generated by psbabel is “Altitude(m)”, and you must manually delete “(m)”. And there are unused fields, it is better to delete those unused fields to save internet resources.


Track Viewer on Gmap 事實上可以用網址的方式載入軌跡,以便以iframe的方式內嵌於一般的網頁中。

而Google Spreadsheet的格式和產生方法說明如下:

格式:Index, Lat, Lon, Altitude, Time



不管用什麼方式產生,都必須上傳到Google Docs,然後公開發佈。主要是因為Google目前沒有提供公開發佈的API,所以沒有一個方便的方法。

使用GPSBABEL,選擇輸出格式為”Tab delimited filelds useful for OpenOffice, Ploticus…”。請注意,gpsbabel產生的檔案中Alititude為Altitude(m),要手動修改刪掉”(m)”,另外,會有



Track Viewer on Gmap-中文版


Track Viewer on Gmap可以看GPX檔(Google Spreadsheet)的軌跡,它也可以將選擇的軌跡存成單一軌跡。
會看到一個很簡單的Google Map:
右上方的Google control下有一列工具列:
載入 – 載入軌跡
儲存 – 將顯示的軌跡存成GPX 檔
顯示/隱藏軌跡資訊 - 顯示或者隱藏目前選擇的軌跡資訊
顯示/隱藏高度變化圖 - 顯示或者隱藏目前選擇的高度變化圖
顯示/隱藏速度變化圖 - 顯示或者隱藏目前選擇的速度變化圖
顯示/隱藏軌跡列表 - 顯示或者隱藏軌跡資訊列表
About - 關於

從載入開始看,可以載入Google Spreadsheet的資料,當然,這個spreadsheet必須是公開發佈而且是符合要求格式的:






Track Viewer on Gmap

I don’t mind that I am the only user, but if someone else like it, I would be glad. That’s why I published this application.

Track Viewer on Gmap is used to view TRACKS of gpx files(and Google Spreadsheet). Saving selected tracks and optionally combine them into one single track is also possible.
Simple demostration:
Go to
You will see


look at the right top coner, below GMAP control:


All functions are listed as icons, and they are:

Load – load tracks

Save – save selected tracks to another GPX file.

Show/Hide Track Summary -show or hide information about selected track.

Show/Hide Altitude Chart – show or hide altitude chart of selected track

Show/Hide Speed Chart – show or hide speed chart of selected track

Show/Hide Track List – show or hide the “Track List”


Let’s start from “Load”. You can load track from data of Google Spreadsheet. Of course, the spreadsheet must be published and formated.


Or, you can open GPX file specified as URL, the url should be public accessible.


Or, you can upload an valid GPX format file as the third option. Note: since Javascript cannot access local file, the local gpx file must be uploaded and then downloaded, so it will take some time to finish loading.

Once tracks are successfuly loaded, you can find a list of tracks below the tool icons.

Check/uncheck the checkbox to show/hide the track.

Click the track name to SELECT the track.


You can hide the Track List.


Click the 3rd tool icon to show Track Summary.


Alitude/Speed charts. You can click on the chart, and the coresponding point on map will be shown.


You can save showing track into another GPX file. Showing tracks are those shown on map with checkbox checked. You can “combined” them to a single track with specified track name.


Flickr Editor on Google MAP

This application is here for two reasons.
The first reason: I am learning Javascript/AJAX, and I love Flickr and Google Map.

The second reason: I upload all my photos to Flickr, most of them are during travel and location is important, and select some of them to share with friends. Flickr Organizer is good to manage photos/photosets. However, it’s hard for me to select photos from one set in Flickr Organizer, for I cannot make selection by seeing the thumbnails. To look larger photo, and the location where the photo was taken is also cumbersome. Not to mension that you must wait to save modification to title/description of each photo.
The goals are:

  1. Google Map is used, of course.
  2. Keyboard Control for Previous/Next, and Tag set/unset.
  3. “Medium” photo displayed, and preloaded. “Large” photo is available and can be quickly accessed.
  4. Update modification in one batch

So this Flickr-Gmap mashup is created, so that I can edit title/description, by look where the photo was taken, and set tags quickly. Other operations, like
perimission setting or creating new set, can be done easily in Flickr Organizer.


  1. Login Flickr and Authorization
  2. Click the link “Login Flickr” on left-bottom to login Flickr and authorize “Flickr Editor” to access your photos.
    You can also VIEW photo sets by manually input SET ID, without login. Of course, you can only see PUBLIC photoswithout login.
    The authorization data is not saved, so you must “log-in” everytime.
    If you want to edit Titles, Descriptions, Locations, Tags of your photos, you must authorize “Flickr Editor” to “Write Access”.

  3. Browse
    select set
    Once login and authorized, you can select your photoset from the drop down list.
    Scroll and click the thumbnails to view photos. You can also click the markers on map to select photos.
    Keyboard action:
    ‘z’: previous photo.
    ‘x’: next the photo to see “Large Image”. Click on the “Large Image” to dismiss it.
  4. Edit
    If “Write Access” is authorized, you can edit the meta data following.
    Click “End Edit” button to end edit mode.
    Or, click “Update All” to update editing to Flickr.
    Everything you modified is kept locally, before you “Update All” to Flickr.The description must be loaded before you can edit it. Since description is loaded in asynchronous manner, you might see “loading” in the description textarea.

    1. label & description
      Input the text in the text fields.
    2. location
      Click the “Set Location” button, and click on map to set photo location.
    3. tags
      The most complex items here.
      Check/uncheck the checkboxes to set/unset Tags.
      The tag names can be changed. Just place mouse cursor over “Tags”, the
      tag names editor will pop-up.
      tagname editor
      Change the text to what you want.
      The real tag names used to update to Flickr are those before you press
      Update All“. For example, if you select tag 1, named “select_1“, and later change the “select_1” to “myselection_1“, and then press “Update All“, the tag set to Flickr will be “myselection_1“. Changing tag names will change status of the checkboxes, to reflect the real status of TAG- set or unset. For example, if one photo already has one TAG , named “myprevious_select“, and after changing one of the tag names to “myprevious_select“,the corresponding checkbox will be checked. The TAGs of the photo will also show on the Tag Name Editor, following the “This Photo“.
      Keyboard Action:
      press key 1,2, or 3 to set/unset corresponding tags.

View Mode:
See “Browse” section. If setid is given in URL, it is in “View only” mode.

寫這個應用有兩個理由;第一,我在學Javascript/AJAX,我喜歡Flickr及Google Map。
其次,我把所有的照片都放上Flickr,然後挑選一些公開;這些照片大都是去玩的時候拍的,所以拍照的地點有重要性。Flickr Organize很好用,但是拿來選照片就很難用:只看縮圖很難決定,而要看大一點的圖及地圖,更是要用Mouse點好幾次才行。更提每更改一張照片的資訊,就要等一下子。

  1. 使用Google Map。
  2. 可以用Keyboard看下/上一張,以及設Tag
  3. 可以看到”Medium”(中等)的照片,有預載,也可以很快地看大圖。
  4. 一次更新所有的變動,而不是改一下就要更新。因為更新要等一下,節奏不順。

這個Flickr-Gmap的「混搭」就是這樣來的;可以編輯Title/Description、可以看到照片在那裏拍的,快速地設Tag。設好Tag後就可以很方便地用Flickr Organize來做其他動作;例如,更改權限或加入新的SET。


  1. 登入Flickr及授權
  2. 點左下角的”登入 Flickr” 授權”Flickr Edito on Google Map”的存取。不登入也可以用輸入SET ID的方式看照片,但只能看到公開的照片。

  3. 流覽
    select set
    ‘z’: 前一張。
    ‘x’: 下一張。
  4. 編輯

    1. 標題及說明
    2. location
      按”設定位置” 按鈕,然後在地圖上對應的點按一下。
    3. Tag
      tagname editor
      勾選Tag只是勾選邏輯上的三個tag,真的會寫到flickr的tag最在按「更新全部」鈕之前的tagname。例如,原本第一個tag是”select_1″,勾了第一個tag,後來將”select_1″改成”myselection_1″,如果接著就儲存變動,則真正的tag是”myselection_1″。改變這三個tagname也會改變checkbox的狀態,以反應真正的狀態:例如,如果有張圖已經有一個tag叫”myprevious_select”,當把第一個tagname改成”myprevious_select”後,對應的checkbox就會被勾選。照片原本有的TAG會出現在編輯tagname的editor下,在”This Photo:”後面。
      按1,2,3 即可勾/取消勾選這三個Tag。

操作請參考前面的說明。如果網址加上set id進入,則不會出現可以編輯的畫面。