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

vinayb · ‎09-03-2013

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>

JohnGravois · ‎09-03-2013

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.

vinayb · ‎09-03-2013

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

vinayb · ‎09-04-2013

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>