Story Map Side Accordion 教學

Story Map Side Accordion℠ App 讓您透過側邊的地圖選單面板展示兩幅或多幅相同主題的Web 地圖與圖例。

您可以在Side Accordion App 中使用任何一幅來自ArcGIS Online ...   Home|ContactUs|Facebook官方粉絲團|Google+   互動產品 教育訓練 技術支援 活動訊息 公司簡介   StoryMapSideAccordion℠ SideAccordion版型的App會以側邊面板方式呈現一系列的地圖，每一塊面板皆能展開。

點擊面板上地圖的標題便能展開面板，並顯示地圖的敘述內容。

  特　　色：   欣賞其他人的SideAccordion     準備工作   StoryMapSideAccordion℠App讓您透過側邊的地圖選單面板展示兩幅或多幅相同主題的Web地圖與圖例。

您可以在SideAccordionApp中使用任何一幅來自ArcGISOnline的Web地圖。

您可以建立新的Web地圖、使用您現有的Web地圖，或使用在ArcGISOnline中由其他用戶或組織建立與共享的Web地圖。

在本教學中，您將建立屬於自己的Web地圖。

首先您將建立一組地圖，然後設定App程式使用這組地圖。

我們不會為您展示在ArcGISOnline中建立Web地圖的所有步驟，因為這些標準程序您可能已經瞭解，或者可以在ArcGISOnlineHelp中閱讀到相關資訊。

在開始前，您應該決定在SideAccordionApp中，每幅地圖應該要顯示相同的地理範圍，還是顯示不同的地理範圍。

例如，您可使用上述第一種方式，讓每一幅地圖顯示同一座城市裡不同類型的人口屬性資料。

運用此方式展示地圖時，每一幅地圖會同步連動。

因此如果使用者在某一頁面中縮放或平移地圖，當他們切換到不同的頁面時，地圖會自動顯示已經平移或縮放的範圍。

請遵循以下步驟建置您的SideAccordionStoryMap。

如果需要更多的提示和幫助，請參閱隨著樣版一同下載的ReadmePDF文件。

這些說明會包含對幾個樣板原始碼進行一些簡單的修改。

但是不要擔心，您不需要成為程式設計師！     1 使用免費帳號(PublicAccount)或組織帳號(OrganizationAccount)登錄ArcGISOnline。

    2 建立與製作您要在App中使用的第一張地圖。

請不要忘記為圖層設定快顯示窗，以便用戶可以點擊圖層上的圖徵取得更多資訊。

快顯視窗是StoryMap的重要組成要素。

如要為Web地圖的圖層設置快顯示窗，請點擊「Content」視窗中的圖層選單，然後選擇「ConfigurePop-up」。

      3 儲存您的Web地圖。

您輸入的地圖名稱會顯示在App的左側。

以公開存取方式分享Web地圖。

分享地圖的方式有以下幾種： 在『mapviewer』中點選「Share」 在ArcGISOnline的App項目頁面中點擊「SHARE」按鈕(如下圖所示)       4 連結到ArcGISOnline中您的地圖項目頁面(如要查詢您的Web地圖項目，請點擊ArcGISOnline中的「MyContent」，然後點選地圖的名稱；或在檢視地圖項目時，點擊「Detials」視窗中的「Viewitemdetails」按鈕)。

點擊「EDIT」按鈕，然後在「Description」編輯器中輸入與地圖相關的描述內容。

當App程式中左側的地圖選單被展開時，Description的內容會顯示在該面板上。

在「Descript」的文字編輯器中，可以編輯文字格式、定義超連結及增加相片。

如要取得最佳結果，請使用簡單的格式設定。

      5 針對您要在App中使用的每一幅Web地圖重複進行Step2、Step3和Step4。

如果您要讓每一張地圖具有相同的檢視範圍，您並不需要在儲存地圖時調整每一張地圖的檢視範圍，因為這項功能是App程式的預設行為。

使用同步顯示時，App程式會在首次啟動後自動將App中第一張地圖(最頂部)的檢視範圍套用到其他地圖上，因此您僅需設定第一張地圖的檢視範圍。

如果您要讓每張地圖顯示不同區域，則您在儲存每一幅Web地圖時設定的檢視範圍，就是App程式會顯示的範圍。

以下我們會為您介紹如何在這兩個選項之間進行選擇。

        6 下載SideAccordionu樣板檔案，並解壓縮至您自己的電腦上。

        7 現在您可以為SideAccordionApp設定要您要使用的Web地圖。

在下載的樣板資料夾中，打開App資料夾內的Series資料夾，然後在您選用的文字編輯器中開啟Config.js文件。

文件頂端，您會看到帶有註解「TheWebmapID」的部分，你必須將前置步驟中製作的每一幅Web地圖ID加入此部分。

當您瀏覽Web地圖時，您可以從瀏覽器網址列的URL中複製到該Web地圖的ID。

在Config.js文件中，會將每一筆Web地圖ID轉成一項ID屬性。

您可以從下方螢幕截圖中看到，第二項和第三項ID屬性在預設情況下會被設定成註解。

您可以取消註解，並在這兩項屬性中輸入您要使用的Web地圖ID。

如果App使用的Web地圖超過三幅，您還可以自行新增地圖屬性項目。

每項Web地圖屬性都會放在大括號{}中，每項屬性之間以『逗號』分隔。

您可將每項Web地圖屬性中的「title」屬性設成空值。

如此一來，每幅Web地圖的名稱都會自動套用至Sideaccordion的控制項上。

      8 請繼續編輯Config.js文件，藉此設定App程式的其他屬性。

方法如下： 在「title」及「subtitle」部分輸入您想在App頂端顯示的標題及子標題。

子標題、簡介及摘要內容是吸引用戶瀏覽您製作之StoryMap的有效方法。

SyncMaps屬性可以讓您控制前述步驟所提及的縮放比例和地圖位置同步。

此項目預設是打開的狀態(意即預設情況下會設成true)。

如果想要讓每幅地圖顯示不同的檢視範圍，且不在地圖之間進行同步，則將此項目設為false。

請儲存Config.js文件。

      9 本步驟可以省略，但建議您遵循以下內容執行本項操作。

預設情況下，App會在右上角顯示Esri的商標。

當使用者點擊商標時，網頁會連結到Esri首頁。

您可以使用您的專屬商標，並設定商標被點擊時，網頁會導向您所指定的URL。

利用此項功能即可顯示作者資訊及使用權限，讓使用者清楚知道這是您的著作成果，也為用戶提供一條獲取更多資訊的管道。

如要使用您的專屬商標，請將商標圖片放到樣板資料夾內的resources\images\App中。

然後在您選用的文字編輯器中，打開樣板資料夾內的Index.html文件，查詢『divid="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的路徑會決定連線到您SideAccordion的網址。

恭喜您，您的SideAccordion現在已經開始運行! 您的樣板資料夾包含了完整的App程式原始碼，因此您可以為App增加額外的功能，並且修改App的外觀樣式與行為。

您可以在StoryMaps圖庫中仔細查閱其他作者的作品，並從中獲取客製化App的範例。

      |互動產品|教育訓練|技術支援|活動訊息|公司簡介|聯絡我們| Copyright © IDT |Legal LastUpdated:Thursday,July 23,2020 . PoweredbyOURPOWER