topic Feature Layer Web Mercato Service is too slow in IE and zooming does not work in FF in ArcGIS JavaScript Maps SDK Questions

Feature Layer Web Mercato Service is too slow in IE and zooming does not work in FF

vinayb — Tue, 03 Sep 2013 11:56:25 GMT

HI All,

I am facing issue of Feature Layer being too slow and hangs browser , we changed the projection system to WebMercator performance increased in FF but in IE it sill hangs.when i zoom in FF it hangs what is the issue we have about 220 polygons which is not too much .Below is services and html code

Layer: World_Countires_v3_WMS (ID: 0)

Name: World_Countires_v3_WMS 

Display Field: COUNTRY 

Type: Feature Layer 

Geometry Type: esriGeometryPolygon 

Description: World Countires Map (v3) with only few fields. No changes to the data from V1. 

Definition Expression: 

Copyright Text: 

Default Visibility: true 

MaxRecordCount: 1000

Supported Query Formats: JSON, AMF

Min Scale: 0

Max Scale: 0

Supports Advanced Queries: true

Supports Statistics: true

Has Labels: false

Can Modify Layer: true

Can Scale Symbols: false

Extent:
XMin: -2.00375070672E7
YMin: -3.02409719584E7
XMax: 2.0037507067199998E7
YMax: 1.8460513218900003E7
Spatial Reference: 102100  (3857) 


Drawing Info:
Renderer:
Simple Renderer:
Symbol:
Style: esriSFSSolid 
Color: [201, 242, 208, 255] 
Outline:
Style: esriSLSSolid 
Color: [110, 110, 110, 255] 
Width: 0
Label: 
Description:
Transparency: 0 
Labeling Info:

HasZ: false 

HasM: false 

Has Attachments: false 

HTML Popup Type: esriServerHTMLPopupTypeAsHTMLText 

Type ID Field: null

Fields:
OBJECTID_1 ( type: esriFieldTypeOID , alias: OBJECTID_1 )
Shape ( type: esriFieldTypeGeometry , alias: Shape )
OBJECTID ( type: esriFieldTypeInteger , alias: OBJECTID )
COUNTRY ( type: esriFieldTypeString , alias: COUNTRY , length: 50 )

HTML code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Feature Layer Only Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      require([
        "dojo/dom-construct", 
        "esri/map", 
        "esri/layers/FeatureLayer",
        "esri/geometry/Extent",
        "esri/InfoTemplate",
        "dojo/domReady!"
      ], function(
          domConstruct,
          Map,
          FeatureLayer,
          Extent,
          InfoTemplate
        ) {
          var bounds = new Extent({
            "xmin":-2.204125777392E7,
            "ymin":-1.4348737528212927E7,
            "xmax":2.204125777392E7,
            "ymax":2.3907585678113185E7,
            "spatialReference":{"wkid":102100}
          });

          var map = new Map("map", { 
            extent: bounds
          });

          var url = "http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_v3_WMS_v1/MapServer/0";

          var template = new InfoTemplate("World Regions", "Region: ${COUNTRY}");

          var fl = new FeatureLayer(url, {
            id: "world-regions",
    mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
   autoGeneralize :true,
    maxAllowableOffset:0,
   outFields: ["*"]
            //infoTemplate: template
          });
          require(["dojo/on", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic"], function(on, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic) {
                    on(fl, "click", function(evt) {
                        
                        // clears current selection
                        map.graphics.clear();
                        
                        // create new graphic with selected graphic's geometry
                        var graphic = new Graphic(evt.graphic.geometry);
                        
                        // create a new symbol for the graphic
                        var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
                        
                        // add symbol to the graphic
                        graphic.setSymbol(sfs);     
                        
                        // add the graphic to the map   
                        map.graphics.add(graphic);
                    });
                });
    //fl.setEditable(false)
    //fl.minScale=0;
      //fl.maxScale=3;
   //fl.setAutoGeneralize(false);
   
   
   
          map.addLayer(fl);
    
    
    
        }
      );
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Re: Feature Layer Web Mercato Service is too slow in IE and zooming does not work in

JohnGravois — Tue, 03 Sep 2013 15:10:29 GMT

i think blord-castillo's answer to your post on gis-SE is probably on the right track.

even if you only have 220 features, if they are vertex dense (particularly since they represent entire countries) and you use 'maxAllowableOffset:0', which inhibits the API from requesting simplified geometries, performance can be comprimised.

Re: Feature Layer Web Mercato Service is too slow in IE and zooming does not work in

vinayb — Wed, 04 Sep 2013 05:50:25 GMT

I tried that but still no help , what is the actually root cause ,IN ff things work fine but no in IE

Re: Feature Layer Web Mercato Service is too slow in IE and zooming does not work in

vinayb — Sat, 11 Dec 2021 19:41:58 GMT

I was able to resolve the to certain extent by loading the base map first and then feature layer , i read somewhere that if base map and feature layer have same projection then feature layer loads faster , below is the modified code .Now the issue i am facing is browser hangs when i zoom or when i click on map but resulsts are displayed .How can i leaverage cached services here.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Feature Layer Only Map</title>
    
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
 <script src="http://js.arcgis.com/3.6/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dijit.TooltipDialog");
var myMap;    // global variable representing the map

function init() {
var bounds = new esri.geometry.Extent({
            "xmin":-2.204125777392E7,
            "ymin":-1.4348737528212927E7,
            "xmax":2.204125777392E7,
            "ymax":2.3907585678113185E7,
            "spatialReference":{"wkid":102100}
          });
 myMap = new esri.Map("mapDiv", { 
            extent: bounds
          });
 var opLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.97.43.4:6080/arcgis/rest/services/POC/World_Countries_Normalised_Trimmed_WMS/MapServer");
 myMap.addLayer(opLayer1);
 
 
 addNeighborhoods();

}

function addNeighborhoods() {
 var info_content = "<table><tr><td><b>COUNTRY :</b></td><td style='text-align:right'>${COUNTRY}</td></tr></table>";
     console.log(" adding neghbordhoods");
 var infoTemplate1 = new esri.InfoTemplate("fdsfd", "Sdfd");
 var  featureLayer1 = new esri.layers.FeatureLayer("http://10.97.43.4:6080/arcgis/rest/services/POC/World_Countries_Normalised_Trimmed_WMS/MapServer/0",{
   mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
    infoTemplate: infoTemplate1,
  id: "sd_neighborhoods"
 });
 dojo.connect(featureLayer1, "onLoad", function(){
          console.log("feture layer added ");
   myMap.addLayer(featureLayer1);
 });
 
 
 require(["dojo/on", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic"], function(on, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic) {
                    on(featureLayer1, "click", function(evt) {
                        
      console.log(" added ");
                        // clears current selection
                       
                        myMap.graphics.clear();
                        // create new graphic with selected graphic's geometry
                        var graphic = new Graphic(evt.graphic.geometry);
                        
                        // create a new symbol for the graphic
                        var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
                        
                        // add symbol to the graphic
                        graphic.setSymbol(sfs);     
                        
                        // add the graphic to the map   
                        myMap.graphics.add(graphic);
                    });
                });
 }
function showTooltip(evt){
 var newTip = new dijit.TooltipDialog({
   id: "ttDialog",
   content: evt.graphic.attributes.COUNTRY,
   style: "position: absolute; opacity: 0.8; width: auto; font: normal normal bold 6pt Tahoma;z-index:100"
 });
 newTip.startup();

 dijit.placeOnScreen(newTip.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});
}

function hideTooltip() {
var oldTip = dijit.byId("ttDialog");
 if (oldTip) {
   oldTip.destroy();
 }
}


dojo.addOnLoad(init);
</script>
  </head>
  <body>
    <div id="mapDiv"></div>
  </body>
</html>