How can i modify the color of the render ?

1086
8
Jump to solution
03-15-2018 08:05 AM
AmalHorchi
New Contributor II

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title> Population Totale </title>
<link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">

<link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">

<style>


#HomeButton { position: absolute; top: 90px; left: 20px; z-index: 2; }

html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
margin: 0;
padding: 0;
}
#feedback {
position: absolute;
height: 390px;
font-family: arial;
margin: 5px;
padding: 10px;
z-index: 40;
background: #fff;
color: #444;
width: 300px;
right: 10px;
top: 10px;
box-shadow: 0 0 5px #888;
}

#legendWrapper {
padding: 10px 0 0 0;
}
#note {
font-size: 80%;
font-weight: 700;
padding: 0 0 10px 0;
}
h3 {
margin: 0 0 5px 0;
border-bottom: 1px solid #444;
}

</style>

<script src="http://js.arcgis.com/3.16/"></script>

<script>
//global vars
var layer, legend;


require([

"esri/map",
"esri/dijit/BasemapGallery",
"esri/dijit/HomeButton" ,

"esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/dijit/Legend",
"esri/renderers/smartMapping",

"dojo/_base/array",
"dojo/dom",
"dojo/dom-construct",
"dojo/data/ItemFileReadStore",
"dijit/form/FilteringSelect",
"esri/dijit/Print",
"esri/layers/LabelClass",
"esri/symbols/TextSymbol",
"esri/Color",


"dojo/parser",

"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",

"dojo/domReady!"

], function (
Map,BasemapGallery,
HomeButton ,

PopupTemplate,
FeatureLayer,
Legend,
smartMapping,

array,
dom,
domConstruct,
ItemFileReadStore,
FilteringSelect,Print,
LabelClass,
TextSymbol,
Color,
parser

) {

parser.parse();

var mapOptions = {
basemap: "topo",
center: [11,34],

zoom: 6,
slider: true ,
showLabels : true //very important that this must be set to true!


};


var map = new Map("map", mapOptions);



var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();

basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});













// map.enableKeyboardNavigation();

var home = new HomeButton(
{
map: map
}, "HomeButton");
home.startup();


var printer = new Print({
map: map,
url: "http://41.231.36.249/sirgeo/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
templates: [{
label: "Carte uniquement",
format: "PDF",
layout: "MAP_ONLY",
exportOptions: {
width: 500,
height: 400,
dpi: 96
}
}, {
label: "Layout",
format: "PDF",
layout: "A4 Portrait",
layoutOptions: {
titleText: "Impression",
authorText: "ODNO & ODCO",
copyrightText: "Système d'Information Régional",
scalebarUnit: "Miles",
}
}]
}, dom.byId("printButton"));

printer.startup();



var fieldName = "PopTot2004";

// the counties map service uses the actual field name as the field alias
// set up an object to use as a lookup table to work with user friendly field names

var fields = {
"PopTot2004": "Population Totale (2004)",
"PopTot2005": "Population Totale (2005)",
"PopTot2006": "Population Totale (2006)",
"PopTot2007": "Population Totale (2007)",
"PopTot2008": "Population Totale (2008)" ,
"PopTot2009": "Population Totale (2009)" ,
"PopTot2010": "Population Totale (2010)" ,
"PopTot2011": "Population Totale (2011)" ,
"PopTot2012": "Population Totale (2012)" ,
"PopTot2013": "Population Totale (2013)" ,
"PopTot2014": "Population Totale (2014)",
"NOM" : "NOM"


};
var outFields = ["PopTot2004", "PopTot2005", "PopTot2006", "PopTot2007","PopTot2008","PopTot2009","PopTot2010","PopTot2011","PopTot2012","PopTot2013","PopTot2014","NOM"];

//create popup
var popupTemplate = new PopupTemplate({
title: "{NOM}",
fieldInfos: [


{
"fieldName": fieldName,
"label": fields[fieldName],
"visible": true,
"format": {
places: 0,
digitSeparator: true
}
}],
showAttachments: true
});

layer = new FeatureLayer("http://41.231.36.249/sirgeo/rest/services/SIR-Gouv/demographie_gouv/MapServer/0", {
"id": "Classification",
"infoTemplate": popupTemplate,
"mode": FeatureLayer.MODE_SNAPSHOT,
"outFields": outFields,
"opacity": 0.8


});


// create a text symbol to define the style of labels
var fLabel = new TextSymbol().setColor(new Color("#000"));
fLabel.font.setSize("6pt");
fLabel.font.setFamily("arial");

//this is the very least of what should be set within the JSON
var json = {
"labelExpressionInfo": {"value": "{NOM}"}
};

//create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)
var labelClass = new LabelClass(json);
labelClass.symbol = fLabel; // symbol also can be set in LabelClass' json
layer.setLabelingInfo([labelClass]);



map.addLayer(layer);

layer.on("load", function () {
createRenderer(fieldName);
});

function createRenderer(field) {
//smart mapping functionality begins
smartMapping.createClassedColorRenderer({
layer: layer,
field: field,
basemap: map.getBasemap(),
classificationMethod: "quantile" ,
numClasses:3,
//ClassBreakInfo(null, minValue:100000, maxValue:250000),

showOthers:false ,


}).then(function (response) {
layer.setRenderer(response.renderer);
layer.redraw();
createLegend(map, layer, field);
});
}

//this function gets called when fields are selected to render
function updateAttribute(ch) {
map.infoWindow.hide();

var popupTemplateUpdated = new PopupTemplate({
title: "{NOM}",
fieldInfos: [{
"fieldName": ch,
"label": fields[ch],
"visible": true,
"format": { places: 0, digitSeparator: true }
}],
showAttachments: true
});
layer.setInfoTemplate(popupTemplateUpdated);
createRenderer(ch);
layer.redraw();
createLegend(map, layer, ch);
}

//Create a legend
function createLegend(map, layer, field) {
//If applicable, destroy previous legend
if (legend) {
legend.destroy();
domConstruct.destroy(dom.byId("legendDiv"));
}

// create a new div for the legend
var legendDiv = domConstruct.create("div", {
id: "legendDiv"
}, dom.byId("legendWrapper"));

legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "Indicateur: " ,

}]
}, legendDiv);
legend.startup();
}






// create a store and a filtering select for the county layer's fields
var fieldNames, fieldStore, fieldSelect;
fieldNames = {
"identifier": "value",
"label": "name",
"items": []
};
array.forEach(outFields, function (f) {
if (array.indexOf(f.split("_"), "NOM") == -1) { // exclude attrs that contain "NAME"
fieldNames.items.push({
"name": fields,
"value": f
});
}
});

fieldStore = new ItemFileReadStore({
data: fieldNames
});
fieldSelect = new FilteringSelect({
displayedValue: fieldNames.items[0].name,
value: fieldNames.items[0].value,
name: "fieldsFS",
required: false,
store: fieldStore,
searchAttr: "name",
style: {
"width": "290px",
"fontSize": "12pt",
"color": "#444"
}
}, domConstruct.create("div", null, dom.byId("fieldWrapper")));
fieldSelect.on("change", updateAttribute);

});





</script>
</head>

<body class="tundra">

<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">

<div id="feedback">
<h3>Population Totale(milliers habitants) </h3>
<div id="info">
Sélectionnez une année pour une visualisation cartographiqe .
</div>
<div id="legendWrapper"></div>
<div id="fieldWrapper">
Veuillez choisir l'année
</div>
<div id="printButton"></div>
</div>
</div>
</div>

<div id="HomeButton"></div>

<div style="position:absolute; left:20px; top:150px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Fond de carte', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>

</body>

</html>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Amal,

  Here is a fix for that:

        $scope.addSeries = function() {
          var named = [];
          var rnd = [];
          //Check if the series name exists and if it does exit this function
          //without adding the series
          for (var s = 0; s < $scope.highchartsNG.series.length; s++) {
            if($scope.item.name === $scope.highchartsNG.series[s].name){
              return;
            }
          }
          for (var i = 0; i < leng; i++) {
            switch ($scope.item.id) {
              case i:
                named[i] = $scope.item.name;
                rnd[i] = $scope.item.data;
                //named.disabled=true ;
                $scope.highchartsNG.series.push({
                  name: named[i],
                  data: rnd[i]
                })
                break;
            }
          }
        };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Emeritus

Amal,

   The SmartMapping class chooses appropriate colors based on the number of classes and other variables like basemap used, etc. If you want to change those colors the you should not use the SmartMapping class and manually build your class break renderer.

0 Kudos
AmalHorchi
New Contributor II

Hi Robert , 

please can you help me to resolve my problem . the chart is duplicated after choosing the same country . 

this is the link to download the Application (Angular JS) 

0 Kudos
AmalHorchi
New Contributor II

Hi Robert , 

please can you help me to resolve my problem . the chart is duplicated after choosing the same country . 

this is the link to download the Application (Angular JS) 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Amal,

   I am not sure that I can help you as I do not use Angular or charting, but when I downloaded the rar it said it was an invalid rar when I tried to extract it.

0 Kudos
AmalHorchi
New Contributor II
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Amal,

  Here is a fix for that:

        $scope.addSeries = function() {
          var named = [];
          var rnd = [];
          //Check if the series name exists and if it does exit this function
          //without adding the series
          for (var s = 0; s < $scope.highchartsNG.series.length; s++) {
            if($scope.item.name === $scope.highchartsNG.series[s].name){
              return;
            }
          }
          for (var i = 0; i < leng; i++) {
            switch ($scope.item.id) {
              case i:
                named[i] = $scope.item.name;
                rnd[i] = $scope.item.data;
                //named.disabled=true ;
                $scope.highchartsNG.series.push({
                  name: named[i],
                  data: rnd[i]
                })
                break;
            }
          }
        };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

AmalHorchi
New Contributor II

thank you so much

On Tue, May 8, 2018 at 2:56 PM, Robert Scheitlin, GISP <geonet@esri.com>

0 Kudos
AmalHorchi
New Contributor II

Thank you so much Robert .

0 Kudos