How to change feature layer style using its parameters

[SabbiuShah]

This is the code that I have written till now.

require([
   "esri/Map",
   "esri/views/MapView",
   "esri/layers/MapImageLayer",
   "esri/renderers/SimpleRenderer",
   "esri/symbols/SimpleFillSymbol",
   "dojo/domReady!"
],
function(
   Map, MapView, MapImageLayer, SimpleRenderer, SimpleFillSymbol
) {

   var permitsLyr = new MapImageLayer({
   url: "http://apps.geoportal.icimod.org/ArcGIS/rest/services/Nepal/District/MapServer",
   sublayers: [
   {
      id: 1,
      visible: true,
   },
   {
      id: 0,
      visible: true,
   }
   ],

});

/*****************************************************************
* Add the layer to a map
*****************************************************************/
var map = new Map({
   // basemap: "dark-gray",
   layers: [permitsLyr]
});

var view = new MapView({
   container: "viewDiv",
   map: map
});

/*****************************************************************
* Animate to the layer's full extent when the layer loads.
*****************************************************************/
permitsLyr.then(function() {
   view.goTo(permitsLyr.fullExtent);
});
});

Now, I would like to change default renderer given in the District - Nepal/District  as 

Drawing Info:

Renderer:

Simple Renderer:

Symbol:

                        Simple Fill Symbol:

Style: esriSFSSolid, Color: [Undefined]

Outline:

                                    Simple Line Symbol:

Style: esriSLSSolid, Color: [78, 78, 78, 255], Width: 1
Label:

Description:

Transparency: 0
Labeling Info: N/A

How do I change the default color and style for it? Also, using its attribute "DIST_CODE", I also want to apply different color for different polygons.

I am new to this field. So, help me out.

[SarojThapa1]

Sabbiu,

Try this code. Why are you using MapImageLayer instead of FeatureLayer?

permitsLyr.setRenderer(new SimpleRenderer(new SimpleLineSymbol(

                        SimpleLineSymbol.STYLE_SOLID,

                        new Color([(0,128,0, 1]),

                         3)

                          )

                          );

[SabbiuShah]

Actually, I am new to this field. I found few examples on MapImageLayer. Hence, I went with that.

Also, I am trying to make a "Density Map Chart" with my own data, but taking the region information from above url. Will you please guide me to the right direction?

[SarojThapa1]

Try the above codes in your MapImageLayer and see if the colors change or not.

[SabbiuShah]

it says, setRenderer is not defined.. 

Here's my code.. GitHub - sabbiu/nepal_map 

[SabbiuShah]

With few modifications, I am now able to add color. Thanks

GitHub - sabbiu/nepal_map 

Now I have a question that, "Using different attribute values from the mentioned MapServer, how do I put different color for different regions?"

[SarojThapa1 · Accepted solution]

Use UniqueValueRenderer in a very similar way. This sample should help you.

Unique Value Renderer 

[SabbiuShah]

Thanks! I'll look into it. Now, I would like to know about, "How can I tweak labeling information?"

In the mapserver, it is given as,

Labeling Info:

Label Placement: esriServerPolygonPlacementAlwaysHorizontal

Label Expression: [DIST_NAME]

Use Coded Values: True

Symbol:

                           Simple Text Symbol:

Type: esriTS

Color:0, 0, 0, 255

Background Color: null

Border Line Color: null

Vertical Alignment: bottom

Horizontal Alignment: center

Right To Left: False

Angle: 0

XOffset: 0

YOffset: 0

Font Family: Arial

Font Size: 8

Font Style: normal

Font Weight: bold

Font Decoration: none

Min. Scale: 0

Max. Scale: 0

For now I'm not even able to show the labels.

I tried this. But, it didn't work.

var featureLayer = new FeatureLayer({
   url: "http://apps.geoportal.icimod.org/ArcGIS/rest/services/Nepal/District/MapServer",
   renderer: new SimpleRenderer({
      symbol: new SimpleFillSymbol({
         style: SimpleFillSymbol.STYLE_SOLID,
         color: new Color([0,128,0, 0.5]),
         outline: new SimpleLineSymbol({
            style: SimpleLineSymbol.STYLE_SOLID,
            color: new Color([128,0,0,1]),
            width: 2
         })
      })
   }),
   labelsVisible: true,
   labelingInfo: [{
      labelExpression: "[DIST_NAME]",
      labelPlacement: "always-horizontal",
      symbol: new TextSymbol({
         color: [255, 255, 255, 0.7],
         // haloColor: [0, 0, 0, 0.7],
         // haloSize: 1,
         font: {
            size: 11
         }
      }),
      minScale: 9250000,
      maxScale: 2400000
     }],
   id: 'nam',
   opacity: 1,
   visible: true,
   layerId: 1,
});

When I try working with this,

It shows me error as,

"SceneView.js:1671 Uncaught (in promise) TypeError: f.labelClass.getLabelExpression is not a function(…)"

How do I solve this?

[SabbiuShah]

Everything worked till now.

Now I would like to know, "What do I need to see for showing the name of the district (which is stored in one attribute in the given MapServer) above the district region?

[FC_Basson]

You should post your new question under a new topic.  For labelling have a look at LabelLayer | API Reference | ArcGIS API for JavaScript 3.18