How can i modify the color of the render ?

AmalHorchi — Thu, 15 Mar 2018 15:05:54 GMT

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

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

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

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

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

Re: How can i modify the color of the render ?

RobertScheitlin__GISP — Thu, 15 Mar 2018 15:52:31 GMT

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.

Re: How can i modify the color of the render ?

AmalHorchi — Tue, 08 May 2018 09:04:02 GMT

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)

Re: How can i modify the color of the render ?

AmalHorchi — Tue, 08 May 2018 09:04:30 GMT

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)

https://we.tl/bH2IwB5Dwh

Re: How can i modify the color of the render ?

RobertScheitlin__GISP — Tue, 08 May 2018 12:51:50 GMT

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.

Re: How can i modify the color of the render ?

AmalHorchi — Tue, 08 May 2018 13:01:04 GMT

https://we.tl/bH2IwB5Dwh

Re: How can i modify the color of the render ?

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:00:22 GMT

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.

Re: How can i modify the color of the render ?

AmalHorchi — Tue, 08 May 2018 14:47:40 GMT

thank you so much

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

Re: How can i modify the color of the render ?

AmalHorchi — Tue, 08 May 2018 14:48:03 GMT

Thank you so much Robert .

topic Re: How can i modify the color of the render ? in ArcGIS JavaScript Maps SDK Questions

How can i modify the color of the render ?

Re: How can i modify the color of the render ?

Re: How can i modify the color of the render ?

Re: How can i modify the color of the render ?

Re: How can i modify the color of the render ?

Re: How can i modify the color of the render ?

Re: How can i modify the color of the render ?

Re: How can i modify the color of the render ?

Re: How can i modify the color of the render ?