Feature Layer not appearing when map extent changes

ChristopherJohnson1 — Mon, 20 Jun 2016 16:32:51 GMT

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

topic Re: Feature Layer not appearing when map extent changes in ArcGIS JavaScript Maps SDK Questions

Feature Layer not appearing when map extent changes

Re: Feature Layer not appearing when map extent changes

Re: Feature Layer not appearing when map extent changes

Re: Feature Layer not appearing when map extent changes

Re: Feature Layer not appearing when map extent changes

Re: Feature Layer not appearing when map extent changes