Potluckmap: 把你的資料帶來跟我們一起製作一張協作地圖吧!

Potluckmap 能幫你做什麼?

Potluckmap 可以把你的 (還有合併他人的) 文字版地理資訊呈現在 OpenStreetMap 上面。 它以 javascript 語言撰寫, 具有以下特性:

screenshot of potluckmap

  1. 你可以指定好幾個資料來源, 它會把這些來源合併顯示在一張地圖上。
  2. 因為底層採用 leaflet-omnivore 函式庫, 所以資料來源可以是 .geojson, .gpx, .csv 等等格式。 此外, 也接受 OverpassTurbo 所匯出的資料格式。
  3. 資料來源可以設定每隔多久更新一次。
  4. 每個 marker 可以轉到不同的角度 -- 由資料裡面某欄位值, 套到數學運算式而決定。
  5. 如果你在本地主機架設好 tile server, 而且只採用本地的資料來源, 那麼它可以完全離線運作。

因為 (1) 跟 (2), 所以 potluckmap 很適用於眾多單位 (例如不同政府部門) 之間的合作。 每個單位可以專注於生產/更新它所關心的地理資訊 -- 用簡單的文字格式呈現就好。 這可以實現 「地理資訊與圖片呈現分開處理」 的效果, 也就是類似文書處理領域或網頁領域 (html+ css) 的 「內容與外觀分開處理」 的效果。

因為 (3) 跟 (4), 所以 potluckmap 很適用於呈現交通工具 (公車/汽車/腳踏車) 的動態。 全球大大小小都市的市政府不再需要自己設計公車動態程式, 只需要把把公車動態資訊用上述任何一種文字格式的檔案張貼出來即可。 開發者可以合作開發同一個公車動態 app。 更有可能發生的是: 未來將會有很多彼此相容而競爭的 apps, 每一個都適用於所有都市。 每一位遊客可以選用他自己偏好的 app, 不論旅行到地球上的哪個都市, 都可以用同樣那一個 app 來查詢。

Privacy-conscious users and users who need to use maps offline will find (5) particularly appealing.

(5) 對於關心隱私或是需要離線看地圖的朋友而言特別有用。


以下以 iframe 呈現 demo 地圖。 你也可以直接前往 demo 地圖的獨立頁面。 另幾個 (位於別站的) 範例是: 朝陽科大公車動態地圖 臺灣部分大學校園範圍及重心地圖 臺灣特大號超商旅遊地圖

不必安裝, 馬上線上試用

直接前往 demo 地圖 馬上開始玩, 例如把 「sources」 表格裡的任何 url 欄位換成你自己的地理資訊檔的 url。 下文有詳述如何儲存與恢復你所做的設定。

Installing Potluckmap

Just download potluckmap and open potluckmap.html in firefox.

Chrome or chromium users who want to use local data sources have two options. Either install a local web server and access potluckmap.html through the web server, or start the browser from the command line: chromium-browser --allow-file-access-from-files. Please see javascriptCanReadLocalFiles for details.

It is possible to share one copy of the codes among several web pages each of which needs its own map. Just append "?config=xyz.json" to the html page's url and potluckmap.js will use xyz.json as the configuration file.

If you want to run potluckmap offline, you need to have a local tile server.

Basic Setup

Potluckmap does not have a fancy user interface (yet). You have to edit its configuration file config.json manually. [2016/11/09: configuration file format changed! The new config file now only contains a small structure that corrospends to the "startval" portion of the old config file.] You can edit the following fields of the startval portion in the configuration file:

  1. "title": the title of your map.
  2. "sources": the data sources of your map.
  3. "views": a list of frequently used views as defined by their names, zoom levels, and geographic coordinates.

More details in later sections.

Using Potluckmap

In the bottom left corner there are a few menu buttons.

The "pushpin" menu button include options for you to:

  1. [some place name] switch to a predefined view
  2. [remember here] replace the current view with what you are looking at right now

The "reload" menu button include options for you to:

  1. [reload all] reload all data sources
  2. [reload changed] reload those data sources that have been manually changed in the configuration area
  3. [rebuild menu] rebuild the pushpin menu after you manually add entries to, delete entries from, or change the names of the views list in the configuration area.

Saving and Restoring Your Configuration

Below the map is the configuration area. Potluckmap uses json-editor as a lazy programmer's user interface -- options that don't yet have a normal UI can be changed here. For example, you can add views, delete views, change the view name here. However, changes may not go into effect immediately. That's why there are menu items like [reload changed] and [rebuild menu] in the map UI.

After you have configured your sources and views, you may want to save it. Press the [Edit JSON] button, copy the content, and (using a text editor) paste it to the "startval" portion of your new config.json file save it as your new config.json file. (Note: the [save] button does not save anything to the disk. It only confirms your manual editing within this session.) Potluckmap will then use your new configuration the next time it is run.

If you are visiting the demo page, then of course it is always the demo map that gets displayed upon opening the page. You can still ask it to display your own map as long as your data files have a public url. Simply press the [Edit JSON] button, and paste the "startval" portion of your config.json file into the edit window. Then choose "reload all" from the map.

Beware that the configuration file may undergo changes as potluckmap is being actively developed. Your old configuration file may not always work with a newer version.

More Details About the Configuration Options


You can specify the format and the url of each data source. Leaving the format field empty instructs potluckmap to choose the format parser according to the file name extension of the url.

Features of type "Point" are styled using the these fields shap, glyph_set, glyph, and optionally facing. The available set of shapes can be previewed at icons.png . Leaving the glyph_set empty, you can type any short text in the glyph field as the label for markers. Alternatively, choosing glyphicon as the glyph_set, you can type the name of one of the bootstrap glyphicons in the glyph field. Additionally, the facing field may contain a valid mathematical expression containing one or more numerical fields from the source data file. In this case, the icon is rotated by this amount of angle (in degrees).

Features of type "LineString" are styled using the style field. See cyut bus for example. The json editor for "style" is hidden by default. To enable user editing, change "hidden": true to "hidden": false in the entry corresponding to "style" in schema.json . (But it looks awkward.)

The refresh field is the number of seconds for automatically refreshing this source. However, it must be greater than or equal to 20.

See Leaflet.Icon.Glyph for more details about shape and glyph.

Tile Provider

This option employs the leaflet-providers project. Visit their demo to see what each tile provider looks like.