Feature Layer not appearing when map extent changes

ChristopherJohnson1 · ‎06-20-2016

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>

html, body, #divMap {

height: 100%;

width: 100%;

padding: 0;

}

</style>

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>

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

RobertScheitlin__GISP · ‎06-20-2016

Chris,

Let me start by asking a simple question. Why are you not use scale dependency (minScale and maxScale) on those layer instead of trying it this way?

View solution in original post

RobertScheitlin__GISP · ‎06-20-2016

Chris,

Let me start by asking a simple question. Why are you not use scale dependency (minScale and maxScale) on those layer instead of trying it this way?

ChristopherJohnson1 · ‎06-20-2016

Hi, Robert. Thanks for the reply. Can you clarify your question, please? On the map service, there are display rules that determine which layers display at which scale. However, I am using the generateRenderer function to display the data, based upon a user’s selection of classification method and number of classes. I hope that this helps to clarify my approach. If not, let me know the other questions you may have. I appreciate your help. Thanks.

ChristopherJohnson1 · ‎06-29-2016

Robert, thanks for your help with this so far. As I mentioned below, I have an alternate method of using the LayerDrawingOptions, but I need to use the feature layer, as I am using a feature table that depends on the feature layer. Can you tell me the reason (from looking at the code) that the renderer is not appearing when I change map extents when using the generateRenderer function, as shown above?

Any help would be greatly appreciated. Thanks.

- Chris

ChristopherJohnson1 · ‎06-20-2016

Robert, I believe that your question led me to an answer.

I utilized the code below in the applyRenderer functions and it seems to be working.

var optionsArray = [];

var drawingOptions = new LayerDrawingOptions();

drawingOptions.renderer = renderer;

optionsArray[5] = drawingOptions;

dynamicMapServiceLayer.setLayerDrawingOptions(optionsArray);

map.addLayers([dynamicMapServiceLayer]);

Thanks for your help.

- Chris

RobertScheitlin__GISP · ‎06-20-2016

Chris,

Glad that got you going in the right direction.