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

Question

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

Rest Service

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>

Hi Anil, you really want to edit the world countries? that would be the use case for feature service. perhaps just the attributes. I could understand. even though you have few attributes the polygons are probably quite detailed. You might consider using different services for different zoom levels. Perhaps even a cached service that is used for the display until editing and zoomed in. esri has some documents you can find on best practices for caching and dynamic layer display — Brad Nesom, Sep 3 '13 at 15:08
We have to handle a lot of client side interactions , user clicks on country then we have to highlight it , this is all done through Javascript api so i may need feature service, can this be achieved with other layers.I am new to ArcGis hence finding it diffcult , hoping to find some help from u experts here — Anil, Sep 3 '13 at 15:12
Unless you need to know exact coordinates of the features (each vertex) or do editing you want to use a map service. resources.arcgis.com/en/help/main/10.1/#/… Also you can still get access (for highlighting through a cached service or even through wfs). google.com/#q=best%20practices%20arcgis%20server — Brad Nesom, Sep 3 '13 at 15:20
Thanks for suggestion , I dont need exact coordinates of feature , the rest service of feature layers gives me COUNTRY name which i can use to query and highlight a particular country but i am not understanding your point on "Also you can still get access (for highlighting through a cached service or even through wfs)" can you please elaborate do i have to make use of some other services like tiles layer please let me know — Anil, Sep 3 '13 at 15:25
@BradNesom could you please share more light on cache service, however i have resolved issue 70% and have posted changes as answere , please let me know what else i can do — Anil, Sep 4 '13 at 13:28

blord-castillo · Accepted Answer · 2013-09-03 16:42:22Z

3

If using MODE_ONDEMAND with autoGeneralize:true, then you should remove maxAllowableOffset and let the api set the default based on map resolution.

But also, if you only have 220 features, try using MODE_SNAPSHOT instead of MODE_ONDEMAND. Initial load will be slower, but your overall performance should probably be better.

Adding code samples as an edit:

Option 1

  var fl = new FeatureLayer(url, {
    id: "world-regions",
    mode: FeatureLayer.MODE_ONDEMAND,
    autoGeneralize :true,
    outFields: ["*"],
    infoTemplate: template //No reason to comment this out
  });

Option 2

  var fl = new FeatureLayer(url, {
    id: "world-regions",
    mode: FeatureLayer.MODE_SNAPSHOT,
    outFields: ["*"],
    infoTemplate: template
  });

Also, try seeing if you can get the layer to load properly without your onClick. You may be running into a problem because you are defining the onClick before you add the layer to the map?

edited Sep 3 '13 at 16:42

answered Sep 3 '13 at 14:59

blord-castillo

6,22715 silver badges41 bronze badges

I removed MODE_ONDEMAND and autoautoGeneralize and added MODE_SNAPSHOT , now i am not able to see the map i get LOG: dojo.io.script error[object Error] – Anil Sep 3 '13 at 15:09
since you are loading FeatureLayer as an AMD module, try using 'FeatureLayer.MODE_SNAPSHOT' in your object constructor instead of 'esri.layers.FeatureLayer.MODE_SNAPSHOT' – John Gravois Sep 3 '13 at 16:02
Thanks for suggestion , but problem in FF works fine but IE still hangs – Anil Sep 4 '13 at 4:36
When i use option 1 things work fine in FF but IE still hangs but when i use option 2 does not work anywhere – Anil Sep 4 '13 at 4:49
@blord-castillo I tried SnapShot it did work better then onDEMAND but still can you please share more light on how i can resolve the issue , now i am able to render in IE but when zooming or on click i facing issue . – Anil Sep 4 '13 at 13:29

add a comment |

Anil · Accepted Answer · 2013-09-05 10:07:48Z

I have able to resolve this to some extent by changing the coded , I loaded the base map usign ArcGISDynamicMapServiceLayer then i added the feature layer .Now in IE it map loads but when i zoom it hangs.Is there any solution for this.I dont know much about cache service how can i use it with feature layer or is it completly different service.Please help Below is modified code

<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_SNAPSHOT,
        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>

Using a wms you can getfeatureinfo see an example.
the best practices search has a few of the tricks I have seen. Creating a cached map, then capturing the click coordinates to return features within a buffer, using wms or wfs. The best practices is clear that using dynamic layers (large ones) and allowing them to zoom to extents is not good for performance.
Another method is to generalize the data layer and create a (dynamic service), using several levels (just like a cache pyramid) and show only the appropriate layer as you zoom in or out.

Cache Service

Map Name: Layers

Legend

All Layers and Tables

Dynamic Legend

Dynamic All Layers

Layers:

    WorldCountries_50K (0)
    WorldCountries_100K (1)
    WorldCountries_250K (2)
    WorldCountries_500K (3)

Description:

Copyright Text:

Spatial Reference: 102100  (3857)


Single Fused Map Cache: true

Tile Info:

    Height: 256
    Width: 256
    DPI: 96
    Levels of Detail: 20
        Level ID: 0 [ Start Tile, End Tile ]
            Resolution: 156543.03392800014
            Scale: 5.91657527591555E8
        Level ID: 1 [ Start Tile, End Tile ]
            Resolution: 78271.51696399994
            Scale: 2.95828763795777E8
        Level ID: 2 [ Start Tile, End Tile ]
            Resolution: 39135.75848200009
            Scale: 1.47914381897889E8
        Level ID: 3 [ Start Tile, End Tile ]
            Resolution: 19567.87924099992
            Scale: 7.3957190948944E7
        Level ID: 4 [ Start Tile, End Tile ]
            Resolution: 9783.93962049996
            Scale: 3.6978595474472E7
        Level ID: 5 [ Start Tile, End Tile ]
            Resolution: 4891.96981024998
            Scale: 1.8489297737236E7
        Level ID: 6 [ Start Tile, End Tile ]
            Resolution: 2445.98490512499
            Scale: 9244648.868618
        Level ID: 7 [ Start Tile, End Tile ]
            Resolution: 1222.992452562495
            Scale: 4622324.434309
        Level ID: 8 [ Start Tile, End Tile ]
            Resolution: 611.4962262813797
            Scale: 2311162.217155
        Level ID: 9 [ Start Tile, End Tile ]
            Resolution: 305.74811314055756
            Scale: 1155581.108577
        Level ID: 10 [ Start Tile, End Tile ]
            Resolution: 152.87405657041106
            Scale: 577790.554289
        Level ID: 11 [ Start Tile, End Tile ]
            Resolution: 76.43702828507324
            Scale: 288895.277144
        Level ID: 12 [ Start Tile, End Tile ]
            Resolution: 38.21851414253662
            Scale: 144447.638572
        Level ID: 13 [ Start Tile, End Tile ]
            Resolution: 19.10925707126831
            Scale: 72223.819286
        Level ID: 14 [ Start Tile, End Tile ]
            Resolution: 9.554628535634155
            Scale: 36111.909643
        Level ID: 15 [ Start Tile, End Tile ]
            Resolution: 4.77731426794937
            Scale: 18055.954822
        Level ID: 16 [ Start Tile, End Tile ]
            Resolution: 2.388657133974685
            Scale: 9027.977411
        Level ID: 17 [ Start Tile, End Tile ]
            Resolution: 1.1943285668550503
            Scale: 4513.988705
        Level ID: 18 [ Start Tile, End Tile ]
            Resolution: 0.5971642835598172
            Scale: 2256.994353
        Level ID: 19 [ Start Tile, End Tile ]
            Resolution: 0.29858214164761665
            Scale: 1128.497176
    Format: PNG32
    Compression Quality: 0.0
    Origin: X: -2.0037508342787E7
    Y: 2.0037508342787E7
    Spatial Reference: 102100  (3857)

Initial Extent:

    XMin: -2.6548096424178407E7
    YMin: -1.4376721731989654E7
    XMax: 2.204125777392E7
    YMax: 2.400182614911706E7
    Spatial Reference: 102100  (3857)

Full Extent:

    XMin: -2.2041257773920003E7
    YMin: -3.578420532071707E7
    XMax: 2.204125777392E7
    YMax: 2.400182614911706E7
    Spatial Reference: 102100  (3857)

Units: esriMeters

Supported Image Format Types: PNG32,PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,BMP

Document Info:

    Title:
    Author:
    Comments:
    Subject:
    Category:
    Keywords:
    AntialiasingMode: Fast
    TextAntialiasingMode: Force

Supports Dynamic Layers: true

MaxRecordCount: 1000

MaxImageHeight: 2048

MaxImageWidth: 2048

Supported Query Formats: JSON, AMF

Min Scale: 5.91657527591555E8

Max Scale: 1.8489297737236E7

MY code to access is basically same but urls are different even though we have 4 layers i currently loading currently 1 layer as my feature layer .Please let me know what is wrong.OR wha

var     featureLayer1 = new esri.layers.FeatureLayer("http://10.32.9.106:6080/arcgis/rest/services/Administrative_Maps/World_Countries_v3_WMS_v1/MapServer/0",{
         mode: esri.layers.FeatureLayer.ONDEMAND ,
        infoTemplate: infoTemplate1,
          maxAllowableOffset: 443950.6635571685,
        id: "sd_neighborhoods"
    });

Problem is I dont know how to do that i am 1 week into esri without training i learnt most stuff online ,Ofcourse i have desktop team who can help with shape file or services.We have created cache service but now onclick event is not working .Its is basically same code as my answere i have posted the new cache services in my answer please check — Anil, Sep 5 '13 at 10:07
@Brad Nesom i was able to call onclick of feature layer but now even tough the map loads faster i hangs when i click on the country — Anil, Sep 6 '13 at 14:33

Stack Exchange Network

current community

your communities

more stack exchange communities

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

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged arcgis-server arcgis-javascript-api dojo arcgis-online-basemaps or ask your own question.

Hot Network Questions

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

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged arcgis-server arcgis-javascript-api dojo arcgis-online-basemaps or ask your own question.

Related

Hot Network Questions