1 Welcome to the Shortlist story map application template Introduction for existing Shortlist authors... 2 Introduction for new Shortlist authors Create the ArcGIS web map for your Shortlist application Install the application Configure the application Appendix 1: What's in the Samples folder... 17
2 Introduction for existing Shortlist authors This updated release of the Shortlist application template introduces a responsive design with better support for viewing Shortlists on smartphones and tablets. When a Shortlist is displayed on a smartphone or small format tablet, or in a small web browser window on a desktop or laptop computer, or embedded inside a small frame on a web page, it will now automatically switch to its new responsive small screen layout. In addition, when a Shortlist is viewed on a mobile device or web browser window that is small but not small enough to make it switch to its small display layout, it will switch to its space saving 2 column tab mode, which makes Shortlists easier to use especially when viewed on the ipad or similar format tablet. On your desktop or laptop computer you can preview what your Shortlist will look like on a different sized phones or tablets by opening your Shortlist in your web browser and then resizing your web browser window to make it smaller. This release also introduces some changes to the default behavior of the application that you should be aware of if you are thinking of upgrading your existing Shortlist story map to this new release. 1) The tab controls now automatically expand to accommodate long names. Previously you had to tweak the code to make the tabs wider. 2) If your Shortlist has a large number of tabs, we now wrap them around nicely onto a second or third row of tabs if they don't all fit on screen in the current web browser width. 3) The Shortlist now has an optional geolocator button that users can use to see their current location on the map. This is off by default because not all Shortlists are made specifically to be used by people who are inside the area shown on the map. You can turn the geolocator button on via the new GEOLOCATOR variable in the Config section of the Index.html file by setting that variable to true. When the button is enabled, users can click or tap on it and the Shortlist will center its map on their current location, as reported by their browser, and display a blue locator symbol at that location. The blue symbol disappears after 10 seconds. 4) The popups for places in your Shortlist, both the places in the tabs and any clickable supporting features, now contain the place's image. Previously if a user clicked on a place on the map, the popup that appeared did not contain the picture, so the user had to click on Details to see the picture. 5) Your existing images continue to work fine. In the popups, images are drawn up to 245 pixels wide until they are scaled down to fit. So if you want your images to fill the available space in the popup, a size of 245 pixels wide by 184 pixels tall is the recommended size and shape. If your images are smaller than that, they still work OK: they are just drawn as-is in the popup. 6) The Details panel is now optional. By default it is not present and the Shortlist popup shows the picture and the SHORT_DESC field, the DESC1 field and the WEBSITE URL (if they are populated for the feature). This makes the
3 Shortlist easier to build and use with a smaller set of fields. A lot of Shortlist authors didn't have much information in their Details panel, and it could look odd to users. So in this new release authors can just turn it on if they want to fill it out. If you want to continue using the Details panel in your Shortlist (i.e. because you have populated the other descriptive fields DESC2-DESC5, ADDRESS, HOURS) then you should turn the Details panel on by setting the new DETAILS _PANEL variable in the config section of the Index.html file to "true". This setting applies to all the popups in your Shortlist, including those for clickable supporting layers, and cannot be set on a layer by layer basis. 7) By default, supporting CSV layers and shapefile layers in your Shortlist web map that are not used to define the tabs in your map, such as lines showing light rail systems or polygons showing neighborhoods or city boundaries, are not clickable by the user, so no popup will appear when the user clicks on the features they contain and no maptip will appear when users hover their cursor over the features. This makes it easier for authors to add supporting layers into their shortlist for display without having to define the fields for them that the Shortlist uses for its popup. A lot of Shortlist authors were adding CSV or shapefile supporting layers without populating the fields that the Shortlist expected for its popups, so when users clicked on these features, they sometimes got odd looking popups. So in this new release authors can choose to make these supporting layers clickable when they have populated the expected set of fields. If your Shortlist contains one or more supporting CSV and shapefile layers that you want to be clickable because you populated the set of fields that the Shortlist expects for popups, then specify the names of these layers in the new SUPPORTING_LAYERS_THAT_ARE_CLICKABLE variable in the config section of the Index.html file. Use the separator in that variable if you have more than one layer. 8) Previously all the point layers based on CSV or shapefiles in your web map were automatically used to define the tabs in the Shortlist. This was problematic because it prevented authors from adding CSV or shapefile based point layers into their maps that they did not want to be used to define tabs. This made it impossible to add points layers for hotels, transit stations, etc, that users could click on to get popups because the Shortlist would use those point layers to define tabs. The new POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS variable in the config section of the Index.html file lets you specify the names of CSV or shapefile based point layers in your map that you don't want to use to define a tab. These named point layers will be displayed on the map and, if they are also named in the new SUPPORTING_LAYERS_THAT_ARE_CLICKABLE variable, they will be clickable by the user.
4 Introduction for new Shortlist authors The Shortlist story map application template by Esri enables you to publish a web map as an easy-to-use, attractive map application that enables people to discover a small number of places of interest in an area. Users browse the places in a series of tabs next to the map, each showing a particular set of places based on a theme. Places are listed with images to make the browsing experience fun and attractive. If users see a place in a tab they are interested in, they can click (or tap) on it and a popup will show its location on the map. Users also click or tap on a place directly on the map to get the popup about it. As users navigate around the map, the list of places shown in the tab updates to show them places in the current map extent, so the experience is similar to travelling around in the real world and discovering new places. So if a user navigates to a particular location, the tabs just show places in that location. Check out this example: the San Diego Shortlist. Potential uses of this template include: displaying a selection of places that you recommend in an area, like a state or a city, a city agency can showcase the location of planning initiatives, a state tourism agency can highlight key activities and attractions, an environmental agency can display its projects and show off its successes and places where there are still issues. The hardest part of making a Shortlist is the editorial work of choosing the places you want to feature, getting photos and writing the text. But that's the fun part too! The technical part is pretty straightforward. You make an ArcGIS web map and then display that web map using the Shortlist application template. This application template can be deployed by anyone who has access to a website or web server on which they can install it. Before you continue reading this document: Be sure to have a look at the Shortlist section of the ArcGIS Story Maps website if you've not already been there. It includes examples and a tutorial that outlines the steps for making a Shortlist. Read that first as a quick start before continuing with this document. You may find you can get your Shortlist up and running just by reading that. Then come back here to this document if you need to.
5 1. Create the ArcGIS web map for your Shortlist application To author the web map that the Shortlist application displays you use ArcGIS Online, Esri's cloud-based mapping and GIS system. You can access ArcGIS Online at with either a free public account (for use by individuals, small non-profits, in education, etc.) or an ArcGIS organizational account (commercial and government use). There's no software to install. ArcGIS Desktop is not required to make a Shortlist because you can prepare your Shortlist data using spreadsheets and upload it as CSV files into the web map. If you do have ArcGIS Desktop you can optionally use it to create shapefiles, which can also be added to the web map, or to convert your existing GIS data for use in the Shortlist. How the tabs are defined in your Shortlist Each tab in your Shortlist is defined by a point layer in your ArcGIS web map. Each point layer in your web map will be automatically used to define one of the tabs in your Shortlist (but optionally you can configure the Shortlist to display one or more point layers that don't define tabs: this is described later in this document). Your Shortlist can contain one or more tabs. There's no limit to how many tabs you have. Some apps use more, such as the Geography of Horror app which uses 7 tabs, one for each decade's production of horror movies. However we typically recommend not more than 4 tabs. The drawing order of the point layers defines the tab order, so the top-most point layer in your map becomes the top-most tab. Each point layer used to define a tab in the Shortlist can contain up to 99 features. (More features can be are supported through customizing the source code). The point layers in your web map used to define the tabs must be based on CSV files (comma separated value files, a common text file format for sharing tabular data that can be created by exporting from a spreadsheet) or shapefiles. CSV files can be uploaded directly into an ArcGIS web map. Shapefiles can be zipped up into a.zip file and then uploaded into a web map. Note that point layers based on feature services or map services are not currently supported for defining the tabs in a Shortlist. Layers based on services can be added to your web map so they are displayed in your Shortlist, but they can't be used to define tabs and are not clickable in the Shortlist, so users can't get popups about the features they contain. The name of each point layer is used as the name for the corresponding tab. The tabs automatically adjust to accommodate the name. If your Shortlist only has one tab, we don't show the tab control at the top of the tab. In your web map you don't need to specify symbology for these point layers, because the Shortlist automatically applies its own built-in symbology (numbered symbols) to the data in the layers. So it doesn't matter what symbology you apply to these point layers in your web map. In your web map you don't need to configure the popups for these layers, because the Shortlist automatically applies its own built-in popup configuration to the data in the layers. So it doesn't matter whether you configure popups or not for these point layers.
6 Create the point layers containing the features in each tab The Shortlist looks for certain fields in the point layers that you add into your web map. These fields are used to populate the user interface. Some of these fields are required, and some are optional. (These fields are in addition to the standard ones used by the file the layer is based on, such Lat, Long or Address fields in the case of CSV files, and FID and Shape in the case of shapefiles). The fields that the Shortlist looks for depends on what style of popup you want to use in your Shortlist. There are two styles. (This style choice applies to all the layers in your Shortlist and can't be different for different layers). Popup Style 1: The default style is for your popup to contain these five fields: Three of these fields are optional (SHORT_DESC, DESC1 and WEBSITE). This means that the fields can be either be omitted completely from the layer or the fields can be present in the layer but not populated for one or more features. (The optional fields that are present can vary from layer to layer in your Shortlist). So for example by omitting the SHORT_DESC field from a layer you can get this popup:
7 Popup Style 2. You can optionally configure the Shortlist so the its popups will contain a 'Details' link that launches a separate Details panel where you can present a fuller description of the place, along with Address and Hours fields and a website link. Here's the popup: Clicking the 'Details' link or the picture will take your users to the Details panel shown below. This supports up to 5 description fields on the right, so it is useful if you have a lot of text you want to display. Each DESC field contains one paragraph of text and the right hand side of the panel can be scrolled if the text doesn't fit. The easiest way to assemble layers for use in the Shortlist with the expected attributes is to use one of the sample datasets that you'll find in the \Samples folder in the Shortlist download. This contains files you can use as templates for your layers: Excel files (for the easy creation of CSV files), shapefiles, and a geodatabase feature class (which you can edit in ArcMap and then export as a CSV file). See Appendix 1 in this document for a description of what's in that folder. You can alternatively build the source CSV or shapefiles yourself from scratch or generate them from existing GIS data. If you are use CSV files for your layers, all the descriptive text fields (SHORT_DESC, DESC1-DESC5, ADDRESS, HOURS) can contain text with an unlimited number of characters. If you are using shapefiles text field has a 254 character limit. HTML formatting is not supported but the appearance if the popups and the details panel can be changed by customizing the source code.
8 Here is a description of each of the fields that the Shortlist application looks for. The field names have to match the names in English shown below but this match is case in-sensitive. The fields can be in any order. Additional fields not listed below are allowed to be present in the data but are ignored by the application. Optional fields can either be omitted from the layer completely or be present but not populated for some or all features. So for example if a URL isn't specified for the WEBSITE field for one or more features in a layer, the Website link will automatically not be present when someone opens one of those features, REQUIRED FIELDS: NUMBER TITLE IMAGE_URL An integer field containing a unique number between 1 and 99 assigned to the features in the layer. This is the number each place is given that identifies it on the map. Places are listed in this numeric order in each tabs. Places don't have unique numbers across the layers (so in other words each point layer's features are numbered 1-99). This field must be present and must be populated for each feature. A text field containing the name of the place. This appears below the photo in the tile representing the feature in the tab, as a map tip when the user hovers their cursor over the place on the map, in the title bar of the popup, and in the title bar of the optional Details panel. The main constraint on name length is that it has to fit into the available space underneath the photo tile in the tab which is limited to a three line wrap around. Any text that doesn't fit into the available three lines is clipped. This field must be present and must be populated for each feature. A text field containing the full URL of a graphic representing the place. This graphic appears in the tabs to the left of the map, in the popup and in the Details panel. The image will usually be a photograph of the place but could also be a graphic such as a logo. (See the Food tab in the San Diego Shortlist for how using a mixture of photos and logos adds interest to a tab). Each photograph needs to be in either PNG or JPG format and for best results should be in landscape orientation at a 4:3 aspect ratio. Avoid using portrait orientation images. Shortlists look best when all the images are the same size and shape. The recommended image size and shape is 245 pixels wide x 184 pixels tall. At this size the picture fills the width of the popup. The minimum size for images is 200 pixels wide by 150 pixels tall, which is the same 4:3 aspect ratio but a bit smaller: Larger images and different shapes are supported but they are scaled down to fit. Using larger images can slow down the initial load speed of the Shortlist because all the images in the first tab are loaded when it is launched, so it pays to resize your images if they are much larger than the specifications above. The graphics can reside on any website or web server but we don't recommend referencing images directly that are on third party websites because it is hard to know when these images are no longer available. This field must be present and must be populated for each feature. POPUP STYLE 1: OPTIONAL FIELDS SHOWN IN THE POPUP (DEFAULT STYLE) SHORT_DESC DESC1 WEBSITE A text field containing a description of the place that users see when they open the popup for a place. This is best kept short, and is easiest to read if it isn't a complete sentences. A field containing one paragraph of descriptive text. Text field containing the full URL of a website or web page about the place. When the user follows this link, it gets launched in a new tab in their web browser.
9 POPUP STYLE 2: OPTIONAL FIELDS SHOWN IN THE POPUP OR DETAILS PANEL SHORT_DESC DESC1 - DESC5 ADDRESS HOURS WEBSITE A text field containing a description of the place that users see when they open the popup for a place. This is best kept short, and is easiest to read if it isn't a complete sentences. It is not shown in the Details panel (so people don't see the same text twice). These are five optional text fields containing one paragraph of description. They appear in the optional Details panel. You can populate some of these fields or all of them. Although these fields are all optional you will want to populate at least the DESC1 field if you are using the Details panel because the whole point of the Details panel is to give people more information and it will look bare without at least some text. A text field containing the address of the place. This doesn't have to be an actual street address: it can contain any text you like. Don't put too much text in this field: In the Details panel, the left hand column isn't scrollable so if the user is viewing the Shortlist in a small browser window, the bottom of the left hand column may be clipped. A text field containing the opening hours of the place. This can contain any text and doesn't have to be opening hours. Don't put too much text in this field: In the Details panel, the left hand column isn't scrollable so if the user is viewing the Shortlist in a small browser window, the bottom of the left hand column may be clipped. A text field containing the full URL of a website or web page about the place. When the user follows this link, it gets launched in a new tab in their web browser. Optionally, add 'clickable' supporting point, line or polygon layers In addition to the point layers that define the tabs in a Shortlist, your web map can optionally also contain additional supporting point, line or polygon layers. to show other features on your map that help people use and understand your Shortlist, such as study area outlines, light rail routes, etc. Although these layers don't define tabs, users can still click or tap on their features in the Shortlist map to get a popup containing information about them. Users can also hover their cursor over these features to get a map tip showing their title. For example the San Diego Shortlist uses these supporting layers to indicate some recommended neighborhoods and beach areas, and also to show users the ferry routes over San Diego Bay. The Phoenix Shortlist uses supporting layers to show neighborhoods, parks, the light rail line, and stations on the light rail route. Another use of a supporting point layer in a Shortlist might be to show a point feature like a convention center or hotel if your Shortlist is showing places to go near to the location of an event. These supporting layers are totally optional, so you can have no supporting layers, just one, or multiple. Each clickable supporting layer is a feature layer created either by uploading a CSV file (for point layers) or by uploading a shapefile (for point, line or polygon layers). The names of the supporting line or polygon layers aren't displayed in the Shortlist, so any name can be used for these layers in your web map. Feature services and map services are not currently supported as clickable supporting layers The fields expected for supporting layers are the same as the fields expected for the point layers that define the tabs, as described above, except that the Number field is not required for supporting features because these features are not numbered on the map. You can use the samples in the Samples folder as templates to create any supporting layers you want to display. In the next section of this document we show you how to configure the Shortlist to tell it which CSV or shapefile layers in your web map it handle as being clickable. If you decide to include a point supporting layer in your Shortlist, we show you we also show you how to tell the Shortlist that so it knows which of your point layers define tabs and which ones are supporting layers.
10 Unlike with the point layers that contain your places, the symbology you choose for your supporting layers in your web map is used as-is by the Shortlist. The Shortlist doesn't apply its own symbology to your supporting layers. So be sure to symbolize your supporting layers the way you want them to appear in the map. But just like the point layers that contain your places, you don't need to configure the popups for the supporting layers, because the Shortlist automatically applies its own built-in popup configuration to the data in the layers. Optionally, add any additional non-clickable background layers you want your map to have In addition to the clickable supporting layers described above, your web map can optionally also contain additional layers to enhance your map display that the user can't click on. Any layers in your web map that don't define tabs or aren't specified as clickable layers will be displayed in the Shortlist. So this includes any layer types, including CSV files, shapefiles, map notes, and services. The symbology for these additional layers you add into your map is used as-is in the Shortlist. Popups are not supported on these additional layers. So you don't need to configure popups for these additional layers. The names of these additional background layers are not displayed in the map. Choose the initial extent of your map The initial extent of a web map is simply the spatial extent it shows when it is opened. This extent is whatever extent was being displayed the last time that the map's author saved the map. When a user opens a Shortlist app, the first extent they see is the initial extent of the web map. After they've navigated around the map, they can also return to this initial extent by using the Home button (the house icon) on the map. This provides a nice way for people to get back to base after they've been somewhere else. Your initial extent is an important information design choice for your Shortlist application. As the tabs only show places that are inside the extent that the user is currently viewing in the app, if your initial extent doesn't cover the entire area of your map that contains your places, people will only see a subset of the places in your map when they first launch the app and they may not realize that there are other places in the map. So we recommend that your initial extent cover all of your shortlist points. The user can then browse through the tabs to see all the places, and they can also zoom in on the map if they want to focus just on what is in one area. Optionally, add some bookmarks to your map Your web map can optionally contain some bookmarks. When your web map contains some bookmarks, they automatically appear in a dropdown menu in the top right hand corner of the Shortlist. By default, this menu is called 'Zoom' but you can change this name easily (see later in this document for how). For example, for a Shortlist showing places in a city where you've defined bookmarks for key neighborhoods you might want to change the Zoom menu to be called Neighborhoods. If you choose not to have any bookmarks, the menu is automatically hidden in the Shortlist. Your bookmarks should have fairly short names. Bookmarks are listed in the order in which they appear in your web map. Bookmarks are an important way for you to guide your users around the areas on the map you want them to look at. For the San Diego and Palm Springs Shortlists, we treated the bookmarks as part of the set of recommendations we want to give users. So instead of trying to list every neighborhood in town, we chose the ones that we wanted to recommend people visit. As described above, we also included a bookmark called Overview that covers the entire city. We avoided bookmarks for areas that would give the user no places, so that the user always gets something in their tabs if they visit each of the places in the bookmarks dropdown.
11 Specify the title and summary for your web map The Shortlist automatically uses the title of your web map as the title of the Shortlist application and uses the summary text of your web map as the subtitle in the application. To edit the title and summary of your map in ArcGIS Online go to the entry for your web map in ArcGIS Online. The other information on the Details page is not used by the Shortlist. Take care to make the subtitle for your Shortlist interesting and compelling. Don't just repeat the title of the Shortlist. For example if your Shortlist is about places to go in a newly revitalized neighborhood of a city, make the subtitle something that draws the user in, such as 'There's lots to do and discover in our downtown so we've selected some of the best for this map'. Finally save your map and share it You need to share your web map publicly, via your web map's Details page. This is the usual configuration because you want everyone in the world to see your Shortlist. You are done with the web map part of the process! That's the hard part done. Now you just need to install the Shortlist on your website or web server and configure it so that it uses your web map.
12 2. Install the application Now you've created your web map and shared it publicly, you are ready to deploy the application. You will normally do this by putting the files for the Shortlist application (i.e. the files that were in the shortlist template.zip file you downloaded, minus the \Samples folder which isn't needed) onto your website or web server. The Shortlist download is accessible here if you haven t already downloaded it: We don't mean installing the application onto ArcGIS Server. ArcGIS Server is a product that allows organizations to create and serve web services that use GIS data. ArcGIS Server is not needed in order to use the Shortlist. By 'web server' we mean the standard web server that you use for your website. This might be a web server that you or your organization maintains. Or it may simply be a folder on a shared or hosted web server that you use for your website. In an enterprise situation you might have a system administrator load the files onto a server. Or if you are an individual or small organization you may simply log in to a system like ipage where your website is hosted and copy the files onto your website, in the same way that you or they would put HTML, PNG, and other files if you were adding a new web page. When you copy the contents of the Shortlist application template zip file into a folder on your website or web server, the location of the application template's Index.html file defines the URL that will be used to access your shortlist. For example if your website is using a web server like Internet Information Services(IIS) you can create a folder in its root file structure (C:\inetpub\wwwroot) and copy the contents of the application template zip file into it. So if you created a folder called: C:\inetpub\wwwroot\shortlist and your website's domain is then the URL of your shortlist will be: That's it! Tip: We don't recommend installing this application template in a file sharing system like Dropbox. We have noticed that story map apps installed on a Dropbox account sometimes don't load when opened in certain browsers because of how they handle Dropbox security.
13 3. Configure the application To configure the application, the only one of the Shortlist source code files you have to edit is index.html. Open this file in the text editor of your choice. A) Update the Config section of the Index.html file In the Config section of the index.html file you'll see the following variables /****************************************************** ******************** config section ****************** *******************************************************/ var WEBMAP_ID = "1966ef409a344d089b001df f"; var BOOKMARKS_ALIAS = "Zoom"; var COLOR_ORDER = "green,red,blue,purple"; // will only use as many colors as you have categories var DETAILS_PANEL = "false"; // specifies whether or not popups have a link to a separate Details panel // // Specify shapefile or CSV point layer(s) on your map that do NOT define a tab in the shortlist. // if there's more than one layer, use the " " character as delimiter var POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS = ""; // // specify shapefile or CSV layer(s) in your map that will be clickable in the // shortlist if there's more than one layer, use the " " character as delimiter var SUPPORTING_LAYERS_THAT_ARE_CLICKABLE = ""; // // Location button that locates user (on supported browsers) var GEOLOCATOR = false; - Edit the WEBMAP_ID variable to be the ID of your ArcGIS Online web map. This tells the Shortlist app which web map to use. For example, our Palm Springs Shortlist web map has this URL: and the ID of this map is the last part 88b187a860934d8491bdff591d0b1e1a. WEBMAP_ID is the only variable you have to modify in order to configure your Shortlist. The other variables are optional. - Optionally, edit the BOOKMARKS_ALIAS variable if you want to specify a different name for the bookmarks menu in the top right corner of your Shortlist app. By default, this name is "Zoom". - Optionally, update the COLOR_ORDER variable to specify a different color ordering for the four colors that the Shortlist supports for the places in each of your tabs. The default order is green, red, blue, purple, so green is used for the points in the first tab, red for the points in the second tab, etc. If your shortlist has less than four tabs, you don't need to specify all the colors. If your shortlist has more than four tabs, you can either specify which colors you want to use for each tab, or let them default, in which case, the colors for specified for the first four tabs will be repeated. - Optionally, change the DETAILS_PANEL variable to be "true" if you want your popups to contain a link to the Details panel (popup style choice 2 described in the previous section of this document). If you leave this set to "false" your Shortlist won't use the Details panel (i.e. popup style choice 1). - If your web map contains any CSV point layers or shapefile point layers that you want the Shortlist to draw on your map as clickable or non-clickable supporting layers instead of using them to define tabs, put their layer names into the POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS variable. Any CSV or shapefile point layers in your web map that are not listed in this variable will be used to define tabs. Use the character as the separator if you have two or more layers. For example here is how you would specify this variable if there at there are two
14 point layers in your web map that you want to be treated as supporting layers instead of defining tabs. The layer names are case insensitive: var POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS "Light rail stations Bus stops"; - Optionally use the SUPPORTING_LAYERS_THAT_ARE_CLICKABLE variable to list the names of any CSV or shapefile point, line or polygon layers in your map that will be clickable by the user because you have given them the fields that the Shortlist uses for popups. Don't list the point layers that define your Shortlist tabs in this variable. The only point layers that you'll list in this variable are CSV or shapefile point layers that do not define tabs that you still want users to be able to click to get a popup. Use the character as the separator if you have two or more layers. - Optionally set the GEOLOCATOR variable to true if you want your Shortlist to display a geolocator button that users can click or tap to show their current location on your map. This is off by default because not all Shortlists are made specifically to be used by people who are inside the area shown on the map. When the button is enabled in your Shortlist, users can click or tap on it and the Shortlist will center its map on their current location, as reported by their browser, and display a blue symbol at that location. The blue symbol disappears after 10 seconds. Note that when the user clicks or taps this button they will usually be prompted by their browser to confirm that they want to share their location with the Shortlist so it can be displayed on the map. B) Optionally, update the Header section of the Index.html file In the header section of the index.html file you'll see the following lines defining the links in the top right hand corner of your Shortlist app: <div id="social"><a id="mslink" href=" target="_blank">a story map </a><span class='st_facebook' ></span><span class='st_twitter' ></span> </div> If you want to have a different link and target where we currently have 'A story map', modify that line You'll also see the following lines that specify the graphic logo that you see in the top right hand corner of your Shortlist app: <div id="logo"><a id="logolink" href=" target="_blank"><img id="logoimg" src="images/logo.png" alt="esri - Home"></a> </div>
16 Be sure to include 'story map' and 'shortlist' in the Tags you add so that your entry can be found easily when people search for examples using those keywords. If you have performed a lot of interesting customization in your shortlist, add the tags 'custom' and 'customization' too which will help other story map authors find your work. You should also include tags such as the name of the city, state or province, and country the shortlist covers, plus additional Tags to reflect the theme or content of the shortlist. This all helps people find your work if they search ArcGIS Online and makes it show up in the Shortlist search we showed you in the Introduction part of this document. After you've added the entry, you can edit it directly in ArcGIS Online to give it a nice looking thumbnail image, like a little screenshot of the app or one of the pictures from it, and specify credits, etc. Finally, be sure to share your web mapping application entry publicly.
17 Appendix 1: What's in the Samples folder The \Samples folder in the Shortlist download contains files you can use as template for creating the point layers that define the tabs in the Shortlist, and optionally, clickable point, line or polygon supporting layers that are also displayed in your map. Irrespective of whether you use CSV files assembled manually created in Excel, CSV files created by exporting a feature class from ArcMap or shapefiles, your layer needs to contain certain attributes that the Shortlist expects, such as an image, title, short description, etc. The easiest way to assemble your layers so that they contain the correct attributes is to use the appropriate sample file in the \Samples folder. These files already use the shortlist attributes, so you can simply fill in your own information in place of what is there. The Samples are divided into two folders, depending on what style of popup you want to use. \samples\popup_only (Use this folder if you'll be using the default style popup, which doesn't have a separate Details panel) \samples\popup_and_details_panel (Use this folder if you'll be using the popup style that has a separate details panel showing more information, accessed via a link on the popup. The files in this folder have the additional attributes that are used in the Details panel) Each folder contains the same set of sample files as follows: The following folders contain ready-made CSV and Excel files in each of the common geocoding styles. If you want to use Excel to assemble the point data, use the XLSX file and then export it to a CSV file using the Save As command in Excel: \csv_file lat_long Points.csv Points.xlsx \csv_file address one_field Points.csv Points.xlsx (These files store the street address with which the points are geolocated when the file is uploaded into a web map in one field: the Address field) \csv_file address four_fields Points.csv Points.xlsx (These files store the street addresses with which the points are geolocated when the file is uploaded into a web map in four fields. In the Popup_Only folder the fields are Address, city, state and zip. In the Popup_and_Details_Panel folder the fields are Address2, city, state and zip because the Address field is used to store the full address of the place that can appear in the Details panel. The following folder contains a point shapefile layer for defining the places in one tab, or for an optional clickable supporting point layer. There are also shapefiles for defining optional clickable supporting line and polygon layers. There's an 10.1 MXD file that references these shapefiles to make it easy to edit them. \shapefiles Points Lines Polygons Shapefiles for Shortlist.mxd The following folder contains a geodatabase point feature class for defining the places in one tab, or for an optional clickable supporting point layer. It is provided both in a geodatabase and as a layer package. You can use this feature class to edit a shortlist point layer in ArcMap and then export it to a CSV file from ArcMap. If you have ArcMap this is a good way to create your Shortlist point layers because it doesn't impose the 254 character limit on your text fields that using a shapefile does. Before you export the layer to a CSV file, be sure to recalculate the LONG and LAT fields in the layer, so the locations of your map tour points are captured in the layer's attribute table before you export it. There's a 10.1 MXD file that references the feature class to make it easy to edit it. \feature_class Geodatabase (containing Points feature class) Feature class for Shortlist.mxd Points.lpk
Table of Contents ArcGIS online Introduction... 2 Module 1: How to create a basic map on ArcGIS online... 3 Creating a public account with ArcGIS online... 3 Opening a Map, Adding a Basemap and then Saving
Storytelling with Esri Story Maps Exercise 1: Exploring Story Maps Estimated time: 10 minutes Exercise 2: Creating a Web Map and a Story Map Web Application Estimated time: 20 minutes Exercise 3: Creating
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with
A Workflow for Creating and Sharing Maps By Keith Mann, Esri What You Will Need Item Source ArcGIS Online for Organizations subscription ArcGIS 10.1 for Desktop (Any license level) ArcGIS Spatial Analyst
Storytelling with Maps: Workflows and Best Practices Introduction What is a story map? Story maps are interactive maps combined with text and other content to tell a story about the world. Typically story
Copyright 1995-2010 Esri All rights reserved. Table of Contents Tutorial: Creating a Web editing application........................ 3 Copyright 1995-2010 Esri. All rights reserved. 2 Tutorial: Creating
INTRODUCTION to ESRI ARCGIS For Visualization, CPSC 178 1) Navigate to the C:/temp folder 2) Make a directory using your initials. 3) Use your web browser to navigate to www.library.yale.edu/mapcoll/ and
Quick Start Guide to ArcGISSM Online for Insurance Historic tracks from tropical storms and hurricanes are overlaid on a map displaying population growth. Quick Start Guide to ArcGIS Online ArcGIS SM Online
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
Adobe CQ5 Authoring Basics Print Manual SFU s Content Management System SFU IT Services CMS Team ABSTRACT A summary of CQ5 Authoring Basics including: Setup and Login, CQ Interface Tour, Versioning, Uploading
Community Health Maps Lab Series: Lab 6 Data Visualization With CartoDB Objective: Understand How To Use CartoDB To Create an Online Visualization of Your Data Document Version: 2015-09-15 (V2) This course
Promoting Your Location Platform A Change Management Kit www.esri.com/changekit Publication Date: November 23, 2015 Esri: Promoting Your Location Platform 1 What is the Change Management Kit? The launch
Use ArcGIS Online to Manage Your Own Custom Map Gallery By Keith Mann, Esri Start customizing the template by changing the graphics and the web page title. Wouldn t it be great if you could create a dynamic
Getting Started With Mortgage MarketSmart We are excited that you are using Mortgage MarketSmart and hope that you will enjoy being one of its first users. This Getting Started guide is a work in progress,
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK
Site Maintenance Table of Contents Adobe Contribute How to Install... 1 Publisher and Editor Roles... 1 Editing a Page in Contribute... 2 Designing a Page... 4 Publishing a Draft... 7 Common Problems...
Create your own teacher or class website using Google Sites To create a site in Google Sites, you must first login to your school Google Apps account. 1. In the top-right corner of any apps, you can click
Creating mobile layout designs in Adobe Muse Using Adobe Muse, you can create site layouts for web content to be displayed on desktop, smartphones, and tablets. Using the mobile design features, you can
Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly
Web Ambassador Training on the CMS Learning Objectives Upon completion of this training, participants will be able to: Describe what is a CMS and how to login Upload files and images Organize content Create
Piktochart 101 Create your first infographic in 15 minutes TABLE OF CONTENTS 01 Getting Started 5 Steps to Creating Your First Infographic in 15 Minutes 1.1 Pick a Template 1.2 Click Create and Start Adding
WebPlus X7 Quick Start Guide Simple steps for designing your site and getting it online. In this guide, we will refer to specific tools, toolbars, tabs, or options. Use this visual reference to help locate
How to Download Census Data from American Factfinder and Display it in ArcMap Factfinder provides census and ACS (American Community Survey) data that can be downloaded in a tabular format and joined with
How to Create a Form and Manage the Spreadsheet in Google Docs Table of Contents Create, send, share, and edit a form... 2 Create and send a Google form... 2 Add items and questions to a form... 2 Split
Using the Adventist Framework with your netadventist Site Introduction: The Adventist framework is available for everyone with a netadventist web site. Sites using this framework will visually identify
JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop
Publishing KML Services Tutorial Copyright 1995-2010 Esri All rights reserved. Table of Contents Tutorial: Publishing a KML service............................ 3 Copyright 1995-2010 ESRI, Inc. All rights
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
User Guide http://www.diy-email-manager.com Contents Introduction... 3 Help Guides and Tutorials... 4 Sending your first email campaign... 4 Adding a Subscription Form to Your Web Site... 14 Collecting
Finding Data There are various ways to find data using the Hennepin County GIS Open Data site: Type in a subject or keyword in the search bar at the top of the page and press the Enter key or click the
1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and
WebPlus X8 Quick Start Guide Simple steps for designing your site and getting it online. In this guide, we will refer to specific tools, toolbars, tabs, or options. Use this visual reference to help locate
USER GUIDE Unit 2: Synergy Chapter 2: Using Schoolwires Synergy Schoolwires Synergy & Assist Version 2.0 TABLE OF CONTENTS Introductions... 1 Audience... 1 Objectives... 1 Before You Begin... 1 Getting
Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit
User s manual 1. Introduction 3 2. Installation & Requirements 3 3. Your Tom s Planner account & login 4 4. Open & Save 4 5. Grid 6 Rows and groups 6 Columns 7 Time blocks 10 Icons 10 Comments 11 Dependencies
Weebly.com First Steps Weebly is the easiest way to build your own website. The first thing you need to do is go to www.weebly.com to create an account. Then you will begin with the next steps. The Site
Build an ArcGIS Online Application Sign into ArcGIS Online for Maryland 1. Open a web browser 2. Go to URL http://maryland.maps.arcgis.com/ 3. Click Sign In in the upper right corner of the web page 4.
WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 CONTENTS Things to Remember... 2 Browser Requirements... 2 Why Some Areas of Your Website May Not Be CMS Enabled...
Activity: Using ArcGIS Explorer Requirements You must have ArcGIS Explorer for this activity. Preparation: Download ArcGIS Explorer. The link below will bring you to the ESRI ArcGIS Explorer download page.
2013 SPHOL326: Designing a SharePoint 2013 Site Hands-On Lab Lab Manual This document is provided as-is. Information and views expressed in this document, including URL and other Internet Web site references,
NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants
Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing
Quick Start Guide to ArcGISSM Online for Public Accounts Using ArcGIS Online with a Public Account ArcGIS SM Online is a cloud-based mapping platform that allows you to easily and quickly make maps, collaborate,
Page 1 of 14 Access 2010 Home > Access 2010 Help and How-to > Getting started Search help More on Office.com: images templates Access 2010: database tasks Here are some basic database tasks that you can
DREAMWEAVER BASICS A guide to updating Faculty websites Created by the Advancement & Marketing Unit Table of content Tip: Click on the links below to go straight to the desired section The W (Web Services)
Citibank Custom Reporting System User Guide April 2012 Version 8.1.1 Transaction Services Citibank Custom Reporting System User Guide Table of Contents Table of Contents User Guide Overview...2 Subscribe
Quick and Easy Web Maps with Google Fusion Tables SCO Technical Paper Version History Version Date Notes Author/Contact 1.0 July, 2011 Initial document created. Howard Veregin 1.1 Dec., 2011 Updated to
Google Sites: Site Creation and Home Page Design This is the second tutorial in the Google Sites series. You should already have your site set up. You should know its URL and your Google Sites Login and
Book Builder Training Materials Using Book Builder September 2014 Prepared by WDI, Inc. Table of Contents Introduction --------------------------------------------------------------------------------------------------------------------
Welcome to Bridgit @ CSU The Software Used To Data Conference. Overview SMART Bridgit software is a client/server application that lets you share programs and information with anyone, anywhere in the world.
ArcGIS Online Training for Program Work Teams - Part 2: Creating Basic Story Maps - Steve Smith, Cornell University Neil Curri, Cornell Cooperative Ext. Dutchess County Sean Carroll, Cornell Cooperative
Using the Jive for ios App TOC 2 Contents App Overview...3 System Requirements... 4 Release Notes...5 Which Version Am I Using?... 6 Connecting to Your Community... 11 Getting Started...12 Using Your Inbox...13
Publishing geospatial data to the web using the EEA infrastructure *Note: Map Services should be published using the EEA Map Services Tick Sheet for guidance. Contact Sebastien Petit (Sebastien.Petit@eea.europa.eu)
How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this
Create a survey using Google Forms You can plan events, make a survey or poll, give students a quiz, or collect other information in an easy, streamlined way with Google Forms. Google Forms can be connected
SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME This document is organized as follows: Chater I. Install ma_sahara_digital8 template Chapter II. Features and elements of the template Chapter III. List of extensions
Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries
Grapevine Mail User Guide Table of Contents Accessing Grapevine Mail...2 How to access the Mail portal... 2 How to login... 2 Grapevine Mail user guide... 5 Copying your contacts to the new Grapevine Mail
Web Made Easy Planning Session All good websites come from a good plan. Sounds redundant, but it's true. If you want to create a good and solid website, you need a good and solid plan. On a piece of notebook
Visualization with Excel Tools and Microsoft Azure Introduction Power Query and Power Map are add-ins that are available as free downloads from Microsoft to enhance the data access and data visualization
Microsoft Word 2013 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,
SmallBiz Dynamic Theme User Guide Table of Contents Introduction... 3 Create Your Website in Just 5 Minutes... 3 Before Your Installation Begins... 4 Installing the Small Biz Theme... 4 Customizing the
How to Import Data into Microsoft Access This tutorial demonstrates how to import an Excel file into an Access database. You can also follow these same steps to import other data tables into Access, such
Sage CRM 7.2 Mobile Guide Copyright 2013 Sage Technologies Limited, publisher of this work. All rights reserved. No part of this documentation may be copied, photocopied, reproduced, translated, microfilmed,
The Power Loader GUI (212) 405.1010 firstname.lastname@example.org Follow: @1010data www.1010data.com The Power Loader GUI Contents 2 Contents Pre-Load To-Do List... 3 Login to Power Loader... 4 Upload Data Files to
Creating Online Surveys with Qualtrics Survey Tool Copyright 2015, Faculty and Staff Training, West Chester University. A member of the Pennsylvania State System of Higher Education. No portion of this
SelectSurvey.NET Basic Training Class 1 3 Hour Course Updated for v.4.143.001 6/2015 Page 1 of 57 SelectSurvey.NET Basic Training In this video course, students will learn all of the basic functionality
Kompozer User Guide KompoZer is web authoring software that combines web file management and easy-to-use WYSIWYG web page editing. It is designed to be easy to use, making it ideal for non-technical computer
HELCOM Data and Map Service User Manual Version 2.2 - February 2015 1 Table of contents 1. General Information... 3 1.1 Background... 3 1.2 Technical requirements... 3 1.3 Contact... 3 2. Accessing HELCOM
Installing IIS on Windows XP 1. Start 2. Go to Control Panel 3. Go to Add or RemovePrograms 4. Go to Add/Remove Windows Components 5. At the Windows Component panel, select the Internet Information Services
User Guide Chapter 15 Forms Engine 1 P a g e Table of Contents Introduction... 3 Form Building Basics... 4 1) About Form Templates... 4 2) About Form Instances... 4 Key Information... 4 Accessing the Form
CentralMass DataCommon User Training Guide Welcome to the DataCommon! Whether you are a data novice or an expert researcher, the CentralMass DataCommon can help you get the information you need to learn
Quick Start Guide Installation and Setup Introduction Velaro s live help and survey management system provides an exciting new way to engage your customers and website visitors. While adding any new technology
Joomla! template Blendvision v 1.0 Customization Manual Blendvision template requires Helix II system plugin installed and enabled Download from: http://www.joomshaper.com/joomla-templates/helix-ii Don
CourseBuilder Extension ADOBE elearning SUITE 6 Legal notices Legal notices For legal notices, see http://help.adobe.com/en_us/legalnotices/index.html. iii Contents Chapter 1: Getting Started Overview..............................................................................................................
OrgPlus Guide 1) Logging In 2) Icon Key 3) Views a. Org Chart b. Salary Org Chart c. Head Count/Span of Control 4) Viewing Profile/Explore/Bookmarks Panels a. Creating Bookmarks 5) Searching a. From the