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; } } }

How to use simple markers to show six categories?

JulieK

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

Vind meer berichten getagd met

Accepted answers

All comments

StephenSylvia

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.

JulieK

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!!

JulieK

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 🙂

JulieK

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:)

CONABIONC_for_Knowledge_and_Us

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

JulieK

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‌

CONABIONC_for_Knowledge_and_Us

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?

CONABIONC_for_Knowledge_and_Us

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

JulieK

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.

CONABIONC_for_Knowledge_and_Us

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

JulieK

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": {