How to change feature layer style using its parameters

2807
15
Jump to solution
11-19-2016 10:55 AM
SabbiuShah
New Contributor II

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.

    0 Kudos
    1 Solution

    Accepted Solutions
    SarojThapa1
    Occasional Contributor III

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

    Unique Value Renderer 

    View solution in original post

    15 Replies
    SarojThapa1
    Occasional Contributor III

    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
    New Contributor II

    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?

    0 Kudos
    SarojThapa1
    Occasional Contributor III

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

    SabbiuShah
    New Contributor II

    it says, setRenderer is not defined.. 

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

    0 Kudos
    SabbiuShah
    New Contributor II

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

    0 Kudos
    SarojThapa1
    Occasional Contributor III

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

    Unique Value Renderer 

    View solution in original post

    SabbiuShah
    New Contributor II

    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?

      0 Kudos
      SabbiuShah
      New Contributor II

      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?

      0 Kudos
      FC_Basson
      MVP Regular Contributor

      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 

      0 Kudos