Adding Feature Layer hangs browser

1.9k views Asked by At

When I create map object using ArcGISDynamicMapServiceLayer then things work fine but since I need lot of graphics and want to handle user interactions on map so I want to feature layer to my map but when I add feature layer the browser hangs.

Please let me know what could be the issue how can I avoid feature layer from hanging from my machine. Can I add onclick mouse over functionality for ArcGISDynamicMapServiceLayer Below is the code

map = new esri.Map("map");
              var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.32.9.106:6080/arcgis/rest/services/Administrative_Maps/World_Countries_v1/MapServer");
              map.addLayer(layer);
              var url = "http://10.32.9.106:6080/arcgis/rest/services/Administrative_Maps/World_Countries_v1/MapServer/0";
              var info_content = "<table><tr><td><b>COUNTRY :</b></td><td style='text-align:right'>${COUNTRY}</td></tr></table>";
              var infoTemplate1 = new esri.InfoTemplate("${COUNTRY}", info_content);
              var fl = new esri.layers.FeatureLayer(url, {
                id: "world-regions",
                infoTemplate: infoTemplate1
              });
               map.addLayer(fl);

MY HTML CODE Is below

<!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>
    dojo.require("esri.map");
    dojo.require("esri.layers.FeatureLayer");
    dojo.require("esri.tasks.QueryTask");


    var map;
    function init(){
          try{
              map = new esri.Map("map");
              var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.32.9.106:6080/arcgis/rest/services/Administrative_Maps/World_Countries_v1/MapServer");
              map.addLayer(layer);
              var url = "http://10.32.9.106:6080/arcgis/rest/services/Administrative_Maps/World_Countries_v1/MapServer/0";
              var info_content = "<table><tr><td><b>COUNTRY :</b></td><td style='text-align:right'>${COUNTRY}</td></tr></table>";
              var infoTemplate1 = new esri.InfoTemplate("${COUNTRY}", info_content);
              var fl = new esri.layers.FeatureLayer(url, {
                id: "world-regions",
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                autoGeneralize :true,
                allowGeometryUpdates:false,
                infoTemplate: infoTemplate1,
                outFields: ["COUNTRY"]
              });

                dojo.connect(fl, "onLoad", function(){
                console.log(" adding feature layer");




                  fl.setAutoGeneralize(true)
                  map.addLayer(fl);
                  console.log("allowGeometryUpdates "+fl.allowGeometryUpdates);
                console.log("editable "+fl.isEditable());

                console.log("autoGeneralize"+fl.autoGeneralize);
                console.log("geometryType"+fl.geometryType);
                console.log("graphics"+fl.graphics);
                console.log("defaultVisibility "+fl.hasAttachments);

                });


                var queryTask = new esri.tasks.QueryTask(url);

                        //build query filter
                        var query = new esri.tasks.Query();
                        query.returnGeometry = true;
                        query.where = "COUNTRY='India'";
                        infoTemplate = new esri.InfoTemplate("Alert", "Alert for Re-insurance");
                        dojo.connect(queryTask, "onComplete", function(featureSet) {
                            alert('calling queryTask'+featureSet);
                            //map.graphics.clear();
                                try{
                                    /*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]));
                                    alert('somethign');*/

                                    var symbol0 = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255, 0, 0, 0.9]));

                                    //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.
                                    dojo.forEach(featureSet.features,function(feature){
                                        alert('feature'+feature);
                                        var graphic = feature;
                                        graphic.setSymbol(symbol0);
                                        alert("infoTemplate"+infoTemplate);
                                        graphic.setInfoTemplate(infoTemplate);
                                        alert("graphic"+graphic);
                                        alert("map.graphics"+map.graphics);
                                        map.graphics.add(graphic);

                                });
                            }catch(e){
                              alert("e"+e);
                            }
                        });
                    queryTask.execute(query);


                    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) {
                       console.log(" on click method");
                        // clears current selection
                       map.graphics.clear();

                        // create new graphic with selected graphic's geometry
                        alert("evt.graphic.geometry "+evt.graphic.geometry);
                        var graphic = new Graphic(evt.graphic.geometry);
                        alert("graphic "+graphic);
                        // create a new symbol for the graphic
                        var symbol0 = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255, 0, 0, 0.9]));

                        // add symbol to the graphic
                        graphic.setSymbol(symbol0);     

                        // add the graphic to the map   
                        map.graphics.add(graphic);
                    });
                });
              } catch(e){
              console.log(" exception occured"+e);
          }
    }
    dojo.addOnLoad(init);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
1

There are 1 answers

4
frett27 On

The trouble is nearly to come with the amount of data retrieved by the browser and displayed. FeatureLayer is limited in number of detailed features displayed at once.

But the server is helpful at this point, you ask the server to generalize on the fly the geometries. This reduce a lot the geometry volume depending on the scale.

in your code, you can use the setAutoGeneralize(enable) to true on the FeatureLayer. you can also set a minsccale and maxscale of the feature layer to avoid display the scales on which you have a lot of geometries.

Documentation on FeatureLayer, and setAutoGeneralize method/option

autoGeneralize option in constructor :

autoGeneralize Enable or disable the auto generalization of features from a non-editable layer in on-demand mode. When true, the layer uses the current map resolution as the maxAllowableOffset for all queries issued to the server. The default value is true. As of v2.7

by using this code to choose the generalization parameter (max allowableOffset), could reduce the amont of datas transferred to the browser, and gaining in user experience.

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

    var map;

     require(["dojo/on","esri/config", "esri/map", "dojo/domReady!","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer","esri/InfoTemplate" ], function(on,config, Map,Ready,ArcGISDynamicMapServiceLayer,FeatureLayer,InfoTemplate) {

    config.defaults.io.alwaysUseProxy = true;
    config.defaults.io.proxyUrl = "/proxy.jsp";
    config.defaults.io.corsEnabledServers.push("sampleserver1.arcgisonline.com");

        map = new Map("map", { lods : [ 
    {"level" : 0, "resolution" : 0.010986328125, "scale" : 4617149.97766929},
    {"level" : 1, "resolution" : 0.0054931640625, "scale" : 2308574.98883465},
    {"level" : 2, "resolution" : 0.00274658203125, "scale" : 1154287.49441732},
    {"level" : 3, "resolution" : 0.001373291015625, "scale" : 577143.747208662},
    {"level" : 4, "resolution" : 0.0006866455078125, "scale" : 288571.873604331}
     ]
        });
      var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
              map.addLayer(layer);
        layer.setVisibility(false);
              var url = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3";
              var info_content = "<table><tr><td><b>COUNTRY :</b></td><td style='text-align:right'>${COUNTRY}</td></tr></table>";
              var infoTemplate1 = new InfoTemplate("${STATE_NAME}", info_content);
              var fl = new FeatureLayer(url, {
                id: "usa-regions",
                mode: FeatureLayer.MODE_ONDEMAND,
        autoGeneralize:false,
                allowGeometryUpdates:false,
                infoTemplate: infoTemplate1,
                outFields: ["STATE_NAME"],
        maxAllowableOffset : 0.02
              });
    on(map,"zoom-end", function(evt)
        {
            fl.setMaxAllowableOffset(evt.extent.getWidth() / 400); 

        });
    map.addLayer(fl);

      });

    </script>
  </head>
  <body>
    <div id="elements"></div>
    <div id="map"></div>
  </body>
</html>