Community
Select to view content in your preferred language

featureLayers in MapServices Drawing REALLY Slow.. Why?

2073
11
10-05-2010 12:22 PM
AlexGray
by
Deactivated User
‎10-05-2010 12:22 PM
I am working on creating an online map using ESRI mapservices as a basemap and existing mapservices on our arcserver.. The problem I am running into is that the mapservices we have here are really slow to draw.. They do draw however.

I have no access the mapservices themselves to change them only to reference them. What might be causing this issue? Below is my unfinished code for the page...

I am working on this using the ESRI Javascript API... Any help is greatly appreciated.

     dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.dijit.Legend"); 
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("esri.arcgis.utils");
      dojo.require("esri.toolbars.navigation");
      dojo.require("dijit.Toolbar");
    
      var mapLayers = [];
      var map;
       var legendLayers = [];
       var navToolbar;
      
       
      function init() {
        var extent = new esri.geometry.Extent({"xmin":-78.21364,"ymin":38.9500003,"xmax":-78.31262,
              "ymax":39.49891569,"spatialReference":{"wkid":4269}});
        map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(extent)});
        dojo.connect(map, "onLoad", initOperationalLayer);
    
        var imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
        map.addLayer(imagery);
        mapLayers.push(imagery);
      
      var usaTopo = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer");
      map.addLayer(usaTopo);
      mapLayers.push(usaTopo);
      
      var worldStreet = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
      map.addLayer(worldStreet);
      mapLayers.push(worldStreet);
      
      
      navToolbar = new esri.toolbars.Navigation(map);
        dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
            
      dojo.connect(map, "onExtentChange", showExtent);
      }
       
       
      function initOperationalLayer(map) {
        var parcelContent = "<br /><b>Owner</b>: ${CAMRAGIS.MLNAM}" +
                      "<br /><b>Rec#</b>: ${PARCEL.RECNUM}" +
           "<br /><b>Acres</b>: ${CAMRAGIS.MACRE#}";
            
           
      var buildingContent = "${ADDRESS}";
      var landuseContent = "${LAND_USE}";
      var zoningContent = "${ZONING}" + 
           "<br />${DESCRIPTIO}";
      
        var parcelInfo = new esri.InfoTemplate("Parcels", parcelContent);
      var buildingInfo = new esri.InfoTemplate("ADDRESS", buildingContent);
      var landuseInfo = new esri.InfoTemplate("Future Land Use", landuseContent);
      var zoningInfo = new esri.InfoTemplate("Zoning", zoningContent);
    
        var parcelLayer = new esri.layers.FeatureLayer("http://gis1.co.frederick.va.us/ArcGIS/rest/services/GeoDoc/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          displayOnPan:false,outFields: ["*"], opacity:.5, tileWidth:50, tileHeight:50, visible:false, maxScale:0, minScale:0,
          infoTemplate: parcelInfo
        });
      
      var streetsLayer = new esri.layers.FeatureLayer("http://gis1.co.frederick.va.us/ArcGIS/rest/services/GeoDoc/MapServer/2",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          displayOnPan:false,outFields: ["*"], opacity:.8, tileWidth:50, tileHeight:50, visible:false, maxScale:0, minScale:0,
          
        });
      
      var buildingsLayer = new esri.layers.FeatureLayer("http://gis1.co.frederick.va.us/ArcGIS/rest/services/GeoDoc/MapServer/13",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          displayOnPan:false,outFields: ["*"], opacity:.8, tileWidth:50, tileHeight:50, visible:false, maxScale:0, minScale:0,
          infoTemplate: buildingInfo
        });
      
      var landuseLayer = new esri.layers.FeatureLayer("http://gis1.co.frederick.va.us/ArcGIS/rest/services/GeoDoc/MapServer/20",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          displayOnPan:false,outFields: ["*"], opacity:.8, tileWidth:50, tileHeight:50, visible:false, maxScale:0, minScale:0,
          infoTemplate: landuseInfo
        });
      
      var zoningLayer = new esri.layers.FeatureLayer("http://gis1.co.frederick.va.us/ArcGIS/rest/services/GeoDoc/MapServer/17",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          displayOnPan:false,outFields: ["*"], opacity:.8, tileWidth:50, tileHeight:50, visible:false, minScale:0,
          infoTemplate: zoningInfo
        });
      
      map.addLayer(parcelLayer);
      map.addLayer(streetsLayer);
      map.addLayer(buildingsLayer);
      map.addLayer(landuseLayer);
      map.addLayer(zoningLayer);
           
        
        map.infoWindow.resize(200,150);
        
      mapLayers.push(parcelLayer);
      mapLayers.push(streetsLayer);
      mapLayers.push(buildingsLayer);
      mapLayers.push(landuseLayer);
      mapLayers.push(zoningLayer);
      
      
      legendLayers.push({layer:parcelLayer,title:"Parcels"});
      legendLayers.push({layer:streetsLayer,title:"Streets"});
      legendLayers.push({layer:buildingsLayer,title:"Buildings"});
      legendLayers.push({layer:landuseLayer,title:"Future Land Use"});
      legendLayers.push({layer:zoningLayer,title:"Zoning"});
      
       
      dojo.connect(map,'onLayersAddResult',function(results){
          var legend = new esri.dijit.Legend({
            map:map,
            layerInfos:legendLayers
          },"legendDiv");
          legend.startup();
        });        
     }
    
      function layerVisibility(layer) {
        (layer.visible) ? layer.hide() : layer.show();
      }
       
       function extentHistoryChangeHandler() {
        dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }
       
       function showExtent(ext){
      var s = "";
       s = "XMin: " + ext.xmin.toFixed(2) +
          " YMin: " + ext.ymin.toFixed(2) +
          " XMax: " + ext.xmax.toFixed(2) +
          " YMax: " + ext.ymax.toFixed(2);
      dojo.byId("onExtentChangeInfo").innerHTML = s;
          }
    
      dojo.addOnLoad(init);
     
    
0 Kudos
11 Replies
AlexGray
by
Deactivated User
‎10-12-2010 11:57 AM
My 1 cent: I don't use the "Pan" Button in the Navigation Toolbar. I rename the "Deactivate" to "Pan" because in most cases you will be in the standard map-navigation mode after navToolbar.deactivate(). Depends on the specific implementation but I guess in most cases, you are.

Otherwise the user doesn't understand the logic behind that "Deactivate" button. 😉


Axxl,

thanks for the suggestion.. I went ahead and took care of that.. although, it won't so until the webmaster updates the file.. probably later in the week...
0 Kudos
AlexGray
by
Deactivated User
‎10-12-2010 12:09 PM
Here is my two cents:


  • Don't load claro and tundra css files unless you absolutely need both

  • Since you are hosting your own services make sure you're using MSD (not mxd) based services

  • Don't display so much data on initial load, it's pretty busy and takes too long to load

  • Since you're using ESRI's basemap make sure your data is in the same projection or it will take forever to display since it has to be reprojected.

  • Clicking a link to turn a service on or off doesn't work well, use a check box or radio button


On a more positive note, it looks good, I like the layout you're using and you've done a great job for someone just starting out. Keep up the good work.

Glen



Glen,

Thanks for the suggestions.. I changed my links to checkboxes.. that seems like a much better idea.. now I am trying to figure out how to keep the layers from drawing unless I click on a checkbox.. the code I have configured is still drawing the layers before hand.. the checkboxes work great accept they work in reverse.. when checked the layer turns on.. etc..

Sorry, can't provide a link at this time as the webmaster has to load the files on the webserver..

I looked into using the MSD file type but we don't have 9.3.1 installed and I don't have ArcGis Server access, we are currently using 9.3.

here a section of the code.. Maybe you can see what I am missing?



//Use the ImageParameters to set the visible layers in the map service during ArcGISDynamicMapServiceLayer construction.
        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = [7, 6, 1, 2, 3, 4, 8];
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
        //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE
  
    
    var initialExtent = new esri.geometry.Extent({
     "xmin": -8746396.760545,
     "ymin": 4719239.393535,
     "xmax": -8683358.936355,
     "ymax": 4791953.233965,
     "spatialReference": {
      "wkid": 102113
     }
    });
    map = new esri.Map("map", {
     extent: initialExtent
    });
    
    //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
    var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", {
     id: 'ESRI_World_Topo'
    });
    map.addLayer(initBasemap);
    
    dojo.connect(map,'onLoad',function(theMap){
            var scalebar = new esri.dijit.Scalebar({
               map: map,
               scalebarUnit: "english"
              }, dojo.byId("scalebar"));
          });
      
    var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.co.frederick.va.us/ArcGIS/rest/services/Fire_and_Rescue/Fire_and_Rescue/MapServer", {
     id: 'FireRescue',     
     "imageParameters":imageParameters
    });
    fireLayer.setVisibleLayers([3, 7]);    
    legendLayers.push({
     layer: fireLayer,
     title: "Fire Rescue Layers"
    });
    
    var patLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.co.frederick.va.us/ArcGIS/rest/services/Planning/Planning_PAT/MapServer", {
     id: 'PAT',
     opacity: .6,
     "imageParameters":imageParameters
    });
    patLayer.setVisibleLayers([3, 6, 1, 2, 4, 7, 8]);    
    legendLayers.push({
     layer: patLayer,
     title: 'Planning Layers'
    });
    
    dojo.connect(map, 'onLayersAddResult', function(results){
     var legend = new esri.dijit.Legend({
      map: map,
      layerInfos: legendLayers
     }, "legendDiv");
     legend.startup();
    });
    
    
    
    navToolbar = new esri.toolbars.Navigation(map);
    dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
    
    createBasemapGallery();
    dojo.connect(dijit.byId('map'), 'resize', resizeMap);
    
        
    dojo.byId("toggle").innerHTML += "<span>Planning Layers:</span><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'onclick=\"JavaScript:toggleSubLayer('PAT',7)\">Urban Development Area</A><br />";
    
    dojo.byId("toggle").innerHTML += "<input type='checkbox'onclick=\"JavaScript:toggleSubLayer('PAT',1)\">Zoning</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'onclick=\"JavaScript:toggleSubLayer('PAT',2)\">Agricultural & Forestal Districts</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'onclick=\"JavaScript:toggleSubLayer('PAT',3)\">Buildings</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'onclick=\"JavaScript:toggleSubLayer('PAT',4)\">Future Land Use</A><br />";
    
    dojo.byId("toggle").innerHTML += "<input type='checkbox'onclick=\"JavaScript:toggleSubLayer('PAT',6)\">Sewer & Water Service Area</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'onclick=\"JavaScript:toggleSubLayer('PAT',8)\">County Boundary</A><br /><br />";
    dojo.byId("toggle").innerHTML += "<span>Service Layers:</span><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'onclick=\"JavaScript:toggleSubLayer('FireRescue',3)\">Fire Stations</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'onclick=\"JavaScript:toggleSubLayer('FireRescue',7)\">Hydrants</A><br />";
    
    map.addLayers([fireLayer, patLayer]);  
   
   function toggleSubLayer(layerId, subLayerId) {
   var layer = map.getLayer(layerId);
    if(layer && layer.visibleLayers) {
   var visibleLayers = layer.visibleLayers;
   var layerIndex = dojo.indexOf(visibleLayers, subLayerId);
    if(layerIndex === -1) {
     visibleLayers.push(subLayerId);
    } else {
     visibleLayers.splice(layerIndex, 1);
    }
  visibleLayers = (visibleLayers.length > 0) ? visibleLayers : [-1];
  layer.setVisibleLayers(visibleLayers);
  }
 }
  function extentHistoryChangeHandler() {
        dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }
   

   
      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro" >
  <div class="tundra" id="navToolbar" dojoType="dijit.Toolbar" style="width: 100%;">
    <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); selected=true; ">Zoom In</div>
    <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
    <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToStartExtent();">Full Extent</div>
    <div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
    <div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
    <!-- <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div> -->
    <div dojoType="dijit.form.Button" id="deactivate" iconClass="panIcon" onClick="navToolbar.deactivate()">Pan</div>
  </div>
  <div style="position:absolute; right:70px; top:10px; z-Index:999;">
        <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="false">
          <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
          <div id="basemapGallery" ></div></div>
        </div></div>
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
      <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">       
        <div dojoType="dijit.layout.AccordionContainer">
          <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend"  selected="false">
            <div id="legendDiv"></div>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Frederick County GIS Layers" selected="true">
            <span style="padding:10px 0;">Click to toggle the visibilty of different Layers.</span><br /><br />
            <div id="toggle" style="padding: 2px 2px; font-size:10px;"></div>   
          </div>
    <div dojoType="dijit.layout.ContentPane" title="Search Tools" selected="false">
   <span style="padding:10px 0;">Coming Soon!</span>
   
     PIN Lookup: <input type="text" id="PARCELID" size="30" value="54    A    25" />
     <input type="button" value="Search" onclick="doFind();" /><br />
     <div id="loading"><img src="http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/images/loading.gif" /></div>
   </div>    
        </div>
      </div>   
      <div id="map" dojotype="dijit.layout.ContentPane" style="width: 77%; height: 85%;" region="center" style="overflow:hidden;">
      </div>
   <div id="scalebar" style="position:absolute;left:15px;top:84%;"></div>
   <div dojotype="dijit.layout.ContentPane" region="bottom" style="position:absolute;left:5px;top:88%;height:10%;width:77%">
    <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowsPerPage="4" rowSelector="10px">
      <thead>
        <tr>
          <th field="RECNUM" width="15%">PIN</th>
          <th field="MLNAM" width="15%" >Owner 1</th>
          <th field="MFNAM" width="15%">Owner 2</th>
          <th field="MADD1" width="25%">Mailing Address</th>
          <th field="MADD2" width="30%">Zip</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
  </body>

</html>
0 Kudos