DLM - Draw Life Map

一個將地圖結合相簿來呈現照片的網頁。

以前常去很多地方拍很多照片，但發現只把照片分成很多個資料夾放，實在無法呈現出那種征服(?)很多地方的感覺。

像是環島，我們會希望依照在每個鄉鎮拍的照片，標記在地圖對應的地理位置上呈現，這樣的話看地圖上很多地方都被我標記過，感覺就很爽！

See a Demo

Version

最新版本號： 1.03

Feature

地圖相簿：可以把好幾個地點的照片集合成一個地圖相簿。一張地圖上可以標記很多地理位置，每個地理位置就是一個你的相簿
畫廊照片呈現：使用 TN3 gallery，讓照片簡單呈現且方便瀏覽
屬於自己的地圖風格：地圖使用 mapbox 來製作，讓每張地圖可以以各種風格呈現！
地圖集：每張地圖相簿可依照自己喜好使用不同的地圖風格，並使用 page-scroll effects 集合每個地圖相簿，在首頁上輕鬆滾動選擇
無須後端程式架設：不須額外使用後端程式讀取本地照片，只需在每次整理完照片後，點擊指令腳本即可

How to use

建立地圖

在 photo/ 裡建立一個資料夾，取名叫 map1 (或是任意你想取的名字)，並且挑選一張適合 map1 的主題照片，放在 map1/ 裡，並更名為 index.jpg
建立相簿

在 map1/ 裡建立一個資料夾，取名叫 somewhere-22.9347833,120.2260679 (或是任意你想取的名字)，格式須依照：

[相簿名字]-[緯度],[經度]

不過請注意 資料夾名稱不能有空白
- 找座標小技巧
  1. 可以在 google 搜尋輸入你要的地點，然後網址列上就會有經緯度
  2. google map 上要找的地點按右鍵，選擇這是哪裡？，下方就會出現該地點的經緯度，複製時請注意這個經緯度的逗號 , 後面其實有個空白，請記得把空白刪除
```
範例：
台北101大樓
110台北市信義區
25.033947, 121.564499   # 這裡的逗號後面有空白，記得刪除
```
放張照片吧！將你的照片們放到剛剛所建的 somewhere-22.9347833,120.2260679 裡，目前照片支援 jpg、bmp、gif、png 檔
執行指令腳本來讀取照片

以下是兩種不同作業系統的腳本：
- Windows 系統：雙擊 getDir.bat
- Linux 系統： chmod +x ./getDir.sh; ./getDir.sh
請記得，每次變更 photo/ 裡的任何檔案後，都要執行一次指令腳本，點網頁時才會有照片喔～
打開 index.html，然後就可以選擇地圖瀏覽啦！

Photo/ Structure

photo 資料夾結構如下：

./photo
├── [mapName]
│   ├── [title]-[lat],[lng]
│   │   ├── [photo].jpg
│   │   ├── [photo].bmp
│   │   ├── [photo].gif
│   │   └── [photo].png
│   ├── [title2]-[lat],[lng]
│   │   └── ......
│   └── index.jpg
├── [mapName2]
│   └── . . .
└── index.jpg

Optional

在地圖內可點擊右上方 << 和 >> 來顯示和移動到下一個相簿

想要依照自己喜好排序的話，可以加上編號或是由日期開頭即可
```
範例：
20140101奇美博物館-22.9347833,120.2260679
20151314台南夕陽-22.976125,120.144791
```
custom options

編輯 index.html，裡面從 /* custom options */ 開始，可以設定
- dir
  
  字串，讀取的照片的位置，預設為 photo，若要更改還需改 shell script，不建議修改
- token
  
  字串，讀取 mapbox api 所需的 token，可自行辦 mapbox 帳號使用自己的 token
- mapboxIdList
  
  字串陣列，裡面代表每個地圖所要用的 mapbox id (也就是地圖的風格)，官方風格的 id 可以從這裡取得
- view
  
  陣列，儲存的值是一個經緯度的陣列 [lat, lng]，代表每個地圖最初讀取時的中心位置，在這邊有沒有設定其實差別不大，因為目前設定是地圖最初讀取時會將第一個標籤至中
- zoom
  
  整數，代表地圖最初讀取時的縮放大小