AnsweredAssumed Answered

Feature Layer not appearing when map extent changes

Question asked by CGSJohnson on Jun 20, 2016
Latest reply on Jun 29, 2016 by CGSJohnson

Good afternoon.  I have a map service that shows different layers at different scales -- layer 0 has point data, but layers 1 - 4 have polygon data.  I am using the JavaScript API to visualize the data, but I am having an issue where at some scales, the feature layer does not show.  Unfortunately, my map service is not publicly-available.  However, the JavaScript code that I use is below:

 

<html>

  <head>

  <title>Case 01792708</title>

  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css" />

  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.16/esri/css/esri.css" />

  <style type="text/css">

  html, body, #divMap {

        height: 100%;

  width: 100%;

        padding: 0;

      }

  </style>

  <script src="https://js.arcgis.com/3.16/"></script>

  <script type="text/javascript">

  var map, grid, fl_url, symbol, polygonSymbol, highlightSymbol, pointSymbol, line, renderer, polygonrenderer, pointrenderer, featureLayer, loading;

  var visiblelayers = [], symbolArray = [], labelArray = [];

  var renderedField = "somefield", lowCI = "anotherfield", highCI = "yetanotherfield", DataUnavailableTxt = "Data unavailable";

 

  require([

   "esri/map", "esri/graphic", "esri/layers/FeatureLayer", "esri/geometry/Extent", "esri/geometry/Polygon",

   "esri/symbols/SimpleFillSymbol", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters", "esri/InfoTemplate",

   "esri/renderers/ClassBreaksRenderer", "esri/tasks/GenerateRendererParameters", "esri/tasks/GenerateRendererTask",

   "esri/tasks/ClassBreaksDefinition", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "esri/tasks/AlgorithmicColorRamp", "esri/lang", "esri/geometry/Point",

   "esri/layers/LayerDrawingOptions", "esri/request", "dojo/dom-construct",

   "esri/tasks/query", "esri/Color",

   "dojo/on", "dojo/_base/array", "dojox/gfx", "esri/symbols/jsonUtils",

   "dojo/_base/array", "dojo/dom", "dijit/form/Button",

  "dijit/registry",

   "dojo/parser", "dojo/_base/declare",

   "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

  ], function (

   Map, Graphic, FeatureLayer, Extent, Polygon, SimpleFillSymbol, ArcGISDynamicMapServiceLayer, ImageParameters,

   InfoTemplate, ClassBreaksRenderer, GenerateRendererParameters, GenerateRendererTask, ClassBreaksDefinition,

  SimpleMarkerSymbol, SimpleLineSymbol, SimpleRenderer, AlgorithmicColorRamp, esriLang, Point, LayerDrawingOptions, esriRequest, domConstruct,

   Query, Color,

   on, arrayUtils, gfx, jsonUtils,

   array, dom, Button,

  registry,

   parser, declare, BorderContainer, ContentPane, ready

  )

  {

  parser.parse();

 

 

  // define symbols

  highlightSymbol = new SimpleFillSymbol(

   SimpleFillSymbol.STYLE_SOLID,

   new SimpleLineSymbol(

  SimpleLineSymbol.STYLE_SOLID,

  new Color([91, 91, 91]), 3

   ),

   new Color([125, 125, 125, 0.35])

  );

 

 

  polygonSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));

  //polygonsymbol = new SimpleFillSymbol();

  //polygonsymbol.setColor(new Color([150, 150, 150, 0.5]));

 

 

  pointSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setSize(8).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));

 

 

  var DynamicMapServiceLayerURL = "myUrl";

 

  var imageParameters = new ImageParameters();

  imageParameters.format = "png";

 

 

  var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(DynamicMapServiceLayerURL, {

  "opacity": 1.0,

  "imageParameters": imageParameters

  });

 

 

  // always show State boundaries

  //visiblelayers.push(1);

  //dynamicMapServiceLayer.setVisibleLayers(visiblelayers);

 

 

  // define the initial extent of the map

  var initialExtent = new esri.geometry.Extent({

  "xmin": -14901092.916080378,

  "ymin": 2570827.677759068,

  "xmax": -7382135.317726159,

  "ymax": 7046980.0541378,

  "spatialReference": { "wkid": 102100 }

  });

 

 

  // add a map to the page

  map = new Map("divMap", {

  zoom: 9,

  basemap: "topo",

  extent: initialExtent//,

  //infoTemplate: infoTemplate//,

  //infoTemplate: popup

  });

 

 

  function showErr(err)

  {

  'use strict;'

  console.log("Error Details: " + err);

  }

 

 

  function applyPolygonRenderer(polygonrenderer)

  {

  console.log("Polygon symbol:" + polygonSymbol);

  console.log("Polygon renderer:" + polygonrenderer);

  polygonrenderer.defaultSymbol = polygonSymbol;

  polygonrenderer.defaultLabel = "Data unavailable";

 

 

  featureLayer.setRenderer(polygonrenderer);

 

 

  //map.removeLayer("operationallayer");

 

 

  map.addLayers([featureLayer]);

 

 

  }

 

 

  function applyPointRenderer(pointrenderer)

  {

  console.log("Point symbol:" + pointSymbol);

  console.log("Point renderer:" + pointrenderer);

  pointrenderer.defaultSymbol = pointSymbol;

  pointrenderer.defaultLabel = "Data unavailable";

 

 

  featureLayer.setRenderer(pointrenderer);

 

 

  //map.removeLayer("operationallayer");

 

 

  map.addLayers([dynamicMapServiceLayer, featureLayer]);

 

 

  }

 

 

  function createPolygonRenderer(field)

  {

  var classDef = new ClassBreaksDefinition();

  classDef.classificationField = field;

  classDef.classificationMethod = "quantile";

  classDef.breakCount = 4;

  classDef.baseSymbol = polygonSymbol;

 

 

  var colorRamp = new AlgorithmicColorRamp();

  colorRamp.fromColor = new Color.fromHex("#F0F9E8");

  colorRamp.toColor = new Color.fromHex("#2b8cbe");

  colorRamp.algorithm = "hsv";

  classDef.colorRamp = colorRamp;

 

 

  var params = new GenerateRendererParameters();

  params.classificationDefinition = classDef;

 

 

  var generatePolygonRenderer = new GenerateRendererTask(fl_url);

  generatePolygonRenderer.execute(params, applyPolygonRenderer, showErr);

  }

 

 

  function createPointRenderer(field)

  {

  var pointclassDef = new ClassBreaksDefinition();

  pointclassDef.classificationField = field;

  pointclassDef.classificationMethod = "quantile";

  pointclassDef.breakCount = 4;

  pointclassDef.baseSymbol = pointSymbol;

 

 

  var pointcolorRamp = new AlgorithmicColorRamp();

  pointcolorRamp.fromColor = new Color.fromHex("#F0F9E8");

  pointcolorRamp.toColor = new Color.fromHex("#2b8cbe");

  pointcolorRamp.algorithm = "hsv";

  pointclassDef.colorRamp = pointcolorRamp;

 

 

  var pointparams = new GenerateRendererParameters();

  pointparams.classificationDefinition = pointclassDef;

 

 

  var generatePointRenderer = new GenerateRendererTask(fl_url);

  generatePointRenderer.execute(pointparams, applyPointRenderer, showErr);

  }

 

 

  // adds a feature layer to the map, based on the layer to show and based on the field on which to classify the data

  function addFeatureLayer(layerid, fieldRendered)

  {

  fl_url = DynamicMapServiceLayerURL + "/" + layerid;

 

 

  featureLayer = new FeatureLayer(fl_url, {

  mode: FeatureLayer.MODE_ONDEMAND,

  outFields: ["*"],

  //infoTemplate: infoTemplate,

  id: "operationallayer"

  });

 

 

  featureLayer.on("mouse-over", function (evt)

  {

  map.graphics.clear();  //use the maps graphics layer as the highlight layer

  var graphic = evt.graphic;

  map.infoWindow.setContent(graphic.getContent());

  map.infoWindow.setTitle(graphic.getTitle());

 

 

  if (evt.graphic.geometry.type === 'point')

  {

  var highlightGraphic = new Graphic(graphic.geometry, pointSymbol);

  }

  else

  {

  var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);

  }

 

 

  map.graphics.add(highlightGraphic);

  map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

  });

 

 

  switch (layerid)

  {

  case 0:

 

 

  dynamicMapServiceLayer.setVisibleLayers([1]);

 

 

  createPointRenderer(fieldRendered);

 

 

  break;

 

 

  case 1:

 

 

  dynamicMapServiceLayer.setVisibleLayers([1, 2]);

 

 

  symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1);

 

 

  renderer = new SimpleRenderer(symbol);

 

 

  var optionsArray = [];

  var drawingOptions = new LayerDrawingOptions();

  drawingOptions.renderer = renderer;

  optionsArray[2] = drawingOptions;

 

 

  dynamicMapServiceLayer.setLayerDrawingOptions(optionsArray);

 

 

  map.addLayers([dynamicMapServiceLayer]);

 

 

  break;

 

 

  case 2:

 

 

  dynamicMapServiceLayer.setVisibleLayers([1, 2]);

 

 

  symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1);

 

 

  renderer = new SimpleRenderer(symbol);

 

 

  var optionsArray = [];

  var drawingOptions = new LayerDrawingOptions();

  drawingOptions.renderer = renderer;

  optionsArray[2] = drawingOptions;

 

 

  dynamicMapServiceLayer.setLayerDrawingOptions(optionsArray);

 

 

  map.addLayers([dynamicMapServiceLayer]);

 

 

  break;

 

 

  case 3:

 

 

  createPolygonRenderer(fieldRendered);

 

 

  break;

 

 

  case 4:

 

 

  createPolygonRenderer(fieldRendered);

 

 

  break;

 

 

  default:

 

 

  dynamicMapServiceLayer.setVisibleLayers([1]);

 

 

  symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1);

 

 

  renderer = new SimpleRenderer(symbol);

 

 

  var optionsArray = [];

  var drawingOptions = new LayerDrawingOptions();

  drawingOptions.renderer = renderer;

  optionsArray[2] = drawingOptions;

 

 

  dynamicMapServiceLayer.setLayerDrawingOptions(optionsArray);

 

 

  map.addLayers([dynamicMapServiceLayer]);

 

 

  break;

  }

  }

 

 

  function addLayerToMap()

  {

  switch (true)

  {

  case (map.getScale() >= 36978595): // point layer

  addFeatureLayer(0, renderedField);

  break;

 

 

  case (map.getScale() < 36978595 && map.getScale() >= 6000000):

  addFeatureLayer(2, renderedField);

  break;

 

 

  case (map.getScale() < 6000000 && map.getScale() > 2311162):

  addFeatureLayer(3, renderedField);

  break;

 

  case (map.getScale() <= 2311162): // polygon layer

  addFeatureLayer(4, renderedField);

  break;

 

 

  default:

  addFeatureLayer(1, renderedField);

  break;

 

 

  }

  }

 

 

  map.on("load", function ()

  {

  // log some info

  //var geo = map.geographicExtent;

  //console.log(geo.xmin, geo.ymin, geo.xmax, geo.ymax);

  //console.log("Level: " + map.getLevel() + "; Scale:" + map.getScale());

  console.log("Map loaded");

 

 

  map.graphics.enableMouseEvents();

  map.infoWindow.resize(275, 150);

 

 

  addLayerToMap();

 

 

  }, showErr);

 

 

  map.on("extent-change", function ()

  {

  console.log("Map extent changed");

  console.log("Level: " + map.getLevel() + "; Scale:" + map.getScale());

 

 

  addLayerToMap();

  }, showErr);

  });

  </script>

  </head>

  <body>

  <div id="divMap">

  </div>

  </body>

</html>

 

When the map renders, a layer draws.  On zooming out, the same layer draws, as expected (it is at the same scale).  However, continued zooming out to the point layer data scale does not result in the points being displayed.  The reverse is also true.  If I load the map at the zoom level for points to show, the polygon layers do not show.

 

Any ideas on what could possibly wrong?

 

Thanks...Chris

Outcomes