nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Shortlist prepared but How and Where to install?

FrankRomo

Hello I have been attempting to produce a shortlist map for quite a while not but have had minimal success. I have prepared the map layers on a web map using the shortlist template provided online. However, since I do not have any coding or experience with hosting my maps since I am a student without access to a larger server, I was wondering if someone could explain how to proceed with the installation process.

I have followed the tutorials and done much research but am still confused by the installation step.

How do I handle the contents in the zipped file after replacing the sample data with my own data?

Where do I install these contents?

I don't understand what the "inetpub\wwroot folder" is for or how I am supposed to have access to a server to perform the installation stage.

I am not sure if my questions even make sense but if someone could please help clarify the installation step and the process of packaging, renaming and uploading the folder contents onto a server that would be greatly appreciated. The tutorials really glaze over this step and make some assumptions about hosting webmaps. I think I just need a more detailed information about this step and how to proceed with the packaged contents. Please help, I really want to learn how to make this shortlist map.

Thank You.

Vind meer berichten getagd met

Accepted answers

RupertEssinger

Hi Frank

You need to install the contents of the Shortlist application template onto a publicly accessible web server or website. The location of the Shortlist's index.html file becomes the URL of your Shortlist.

In other words, installing a downloadable story map app, like the Shortlist, is similar to adding a new web page or new content into an existing website: it is really just a set of files you put onto the server on which that website is hosted so that they can be accessed over the web. Depending on what your situation is, you may have direct access to the server, or you may give the files to a system administrator or web master, or you may log in to the service that hosts your website. For example if your organization or business hosts its website on a popular hosting service like iPage, you or whoever has access to the iPage account, would log in to iPage, create a new folder for the Shortlist in the file structure of your website, and upload the Shortlist files into that folder. If you are working in a large enterprise you will often work with a system administator to add new files onto the web into a folder on the one of the enterprise's servers.

Alternately, if you don't have access to anything like what I described above, you could use a file-sharing service like Dropbox to deploy your story map.

If you like, you could paste a link to your web map here (the one you've prepared for your Shortlist). I can show you a way to run your Shortlist without installing the Shortlist application template on a web server or website. It involves sending your web map's ID to a generic installation of the Shortlist that we maintain, although this method won't let you do customizations like changing the logo, and is mainly intended for demos and testing).

All comments

RupertEssinger

FrankRomo

Thank you very much for the response! I do have a website that I upload my portfolio work to but do not have a place where my story map can be hosted. If I were to try to place it on my website would I have to re-zip the download template with my own csvs? IN what format must the files be packaged or assembled in order to place them on my website?

I am a little confused about the steps after I create and publish my webmap. I have used the downloaded shortlist template to create csv files that I then uploaded as separate layers on a webmap. What comes next? Do I package the remaining folders into one document with the new csv files and upload that to my website?

Thank you for the quick response. Please help!

Sincerely,

Frank

RupertEssinger

Hi Frank.

Where to put the Shortlist template?

You can totally put the Shortlist application from the zip file onto the website where you have your portfolio. The downloadable story map templates, like the Shortlist, are just a bunch of files pretty much like any other so stick them into a folder on that website and you'll be good.

Where to put the photos that the features in your Shortlist will reference?

Your features can reference images at any URL but the easiest thing is to put them into a folder on your website. It can be any folder and doesn't have to be the same folder that the Shortlist template is installed in.

Where to put the CSV files defining the features in your Shortlist tabs?

You upload these CSV files into the ArcGIS Online web map that your Shortlist will display. Create a new web map in ArcGIS Online, open it up, and then in the web map choose Add > Add Layer from File and browse to your CSV file(s). So your CSV files are uploaded into the web map. The web map and all the data it contains is stored for you automatically in the ArcGIS cloud.

The final step is to edit the line in the config section of the Index.html file in your Shortlist installation to point at the ID of your web map.

Rupert

JerryCarey

Rupert,
I to am having a difficult time trying to figure how to share my shortlist application with others. I have configured it on my machine, and can run it via directing my browser to http://localhost/*.html. It runs and looks good. Now I would like to share it within my organization via dropbox. We are planning on hosting it on our website, but I am not quite ready for that. I can't seem to get this to run in dropbox. Could you explain the procedures to go about this.

Thanks,
Jerry

RupertEssinger

Hi Jerry
Just make a folder on Dropbox and copy all the files that you downloaded onto your local host into that folder. In other words, all the files that are in the Shortlist application download that you put onto your localhost now, along with your edits to the Index.html file and any other files you might have tweaked, need to be put onto Dropbox, or any other website or web server in order to make them publicly available via the web. (The web map that you've created to use in your app, including the spatial data you uploaded into the web map to provide your Shortlist layers, is hosted in ArcGIS Online already). The images that your Shortlist layers point at via URLs can be put anywhere on the web: they don't need to be put on Dropbox with the Shortlist application files if they are already located somewhere else.

Actually, if you are planning on hosting the application on your website. why not just put it there now? You can do your testing, etc but other people won't be able to access it until you publicize or link to your app's URL.

Alternatively if you want to do some quick testing of your Shortlist you could edit the following URL to insert your web map's ID. The other parameters just mirror the settings in the config section of the Index.html file that you've edited, so you can edit them too. This URL accessed our generic hosted testing and review instance of the Shortlist so it won't reflect customizations you have done like switching out the Esri logo for your own, etc, but it a useful way to test your content:

http://storymaps.esri.com/templates/shortlist/?webmap=8504932f183c4b8699dc6ba28235e398&DETAILS_PANEL=true&GEOLOCATOR=true&POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS=Light%20rail%20stations&SUPPORTING_LAYERS_THAT_ARE_CLICKABLE=Light%20rail%20stations|Light%20rail|Neighborhoods|Parks

Or to just use all the Shortlist defaults and have it display your web map, use edit this shorter URL to put your web map ID in there instead of the ID of my Phoenix Shortlist web map which the URL is currently using:

http://storymaps.esri.com/templates/shortlist/?webmap=8504932f183c4b8699dc6ba28235e398

JerryCarey

Thanks. I did all that. The files have been copied into dropbox. So now what command do I enter in the browser to run the app in dropbox? ie; in order to run the app off my c: drive I enter http://localhost/*.html.

We are currently redoing our website, so our web-developers are busy with that, and don't want to be bothered with this at the moment. That's why I can't put it there yet. This is kind of a side project I'm doing to show the capabilities of Arc-Online. In this industry there seems to be a constant struggle to prove the power and diversity that GIS has; showing that is more than "making maps".

RupertEssinger

Now you've copied your files to Dropbox, to launch your Shortlist you'll need to enter the complete URL to the index.html file on Dropbox into your web browser in order to launch it. I couldn't find a Shortlist deployed on Dropbox just now when I had a quick look but this URL to an ArcGIS Online app that a colleague made for his local preschool 🙂 shows you what the URL looks like (click the URL below to view it in your web browser):

http://dl.dropboxusercontent.com/u/44841828/Turkeys2013/index.html

But have you tried just using the URLs I posted above? That's the simplest way to test a Shortlist before deploying it. Or if you want post the URL of your web map here and I'll post back a URL that launches it in our generic test/review instance.

JerryCarey

Still not working for me.

So here is the link for the html file in dropbox. (i renamed it sesp.html because i am working on a number of maps right now, and its easier to keep up with which file I'm editing) https://www.dropbox.com/s/5t6dw6dot3icpip/sesp.html

and here is the web map's ID f62b7a3ce8584d4b95e2a3b9491acd74

RupertEssinger

Here's your Shortlist in our generic hosted template with the default settings:

http://storymaps.esri.com/templates/shortlist/?webmap=f62b7a3ce8584d4b95e2a3b9491acd74

If you want your popups to have a Details panel, try this URL. I also threw in a parameter that turns the Locate Me button on:

http://storymaps.esri.com/templates/shortlist/?webmap=f62b7a3ce8584d4b95e2a3b9491acd74&DETAILS_PANEL=true&GEOLOCATOR=true

Your tabs have more than 99 places, which unfortunately isn't currently supported out of the box, so that is why you are seeing some broken point symbols on the map for some of the tabs. We've put a set of numbered marker symbols going beyond the number 99 for use in Story Maps and other apps in a zip file here: http://downloads.esri.com/blogs/places/Numbered_marker_symbol_sets.zip

(In your file set don't rename Index.html. That file name has to remain the same because it is the default HTML file that gets launched by URLs that just reference a folder location)

JerryCarey

Nice! Thanks for the advise about the index.html file. I had a feeling that could be problematic if I changed it, but it worked on my machine so I figured it was fine. But I will change them back.

I see why it wasn't working for me. When I replaced the webmap id with mine, it was clearing out the whole web address on my browser. Thanks for all your help.

So this is the default settings...how can I bring in all my html and css edits?

RupertEssinger

Using the generic hosted test/review instance that we maintain only lets you specify the same set of parameters that are in the Config section of your Index.html file. All this generic instance will accept as input is your (publicly shared) webmap ID and a set of parameters that mirrors what is in your Config section, all of which you throw at it via the URL. You can see all the supported parameters in this URL:

http://storymaps.esri.com/templates/shortlist/?webmap=8504932f183c4b8699dc6ba28235e398&DETAILS_PANEL=true&GEOLOCATOR=true&COLOR_ORDER=green,red,blue,purple&BOOKMARKS_ALIAS=ZOOM&POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS=Light%20rail%20stations&SUPPORTING_LAYERS_THAT_ARE_CLICKABLE=Light%20rail%20stations|Light%20rail|Neighborhoods|Parks

So it won't show you any other customizations, like switching out the logo, CSS file changes, or using the extended numbered marker symbol file set that I mention in my post above.

JerryCarey

Rupert,
Thank you for all your help (and patience, I'm sure) with this.
Aside from losing my edits, this is pretty much what I was looking for.
Jerry

Capture123.JPG

RupertEssinger

No problem. Hope it works out OK. You can put the files for your story map application onto any publicly available server to test it with all your customizations.

Quite a few story map (and other ArcGIS Online app) authors who want to deploy an app template they've downloaded but who haven't got easy access to a server, or who want to preview things before uploading them to their organization's official website managed by their IT department, use hosting services such as Amazon S3 as their hosting environment: http://aws.amazon.com/s3/pricing/ This is better than Dropbox in that it is designed for hosting apps whereas Dropdox, Box, etc are designed more for sharing individual files. It might be worth looking into that if you'll be doing a lot of tweaks and customizations to apps.

JerryCarey

Rupert,

I am currently creating the Side Accordion web app. I want to preview it in the in your generic hosted template with the default settings like I could with the shortlist, like this, http://storymaps.esri.com/templates/shortlist/?webmap=8504932f183c4b8699dc6ba28235e398 What would the URL for that be?

Also, when I run the side accordion application on my machine with the path, c:/localhost/(folder name)/index.html, I get a box that says, "Please sign in to access the item on ArcGIS Online (item)" I am signed in to Arcgis online. Is there a reason for this?

thanks,
Jerry

LishaYang

Hi. Frank. I have same problems. i have no website myself and have no experience in coding. if you figure out how to install template, would you mind sharing it with me? thank you. My email address is 529963953@qq.com

RupertEssinger

Hi Jerry and Lisha

The Side Accordion layout is actually now available as a hosted application template in ArcGIS Online, so unlike the Shortlist you don't need to download the app and host it yourself. See the Story Map Series application template: Story Map Series | Story Maps which has three layout options: Side Accordion, Tabbed and Bulleted. This new app has an interactive builder and is fully hosted in ArcGIS Online.

Rupert

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.