topic Re: Creating additional icons - e.g. for Playlist template in Classic Esri Story Maps Questions

Creating additional icons - e.g. for Playlist template

MarkBrickley — Fri, 15 Nov 2013 13:25:05 GMT

Are there directions somewhere for making numbered icons? Our "tree memorial" project is being done by college students for a local town. My earlier comment (on the Playlist template page) was that we probably need 500 points, but the Playlist template is limited to 99. I do appreciate the new revision having a search capability, but the real advantage of the Playlist is the ability of people to browse the list (left panel) of people with trees named after them and see a photo. Clicking that item brings you to the tree's location and a popup with more details of that person. The students are computer savvy, so they can build icons if there is a way to do that AND the code will allow us to change the upper limit to 500 or so. If making icons is possible, how do we do that? Is it necessary to use numbered icons? Can't we just use the same symbol (a point) for every tree on our map? Thanks in advance!

Re: Creating additional icons - e.g. for Playlist template

StephenSylvia — Wed, 20 Nov 2013 13:53:07 GMT

The main reason that the playlist has been limited to 99 points is because that is the maximum number of numbered icons that we have created for each color. In order to add new points, you will need to manually create new icons if you would each icon to contain a number.

I've attached the Photoshop files to make it a little easier. For each icon, you will need to open the appropriate Photoshop file, change the text layer with the new number (you will probably need to adjust the font size to make sure it fits within the pin), then "save as" the icon as a jpg.

You will need to save the new jpeg with the exact same file name (changing only the number portion) and in the correct color folder. Once you have added the new icons, you will need a JavaScript developer to modify the source code to allow for more than 99 points.

Re: Creating additional icons - e.g. for Playlist template

RupertEssinger — Wed, 20 Nov 2013 17:12:02 GMT

And here's an additional zip file of marker symbols that may be useful. Several authors have made additional marker symbols and kindly shared them with us.

http://links.esri.com/storymaps/numbered_marker_symbols

Re: Creating additional icons - e.g. for Playlist template

MarkBrickley — Sat, 23 Nov 2013 15:17:35 GMT

Thank you for the reply. We'll make the additional icons. We notice the directions say to save the files as jpegs, but then, in the reply that follows that one, additional icons made by others all seem to be PNG files. Before we set out to make hundreds of these, does the file type matter?

Thanks for all the help - we really do appreciate it.

Re: Creating additional icons - e.g. for Playlist template

StephenSylvia — Mon, 25 Nov 2013 11:49:05 GMT

Sorry, you are correct the file extension for every icon should be ".png" (all lower case).

Re: Creating additional icons - e.g. for Playlist template

EmilyLee — Tue, 05 Aug 2014 19:01:47 GMT

Hi Stephen,

Would you mind to pinpoint exactly where to modify the Playlist codes in order to allow for more than 99 points please? I've put all the extended numbered marker symbols that Rupert created in the same folder as the rest of 1-99 numbered icons by color. But still can't find where to modify the codes to include them.

Thank you very much in advance!

Emily

Re: Creating additional icons - e.g. for Playlist template

StephenSylvia — Tue, 05 Aug 2014 19:51:11 GMT

Emily,

The first thing you'll need to do is make sure you are using the developer download of the Playlist app. Instructions for setting up your computer for testing your app, building it for production, and source code are available here: Esri/playlist-storytelling-template-js · GitHub‌.

After you have added the additional photo icons to the correct folder, open up the MapConfig.js file (source > app > javascript > playlist > config > MapConfig.js). On line 19 you can increase the 'maxAllowablePoints' variable. Then make sure you build you app for production before deploying to your server.

Re: Creating additional icons - e.g. for Playlist template

CONABIONC_for_Knowledge_and_Us — Tue, 05 Aug 2014 22:25:00 GMT

A similar issue regarding the playlist template has been discussed here:

How to use simple markers to show six categories?‌

Re: Creating additional icons - e.g. for Playlist template

EmilyLee — Wed, 06 Aug 2014 00:18:00 GMT

Stehpen,

Thank you very much for your quick reply. I've downloaded the js developer version of the Playlist app, increased the 'maxAllowablePoints' variable from 99 to 700 on line 19 from the MapConfig.js file (source > app > javascript > playlist > config > MapConfig.js), and updated the webmap ID and other minor things from the index.html file (deploy > index.html). But I still cannot link them together and make the two files talk to each other? The webapp result still gives me up to 99 features. I'm sorry that I'm not a developer, and I've followed the instructions and downloaded all the needed files (Git, Ruby, Ruby Dev Kit, Node) many many times, but I'm still stuck and sort of confused from here on:

and it gave me this error message from the Git Shell commend prompt:

Thank you very much for your time here and any help is greatly appreciated!

Sincerely,

Emily

Re: Creating additional icons - e.g. for Playlist template

CONABIONC_for_Knowledge_and_Us — Wed, 06 Aug 2014 13:13:01 GMT

Looks like you are not in the github-shell? Depending on where you have installed github it should show somethihng like: C:\Users\...\GitHub>

You can start the Git-Shell directly from the start-menu or in Git via right-click on the repository where you saved the files of the dev-version.

Re: Creating additional icons - e.g. for Playlist template

StephenSylvia — Wed, 06 Aug 2014 14:39:07 GMT

Also, make sure you are running these commands from within the project directory that contains the playlist files. Here’s a trick to get there easily: http://lifehacker.com/5989434/quickly-open-a-command-prompt-from-the-windows-explorer-address-bar

Re: Creating additional icons - e.g. for Playlist template

EmilyLee — Wed, 06 Aug 2014 16:48:44 GMT

Thank you both Flo and Stephen for your replies.

I think I'm still confused on where to run what. Am I supposed to setup project folder (run 'bundle install', 'npm install -g grunt-cli', 'npm install') in the GitHub location or where I cloned the project?

I tried both environments...but none of them seem to work when I got to 'bundle exec middleman' :

Another dumb question please... am I supposed to modify the codes and do my edits after running 'npm install' but before running 'bundle exec middleman'?

Thank you tremendously again!

Emily

Re: Creating additional icons - e.g. for Playlist template

CONABIONC_for_Knowledge_and_Us — Wed, 06 Aug 2014 17:00:45 GMT

Hi Emily,

here´s what I did:

install the programes mentioned by Stephen
create a folder in C:\Users\...\GitHub, e.g. called "playlist"
download the files of the developer version and save them in "playlist"
open Git > click on create repository and browse to the "playlist" folder > ok
the new repository appears in Git > right-click it > open in git-shell
follow the instructions given by Stephen (> bundle install > npm install -g grunt-cli >npm install
test and build the app

Re: Creating additional icons - e.g. for Playlist template

StephenSylvia — Wed, 06 Aug 2014 17:02:53 GMT

Emily,

You will need to "set up you project folder" where you cloned the project (location in your first screenshot) but you will need to be using the Git Shell and not just the normal command line. If you type in "git" you should see a list of commands. This will indicate that you are using the correct command line tool.

From there, you will want to run the 4 commands that are in "setup project folder" section. This will install the dependent files and apps to test and build your app.

Then you can run 'bundle exec middleman' and open http://0.0.0.0:4567/‌ when that is running. The runs a local server on your computer that displays a test version of your app. When this is running, modify the source files and refresh your browser to see changes.

When you have all the changes in place, run 'bundle exec middleman build' to create a deployable version of your app.

Re: Creating additional icons - e.g. for Playlist template

EmilyLee — Wed, 06 Aug 2014 20:15:15 GMT

Thank you once again for your responses. You guys are probably tired of me. I apologize.

I've followed your steps and I think this time I'm using Git Shell, right? (Not just right-click > Open from the Git Shell icon).

Instead,

Then, I think I've gotten through setting project folder part, but when I tried to run 'bundle exec middleman', it says that I'm missing dependency 'wdm' and http://0.0.0.0:4567/‌ webpage is not available.

Thank you for your time again,

Emily

Re: Creating additional icons - e.g. for Playlist template

CONABIONC_for_Knowledge_and_Us — Wed, 06 Aug 2014 20:51:11 GMT

Hi Emily, I get the same error, but http://localhost:4567/‌ loads fine anyway, so this should not be a problem.

According your screenshots you are starting the Git-Shell correctly. Maybe you could repeat these steps with the original files (that´s what I did for testing right now): Download the playlist-dev-verion from Github, save it to a new directory, link it in Git as repository and follow the steps under "setup project folder".

best regards,

Re: Creating additional icons - e.g. for Playlist template

EmilyLee — Wed, 06 Aug 2014 22:04:39 GMT

Thank you. Yes, maybe I should repeat all the steps from the beginning at another computer.

Re: Creating additional icons - e.g. for Playlist template

RupertEssinger — Thu, 11 Sep 2014 21:43:32 GMT

(edited to remove old links)

http://links.esri.com/storymaps/numbered_marker_symbols

Re: Creating additional icons - e.g. for Playlist template

JulieK — Thu, 23 Feb 2017 20:46:05 GMT

Hello,

Both the links don't work for some reason. Is the zip folder still available for download ? It says the site is down .

Thanks,

Julie

Re: Creating additional icons - e.g. for Playlist template

JulieK — Thu, 23 Feb 2017 21:37:12 GMT

Hi Stephen,

I know it has been a long while but I am try to update the code to show more than 99 projects.

I have installed everything as per instructions but I keep getting error when I run bundle exec middleman

It says bundler: command not found: middleman

install missing gem executables with 'bundle install'

Any thought? I have installed and uninstalled multiple times but I get stuck with this error. Please help!