|
Story Map Side Accordion℠
|
 |
Side Accordion 版型的 App 會以側邊面板方式呈現一系列的地圖，每一塊面板皆能展開。點擊面板上地圖的標題便能展開面板，並顯示地圖的敘述內容。
欣賞其他人的 Side Accordion
|
準備工作
Story Map Side Accordion℠ App 讓您透過側邊的地圖選單面板展示兩幅或多幅相同主題的 Web 地圖與圖例。您可以在 Side Accordion App 中使用任何一幅來自 ArcGIS Online 的 Web 地圖。您可以建立新的 Web 地圖、使用您現有的 Web 地圖，或使用在 ArcGIS Online 中由其他用戶或組織建立與共享的 Web 地圖。在本教學中，您將建立屬於自己的 Web 地圖。首先您將建立一組地圖，然後設定 App 程式使用這組地圖。
我們不會為您展示在 ArcGIS Online 中建立 Web 地圖的所有步驟，因為這些標準程序您可能已經瞭解，或者可以在 ArcGIS Online Help 中閱讀到相關資訊。
在開始前，您應該決定在 Side Accordion App 中，每幅地圖應該要顯示相同的地理範圍，還是顯示不同的地理範圍。例如，您可使用上述第一種方式，讓每一幅地圖顯示同一座城市裡不同類型的人口屬性資料。運用此方式展示地圖時，每一幅地圖會同步連動。因此如果使用者在某一頁面中縮放或平移地圖，當他們切換到不同的頁面時，地圖會自動顯示已經平移或縮放的範圍。
請遵循以下步驟建置您的 Side Accordion Story Map。如果需要更多的提示和幫助，請參閱隨著樣版一同下載的 Readme PDF 文件。這些說明會包含對幾個樣板原始碼進行一些簡單的修改。但是不要擔心，您不需要成為程式設計師！
|
1
|
使用免費帳號 (Public Account) 或組織帳號 (Organization Account) 登錄 ArcGIS Online。
|
|
2
|
建立與製作您要在 App 中使用的第一張地圖。
請不要忘記為圖層設定快顯示窗，以便用戶可以點擊圖層上的圖徵取得更多資訊。快顯視窗是 Story Map 的重要組成要素。如要為 Web 地圖的圖層設置快顯示窗，請點擊「Content」視窗中的圖層選單，然後選擇「Configure Pop-up」。
|
|
3
|
儲存您的 Web 地圖。您輸入的地圖名稱會顯示在 App 的左側。 以公開存取方式分享 Web 地圖。
分享地圖的方式有以下幾種：
-
在『map viewer』中點選「Share」
-
在 ArcGIS Online 的 App 項目頁面中點擊「SHARE」按鈕 (如下圖所示)
|
|
4
|
連結到 ArcGIS Online 中您的地圖項目頁面 (如要查詢您的 Web 地圖項目，請點擊 ArcGIS Online 中的「My Content」，然後點選地圖的名稱；或在檢視地圖項目時，點擊「Detials」視窗中的「View item details」按鈕)。
點擊「EDIT」按鈕，然後在「Description」編輯器中輸入與地圖相關的描述內容。當 App 程式中左側的地圖選單被展開時，Description 的內容會顯示在該面板上。
在「Descript」的文字編輯器中，可以編輯文字格式、定義超連結及增加相片。如要取得最佳結果，請使用簡單的格式設定。
|
|
5
|
針對您要在 App 中使用的每一幅 Web 地圖重複進行 Step 2、Step 3 和 Step 4。
如果您要讓每一張地圖具有相同的檢視範圍，您並不需要在儲存地圖時調整每一張地圖的檢視範圍，因為這項功能是 App 程式的預設行為。使用同步顯示時，App 程式會在首次啟動後自動將 App 中第一張地圖 (最頂部) 的檢視範圍套用到其他地圖上，因此您僅需設定第一張地圖的檢視範圍。如果您要讓每張地圖顯示不同區域，則您在儲存每一幅 Web 地圖時設定的檢視範圍，就是 App 程式會顯示的範圍。以下我們會為您介紹如何在這兩個選項之間進行選擇。
|
|
6
|
下載 Side Accordionu 樣板檔案，並解壓縮至您自己的電腦上。
|
|
7
|
現在您可以為 Side Accordion App 設定要您要使用的 Web 地圖。
在下載的樣板資料夾中，打開 App資料夾內的 Series 資料夾，然後在您選用的文字編輯器中開啟 Config.js 文件。文件頂端，您會看到帶有註解「The Web map ID」的部分，你必須將前置步驟中製作的每一幅 Web 地圖 ID 加入此部分。當您瀏覽 Web 地圖時，您可以從瀏覽器網址列的 URL 中複製到該 Web 地圖的 ID。在 Config.js 文件中，會將每一筆 Web 地圖 ID 轉成一項 ID 屬性。您可以從下方螢幕截圖中看到，第二項和第三項 ID 屬性在預設情況下會被設定成註解。您可以取消註解，並在這兩項屬性中輸入您要使用的 Web 地圖 ID。如果 App 使用的 Web 地圖超過三幅，您還可以自行新增地圖屬性項目。每項 Web 地圖屬性都會放在大括號 { } 中，每項屬性之間以『逗號』分隔。
您可將每項 Web 地圖屬性中的「title」屬性設成空值。如此一來，每幅 Web 地圖的名稱都會自動套用至 Side accordion 的控制項上。
|
|
8
|
請繼續編輯 Config.js 文件，藉此設定 App 程式的其他屬性。方法如下：
在「title」及「subtitle」部分輸入您想在 App 頂端顯示的標題及子標題。子標題、簡介及摘要內容是吸引用戶瀏覽您製作之 Story Map 的有效方法。
SyncMaps 屬性可以讓您控制前述步驟所提及的縮放比例和地圖位置同步。此項目預設是打開的狀態 (意即預設情況下會設成 true)。如果想要讓每幅地圖顯示不同的檢視範圍，且不在地圖之間進行同步，則將此項目設為 false。
請儲存 Config.js 文件。
|
|
9
|
本步驟可以省略，但建議您遵循以下內容執行本項操作。
預設情況下，App 會在右上角顯示 Esri 的商標。當使用者點擊商標時，網頁會連結到 Esri 首頁。您可以使用您的專屬商標，並設定商標被點擊時，網頁會導向您所指定的 URL。利用此項功能即可顯示作者資訊及使用權限，讓使用者清楚知道這是您的著作成果，也為用戶提供一條獲取更多資訊的管道。
如要使用您的專屬商標，請將商標圖片放到樣板資料夾內的 resources\images\App 中。然後在您選用的文字編輯器中，打開樣板資料夾內的 Index.html 文件，查詢『div id="logo" 』字樣，然後將 Esri 首頁網址修改成您的目標網址 (請確保您的網址是以 http 或 https 開頭)，並且將 Esri 的商標名稱 esriGlobeLogow.png 修改成您的商標圖片名稱。
另外，建議您編輯 App 的「title」標籤。當使用者瀏覽您的 Web 地圖 App 時，「title」標籤內容會顯示在瀏覽器分頁視窗頂端。如果使用者共享了您的 App 或把 App 加入書籤時，預設也會使用此標籤內容。如要編輯本項文字內容，請到 index.html 文件頂端查詢「title」標籤，然後將現存的標題文字更改成您要呈現的文字。
儲存 Index.html 檔案。
|
|
10
|
現在可以開始部署您的 App了。
請將樣板內容全部複製到可被公開存取的網站或 Web 伺服器上。伺服器可以是您或您的組織所維護的 Web 伺服器，也可以是用於共享或託管您所架設之網站的伺服器。在企業環境中，你可以使用系統管理員權限將檔案傳送到伺服器上。在您的網站或Web伺服器上，index.html 的路徑會決定連線到您 Side Accordion 的網址。
恭喜您，您的 Side Accordion 現在已經開始運行!
您的樣板資料夾包含了完整的 App 程式原始碼，因此您可以為 App 增加額外的功能，並且修改 App 的外觀樣式與行為。您可以在 Story Maps 圖庫中仔細查閱其他作者的作品，並從中獲取客製化 App 的範例。
|
|
