介紹：

1. 左邊是leaflet 地圖div，右邊在網頁一開始透過API得到有兩個母項目

需求

(a) 母項目(landmarkCluster)

1. 點擊母項目標題或淺藍色區域後

   1. exec. function goto_landmarkCluster(cluster_id)

   2. 其他的母項目與其下的子項目都deselected

   3. 會從API讀取一筆帶有GPS的地點，並呈現在展開的子項目

      

   4. 左邊的地圖根據這一筆GPS地點zoom in 到適當的大小，並以marker cluster加入到地圖中 所謂適當的大小：地圖中包含這一筆所有GPS，GPS距離地圖的邊界最小大約25%

   

   d. 右邊該母項目與子項目的checkbox的狀態都變為selected

2. 點擊母項目前方的checkbox

   1. 若當下un-checked, exec. function select_landmarkCluster(cluster_id),
   2. 若當下checked, function deselect_landmarkCluster(cluster_id)
   3. 不影響其他母項目，其他母項目的顯示不會變化。只影響本身顯示與否
   4. 會從API讀取一筆帶有GPS的地點，並呈現在展開的子項目
   5. 左邊的地圖根據這一筆GPS地點zoom in 到適當的大小，並以marker cluster加入到地圖中 所謂適當的大小：地圖中包含這一筆所有GPS，GPS距離地圖的邊界最小大約25%

1. 母項目中點擊specific function要可以執行特定的(spec_func(<cluster_id>)，其中id 是母項目的序號

   function spec_func(id) {
   	console.log(id)
   }
   

2. 當再點一次checkbox或藍色區域，地圖中的marker cluster 消失，右圖中該母項目與子項目的checkbox都deselected.

(b) 子項目(landmark)

1. 當子項目標題被點擊後

   1. 執行 function goto_landmark(<landmark_id>)
   2. zoom in 到該子項目地點

2. 當子項目前方的checkbox被點擊

   1. 執行 function select_landmark(landmark_id)
   2. select/deselect 狀態切換，若為select, 左圖中有顯示，若為deselect，左圖中不顯示

3. 子項目中點擊specific function要可以執行特定的(spec_func(<id>)，其中id 是子項目的序號

   function spec_func(id) {
   	console.log(id)
   }
   

(c) functions which need implementation

1. get_all_landmarks(): return all landmarks cluster in the map

function get_landmarks(){
	...
	return output
}

output:

{
	"landmark_cluster":[
		{
				"cluster":"washinton",
				"landmarks":[
					{
						"id":4,
						"name":"United States Capitol",
					},
					...
		},
		{
				"cluster":"new york",
				"landmarks":[
					{
						"id":1,
						"name":"Statue of Liberty National Monument",
					},
					...
				],
		}
	]
}

1. goto_landmark(landmark_id)

function goto(landmark_id){
	// zoom in to landmark(landmark_id)
}

1. goto_landmarkCuster(cluster_id)

function goto_landmarkCluster(cluster_id){
	// zoom in and view all landmarks in the specific cluster. 
}

1. select_landmarkCluster(cluster_id)
2. deselect_landmarkCluster(cluster_id)
3. goto_landmark(landmark_id)
4. select_landmark(landmark_id)
5. deselect_landmark(landmark_id)