How to use simple markers to show six categories?

JulieK · ‎06-10-2014

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

JulieK · ‎07-30-2014

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 · ‎07-30-2014

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 · ‎07-30-2014

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

// Choose to display icon in the legend (true or false).

"visible": true,

// Choose the display name in the legend.

"name": "Roads & Bridges",

"iconURL": "resources/images/markers/indexed/red/NumberIcon1.png"

},

"blueIcon": {

// Choose to display icon in the legend (true or false).

"visible": true,

// Choose the display name in the legend.

"name": "Interchanges & Intersections",

"iconURL": "resources/images/markers/indexed/blue/NumberIconb1.png"

},

"greenIcon": {

// Choose to display icon in the legend (true or false).

"visible": true,

// Choose the display name in the legend.

"name": "Parks, Recreation and Culture Facilities",

"iconURL": "resources/images/markers/indexed/green/NumberIcong1.png"

},

"purpleIcon": {

// Choose to display icon in the legend (true or false).

"visible": true,

// Choose the display name in the legend.

"name": "Public Safety Facilities",

"iconURL": "resources/images/markers/indexed/purple/IconPurple1.png"

},

"magentaIcon": {

// Choose to display icon in the legend (true or false).

"visible": true,

// Choose the display name in the legend.

"name": "Transit Projects",

"iconURL": "resources/images/markers/indexed/magenta/NumbericonM1.png"

},

"orangeIcon": {

// Choose to display icon in the legend (true or false).

"visible": true,

// Choose the display name in the legend.

"name": "Sidewalks & Trails",

"iconURL": "resources/images/markers/indexed/orange/NumbericonO1.png"

},

"yellowIcon": {

// Choose to display icon in the legend (true or false).

"visible": true,

// Choose the display name in the legend.

"name": "Health & Welfare Facilities",

"iconURL": "resources/images/markers/indexed/yellow/Numbericon1Y.png"

}

},

JulieK · ‎07-30-2014

Also, did you add those color code alphabets in your csv file? did I mention that?

CONABIONC_for_Knowledge_and_Us · ‎07-30-2014

Thank you again! Yes I adapted the index.html and the csv-file. And actually it shows me 5 categories but "o", "bo" and "y" aren´t rendered. Here is my MapConfig.js:

define(["dojo/_base/array",
"esri/symbols/PictureMarkerSymbol",
"esri/renderers/UniqueValueRenderer"],
function(array,
PictureMarkerSymbol,
UniqueValueRenderer){
/**
* Playlist List
* @class Playlist List
*
* Class to define a new item list in the playlist app
*/
return function MapConfig()
{
var useDefaultRenderer = true;
var maxAllowablePoints = 99;
var markerPostionDefault = {
height: 28,
width: 22,
xOffset: 3,
yOffset: 8
};
var markerPostionHighlight = {
height: 34,
width: 27,
xOffset: 3,
yOffset: 10
};
var _tempRendererField;
this.getMaxAllowablePoints = function(){
return maxAllowablePoints;
};
this.getMarkerPosition = function()
{
return markerPostionDefault;
};
this.getMarkerPositionHighlight = function()
{
return markerPostionHighlight;
};
this.getRenderer = function(layer,features,colorAttr,orderAttr)
{
if (useDefaultRenderer){
_tempRendererField = layer.objectIdField;
var defaultSymbol = new PictureMarkerSymbol("resources/images/markers/indexed/red/NumberIcon1.png", markerPostionDefault.width, markerPostionDefault.height).setOffset(markerPostionDefault.xOffset,markerPostionDefault.yOffset);
var renderer = new UniqueValueRenderer(defaultSymbol, _tempRendererField);
array.forEach(features,function(grp,i){
if (i < maxAllowablePoints){
if (!isNaN(grp.attributes[orderAttr]) && isFinite(grp.attributes[orderAttr]) && grp.attributes[orderAttr] % 1 === 0){
i = grp.attributes[orderAttr] - 1;
}
var symbol = getSymbolForDefaultRenderer(grp,colorAttr,i);
renderer.addValue(grp.attributes[_tempRendererField], symbol);
}
});
return renderer;
}
else{
// Add custom renderer
}
};
function getSymbolForDefaultRenderer(graphic,colorAttr,index)
{
var iconURL;
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";
}
var symbol = new PictureMarkerSymbol(iconURL, markerPostionDefault.width, markerPostionDefault.height).setOffset(markerPostionDefault.xOffset,markerPostionDefault.yOffset);
return symbol;
}
};
});

CONABIONC_for_Knowledge_and_Us · ‎07-30-2014

I found out that it works when I use

iconURL = "resources/images/markers/indexed/orange/NumbericonO1.png";

instead of

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

Also there seem to be seem inconsistencies in the markers´ names. Some start with 1, others with 01.

JulieK · ‎07-30-2014

Oh yes, I did rename first 10 images to fix that issue but I am glad you fixed that at your end.

CONABIONC_for_Knowledge_and_Us · ‎07-30-2014

Thank you again Julie - you made my week 😉

For the rest of us: if you want to activate the filter, put the name of the accordant column of your csv in the index.html here:

// Change name filter to match data

filterField: "yourcolumnname"

muchas gracias!

JulieK · ‎07-30-2014

Wohooo...my pleasure:)

for the rest of us, the filterField is picky sometimes. It wouldn't take "Project Type" but accepted "projectType" to enable the filter.