Change the symbol of a feature layer using SimpleRenderer

SarojThapa1 — Sat, 11 Dec 2021 19:14:51 GMT

I have an editor tool where full editing (both attributes and geometry) is enabled. I have a feature layer that has a solid black line. I want to change the color of the solid line into red with decreased width using. I tried with SimpleRenderer module but could not make it work quite right. Below is my code:

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

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html,body{height:100%;width:100%;margin:0;overflow:hidden;}
        #map{
            padding:0;
        }
        #header{
            font-size: 1.1em;
            font-family: sans-serif;
            padding-left: 1em;
            padding-top:4px;
            color:#660000;
        }
        .templatePicker {
            border: none;
        }

        .dj_ie .infowindow .window .top .right .user .content { position: relative; }
        .dj_ie .simpleInfoWindow .content { position: relative; }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        var map;

        require([
            "esri/map",
            "esri/tasks/GeometryService",

            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/FeatureLayer",

            "esri/Color",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",

            "esri/dijit/editing/Editor",
            "esri/dijit/editing/TemplatePicker",

            "esri/config",
            "dojo/i18n!esri/nls/jsapi",

            "dojo/_base/array", "dojo/parser", "dojo/keys",

            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function(
                Map, GeometryService,
                ArcGISDynamicMapServiceLayer, FeatureLayer,
                Color, SimpleMarkerSymbol, SimpleLineSymbol,
                Editor, TemplatePicker,
                esriConfig, jsapiBundle,
                arrayUtils, parser, keys
        ) {
            parser.parse();

            // snapping is enabled for this sample - change the tooltip to reflect this
            jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start +  "<br>Press <b>ALT</b> to enable snapping";

            // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
            esriConfig.defaults.io.proxyUrl = "/proxy/";

            //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
            esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            map = new Map("map", {
                basemap: "topo",
                center: [-88.55, 43.12],
                zoom: 9,
                slider: false
            });

            map.on("layers-add-result", initEditor);


            var labels = new ArcGISDynamicMapServiceLayer("RESTURL/MapServer");
            map.addLayer(labels);

            var responsePolys = new FeatureLayer("RESTURL/FeatureServer/0", {
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });

            map.addLayers([responsePolys]);

            function initEditor(evt) {
                var templateLayers = arrayUtils.map(evt.layers, function(result){
                    return result.layer;
                });
                var templatePicker = new TemplatePicker({
                    featureLayers: templateLayers,
                    grouping: true,
                    rows: "auto",
                    columns: 3
                }, "templateDiv");
                templatePicker.startup();

                var layers = arrayUtils.map(evt.layers, function(result) {
                    return { featureLayer: result.layer };
                });
                var settings = {
                    map: map,
                    templatePicker: templatePicker,
                    layerInfos: layers,
                    toolbarVisible: true,
                    createOptions: {
                        polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
                        polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                            Editor.CREATE_TOOL_CIRCLE,
                            Editor.CREATE_TOOL_TRIANGLE,
                            Editor.CREATE_TOOL_RECTANGLE
                        ]
                    },
                    toolbarOptions: {
                        reshapeVisible: true
                    }
                };

                var params = { settings: settings };
                var myEditor = new Editor(params, 'editorDiv');
                //define snapping options
                var symbol = new SimpleMarkerSymbol(
                        SimpleMarkerSymbol.STYLE_CROSS,
                        15,
                        new SimpleLineSymbol(
                                SimpleLineSymbol.STYLE_SOLID,
                                new Color([255, 0, 0, 0.5]),
                                5
                        ),
                        null
                );
                map.enableSnapping({
                    snapPointSymbol: symbol,
                    tolerance: 20,
                    snapKey: keys.ALT
                });

                myEditor.startup();
            }
        });
    </script>
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">

    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
        <div id="templateDiv"></div>
        <div id="editorDiv"></div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>

Re: Change the symbol of a feature layer using SimpleRenderer

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:14:53 GMT

Saroj,

Try setting the renderer for your feature layer:

require "esri/renderers/SimpleRenderer",

...

            var responsePolys = new FeatureLayer("RESTURL/FeatureServer/0", {
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });
            responsePolys.setRenderer(new SimpleRenderer(new SimpleLineSymbol(
                SimpleLineSymbol.STYLE_SOLID,
                new Color([255, 0, 0, 0.5]),
                2)
              )
            );‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change the symbol of a feature layer using SimpleRenderer

SarojThapa1 — Wed, 26 Oct 2016 16:46:17 GMT

Thanks Robert. working great.

topic Re: Change the symbol of a feature layer using SimpleRenderer in ArcGIS JavaScript Maps SDK Questions

Change the symbol of a feature layer using SimpleRenderer

Re: Change the symbol of a feature layer using SimpleRenderer

Re: Change the symbol of a feature layer using SimpleRenderer