topic Re: How to use simple markers to show six categories? in Classic Esri Story Maps Questions

How to use simple markers to show six categories?

JulieK — Tue, 10 Jun 2014 19:46:13 GMT

how can I get the template of this playlist storymap( http://storymaps.esri.com/stories/2013/storylocator/ ) , this does exactly what I want?

The downloaded template allows only four colored Markers and I want to use simple marker and show six categories or filters. How do I go about this? Please help!!

Can I get a template of the above storymap?
thanks,
Julie

Re: How to use simple markers to show six categories?

StephenSylvia — Wed, 11 Jun 2014 12:18:03 GMT

In order to change the symbology of the map, you will need to go into the code and create a custom renderer. This requires the developer version of the source code and will require you to install a couple apps to build the code for production use.

Once you have done that, you can open the MapConfig.js (source > app > javascript > playlist > config >MapConfig.js), set the use default renderer variable to false, and fill in a new renderer function in the else statement of the getRenderer function.

Here's the story locator MapConfig.js file to help you out: https://github.com/ssylvia/playlist-storytelling-template-js/blob/world-of-story-maps/source/app/javascript/playlist/config/MapConfig.js

Once you have it working, you can build your app and publish it on a server.

Re: How to use simple markers to show six categories?

JulieK — Wed, 11 Jun 2014 13:08:28 GMT

In order to change the symbology of the map, you will need to go into the code and create a custom renderer. This requires the developer version of the source code and will require you to install a couple apps to build the code for production use.

Once you have done that, you can open the MapConfig.js (source > app > javascript > playlist > config >MapConfig.js), set the use default renderer variable to false, and fill in a new renderer function in the else statement of the getRenderer function.

Here's the story locator MapConfig.js file to help you out: https://github.com/ssylvia/playlist-storytelling-template-js/blob/world-of-story-maps/source/app/javascript/playlist/config/MapConfig.js

Once you have it working, you can build your app and publish it on a server.

Hi,
thanks for replying!!
I downloaded the developer version and can see MapConfig.js in the path you mentioned. It doesn't let me open in notepad++ or any editor.

The couple of apps to be downloaded is required for building after I edit the mapconfig right? or do I need these to edit the config file as well.

Please help, I am a little lost here:(
thanks!!

Re: How to use simple markers to show six categories?

JulieK — Wed, 11 Jun 2014 18:04:04 GMT

Hi,
thanks for replying!!
I downloaded the developer version and can see MapConfig.js in the path you mentioned. It doesn't let me open in notepad++ or any editor.

The couple of apps to be downloaded is required for building after I edit the mapconfig right? or do I need these to edit the config file as well.

Please help, I am a little lost here:(
thanks!!

I went ahead and installed all the software you mentioned(phew!)
I made the changes in the mapconfig file and now I am trying to build it. I get the following the "unable to read ".jshintrc" file(error code: ENOENT) .

how do I fix it? please help!!
thanks 🙂

Re: How to use simple markers to show six categories?

JulieK — Wed, 11 Jun 2014 19:50:16 GMT

I went ahead and installed all the software you mentioned(phew!)
I made the changes in the mapconfig file and now I am trying to build it. I get the following the "unable to read ".jshintrc" file(error code: ENOENT) .

how do I fix it? please help!!
thanks 🙂

downloaded the zip file again and that seemed to have worked!! thanks:)

Re: How to use simple markers to show six categories?

CONABIONC_for_Knowledge_and_Us — Mon, 28 Jul 2014 17:47:25 GMT

Hi Julie,

I also try to use simple marker symbols for > 4 categories and downloaded the dev-version. However, I´m not sure what apps I have to install additionally? Especially I don´t find where to define the webmap-id within the source code. Any hints?

thanks & best regards

Re: How to use simple markers to show six categories?

JulieK — Mon, 28 Jul 2014 17:52:18 GMT

Hi,

Here is the link I followed to install additional apps to setup the developer download on my machine. I could edit it and rebuild it . The link below gives good workflow. I followed it just like that and it worked for me.

Esri/playlist-storytelling-template-js · GitHub‌

Re: How to use simple markers to show six categories?

CONABIONC_for_Knowledge_and_Us — Mon, 28 Jul 2014 18:25:12 GMT

Thank you! Well - I followed the steps but when I try to setup the project folder in the git-shell, it says "could locate Gemfile". However, I succesfully installed the gem bundler in C:\rubydev before. Any idea where I´m doing wrong?

Re: How to use simple markers to show six categories?

CONABIONC_for_Knowledge_and_Us — Mon, 28 Jul 2014 18:40:28 GMT

Ok - the problem was that I didn´t select the directory where I downloaded the the app´s dev-version. (phew)

Re: How to use simple markers to show six categories?

CONABIONC_for_Knowledge_and_Us — Wed, 30 Jul 2014 15:57:24 GMT

Hi Julie, did you finally manage to change the code? I´m not sure where do adapt the MapConfig.js? Would it also be possible to modify the default renderer?

thank you & best regards

Re: How to use simple markers to show six categories?

JulieK — Wed, 30 Jul 2014 16:12:48 GMT

yes, I did modify so I could have 7 categories. Although I didn't change the symbols to simple ones instead I found additional number symbols . Download the additional symbols from here: http://downloads.esri.com/blogs/places/Numbered_marker_symbol_sets.zip

step 1: Once you have downloaded them move it to your playlist folder (playlist\source\resources\images\markers\indexed)

step 2: make changes to your mapconfig in the function getSymbolForDefaultRenderer(graphic,colorAttr,index)

if(graphic.attributes[colorAttr]){

if (graphic.attributes[colorAttr].toLowerCase() === "b" || graphic.attributes[colorAttr].toLowerCase() === "blue"){

iconURL = "resources/images/markers/indexed/blue/NumberIconb" + (index + 1) + ".png";

}

else if (graphic.attributes[colorAttr].toLowerCase() === "g" || graphic.attributes[colorAttr].toLowerCase() === "green"){

iconURL = "resources/images/markers/indexed/green/NumberIcong" + (index + 1) + ".png";

}

else if (graphic.attributes[colorAttr].toLowerCase() === "p" || graphic.attributes[colorAttr].toLowerCase() === "purple"){

iconURL = "resources/images/markers/indexed/purple/IconPurple" + (index + 1) + ".png";

}

else if (graphic.attributes[colorAttr].toLowerCase() === "m" || graphic.attributes[colorAttr].toLowerCase() === "magenta"){

iconURL = "resources/images/markers/indexed/magenta/NumbericonM" + (index + 1) + ".png";

}

else if (graphic.attributes[colorAttr].toLowerCase() === "o" || graphic.attributes[colorAttr].toLowerCase() === "orange"){

iconURL = "resources/images/markers/indexed/orange/NumbericonO" + (index + 1) + ".png";

}

else if (graphic.attributes[colorAttr].toLowerCase() === "bo" || graphic.attributes[colorAttr].toLowerCase() === "bruntorange"){

iconURL = "resources/images/markers/indexed/burnt_orange/BruntO_" + (index + 1) + ".png";

}

else if (graphic.attributes[colorAttr].toLowerCase() === "y" || graphic.attributes[colorAttr].toLowerCase() === "yellow"){

iconURL = "resources/images/markers/indexed/yellow/Numbericon" + (index + 1) + "Y" + ".png";

}

else{

iconURL = "resources/images/markers/indexed/red/NumberIcon" + (index + 1) + ".png";

}

else{

iconURL = "resources/images/markers/indexed/red/NumberIcon" + (index + 1) + ".png";

}

Step 3: Add the additional color in your csv file.

I hope I have not missed but give it a try.

Re: How to use simple markers to show six categories?

CONABIONC_for_Knowledge_and_Us — Wed, 30 Jul 2014 17:09:22 GMT

Thank you very much! However, it seems to me that just the first 4 colors in the list are respected (accordant to the max. number of the default template). Did you change something else in order to render the 7 categories you mentioned?

Kind regards

Re: How to use simple markers to show six categories?

JulieK — Wed, 30 Jul 2014 17:23:09 GMT

Nothing else really I did make changes in the index.html to modify the legend(see below). Did you build it to create a deploy folder or are you just previewing it? Can you send me a screen shot of the windows explorer showing the path of the addition symbols and your mapconfig file?

// Legend names for playlist markers

playlistLegend: {

// Add a name for your playlist point layer to be used in the legend.

"layerTitle": "Playlist Layer",

// Choose to display your playlist point layer in the legend (true or false).

"visible": true,

"items": {

"redIcon": {