Community
Select to view content in your preferred language

//

1492
5
Jump to solution
01-15-2020 11:45 AM
_____
by
Frequent Contributor
‎01-15-2020 11:45 AM
 
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎01-15-2020 12:23 PM

Here is a sample:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to FeatureLayer - 4.14</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.14/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      var orenderer;
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/core/watchUtils"
      ], function(Map, MapView, FeatureLayer, watchUtils) {
        var map = new Map({
          basemap: "hybrid"
        });

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

          extent: {
            // autocasts as new Extent()
            xmin: -9177811,
            ymin: 4247000,
            xmax: -9176791,
            ymax: 4247784,
            spatialReference: 102100
          }
        });

        /********************
         * Add feature layer
         ********************/

        // Carbon storage of trees in Warren Wilson College.
        var featureLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
        });
        featureLayer.load().then(function(){
          orenderer = featureLayer.renderer;
        
          featureLayer.renderer = {
            type: "simple",  // autocasts as new SimpleRenderer()
            symbol: {
              type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
              size: 6,
              color: "black",
              outline: {  // autocasts as new SimpleLineSymbol()
                width: 0.5,
                color: "white"
              }
            }
          };
          map.add(featureLayer);
        });
        
        view.when(function(){
          watchUtils.watch(view, "zoom", function(zoom){
            if (zoom > 14) {
              console.info(orenderer);
              featureLayer.renderer = orenderer;
              featureLayer.refresh()
            }
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

5 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎01-15-2020 11:50 AM

Ian,

   Did the the FeatureLayer have a renderer specified when it was originally created and added to the map? If so then just set the renderer back to that renderer object. Setting the renderer to a empty string is not going to work.

0 Kudos
_____
by
Frequent Contributor
‎01-15-2020 11:52 AM

//

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎01-15-2020 12:07 PM

Ian,

   If a renderer is defined when the FeatureLayer is created then it will be unaware of the renderer that is defined by the map/feature service since it was overriden. You would have to store the layers renderer in your code before you override it and apply it when your conditions are meet.

0 Kudos
_____
by
Frequent Contributor
‎01-15-2020 12:13 PM

//

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎01-15-2020 12:23 PM

Here is a sample:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to FeatureLayer - 4.14</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.14/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      var orenderer;
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/core/watchUtils"
      ], function(Map, MapView, FeatureLayer, watchUtils) {
        var map = new Map({
          basemap: "hybrid"
        });

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

          extent: {
            // autocasts as new Extent()
            xmin: -9177811,
            ymin: 4247000,
            xmax: -9176791,
            ymax: 4247784,
            spatialReference: 102100
          }
        });

        /********************
         * Add feature layer
         ********************/

        // Carbon storage of trees in Warren Wilson College.
        var featureLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
        });
        featureLayer.load().then(function(){
          orenderer = featureLayer.renderer;
        
          featureLayer.renderer = {
            type: "simple",  // autocasts as new SimpleRenderer()
            symbol: {
              type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
              size: 6,
              color: "black",
              outline: {  // autocasts as new SimpleLineSymbol()
                width: 0.5,
                color: "white"
              }
            }
          };
          map.add(featureLayer);
        });
        
        view.when(function(){
          watchUtils.watch(view, "zoom", function(zoom){
            if (zoom > 14) {
              console.info(orenderer);
              featureLayer.renderer = orenderer;
              featureLayer.refresh()
            }
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍