topic Re: where to put map.addLayer(featureLayer); in ArcGIS JavaScript Maps SDK Questions

where to put map.addLayer(featureLayer);

maryandrews — Fri, 11 May 2012 19:37:46 GMT

I am trying to get both a pop-up and legend but can only get one to work at a time depending on where I put map.addLayer(featureLayer);

The code below shows the problem in my comment. If anyone has a suggestion I would greatly appreciate it!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the
    samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>
     City of San Luis Obispo CAPITAL IMPROVEMENT PROJECTS
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css"/>
 
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{
      padding: 20px 20px; } #map{ padding:0;}
   #rightPane{
  width:20%;
  }
  #legendPane{
   border: solid #97DCF2 1px;
   }
   
    </style>
    <script type="text/javascript">
      var dojoConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
    <script type="text/javascript">
      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("esri.dijit.Popup");
   dojo.require("esri.dijit.Legend");

      var map;

      function init() {
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  //setup the map's initial extent (World View)
        var initExtent = new esri.geometry.Extent({
              "xmin":-13440283.392,
              "ymin":4195625.999,
              "xmax":-13424995.986,
              "ymax":4207091.553,
              "spatialReference":{"wkid":102100}
            });
         
        //define custom popup options
        var popupOptions = {
          'markerSymbol': new esri.symbol.SimpleMarkerSymbol('circle', 32, null, new dojo.Color([0, 0, 0, 0.25])),
          'marginLeft': '20', 
          'marginTop': '20'
        };
        //create a popup to replace the map's info window
        var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));
        
        map = new esri.Map("map", {
          extent: initExtent,
          infoWindow: popup
        });


        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);
        
        
        //define a popup template
        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "CIP Project Info",
          fieldInfos: [
          {fieldName: "JOBNAME", visible: true, label:"ID"},
          {fieldName: "DESC", visible:true, label:"Description"},
    {fieldName: "START", visible:true, label:"Start Date" ,format:{dateFormat:'shortDateShortTime'}}
          ],
          showAttachments:true
        });
  
        //create a feature layer based on the feature collection
        var featureLayer = new esri.layers.FeatureLayer("http://mapserver/ArcGIS/rest/services/online/CIP/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          infoTemplate: popupTemplate,
          outFields: ['JOBNAME',"DESC","START",'TYPE']
        });
        featureLayer.setDefinitionExpression("TYPE != ''");
        
        dojo.connect(featureLayer,"onClick",function(evt){
           map.infoWindow.setFeatures([evt.graphic]);
        });
        //if this is herar the layer works
  //map.addLayer(featureLayer);
          
            
        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
  
      //add the legend
        dojo.connect(map,'onLayersAddResult',function(results){
          var layerInfo = dojo.map(results, function(layer,index){
            return {layer:layer.layer,title:layer.layer.name};
          });
          if(layerInfo.length > 0){
            var legendDijit = new esri.dijit.Legend({
              map:map,
              layerInfos:layerInfo
            },"legendDiv");
            legendDijit.startup();
          }
        });
   
   
  //if this is herar the legend works
  map.addLayer(featureLayer);
      }
   
   
 // should this be  dojo.addOnLoad(init);
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
     <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="true" >
            <div id="legendDiv"></div>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Pane 2" >
            This pane could contain tools or additional content
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> 
      </div> 
    </div> 
  </body>

</html>

Re: where to put map.addLayer(featureLayer);

derekswingley1 — Fri, 11 May 2012 19:51:42 GMT

Hi Mary,

Is the end goal to create a legend for your feature layer?

Re: where to put map.addLayer(featureLayer);

derekswingley1 — Mon, 14 May 2012 22:11:44 GMT

How slow is slow?

I'm running the code locally in chrome and it's pretty snappy�?? I'm seeing anywhere from .5s - 1.5s for the page to load.

Re: where to put map.addLayer(featureLayer);

maryandrews — Tue, 15 May 2012 15:03:03 GMT

8 to 10 seconds, which doesn't sound long but it sure feels long!

Re: where to put map.addLayer(featureLayer);

derekswingley1 — Tue, 15 May 2012 15:46:20 GMT

8 to 10 seconds, which doesn't sound long but it sure feels long!

That is definitely a long time in the context of a web site�?? probably feels like an eternity.

Can you look into which request(s) are slow? You can see timing information in developer tools that come with chrome or firebug.

Re: where to put map.addLayer(featureLayer);

maryandrews — Sun, 12 Dec 2021 05:41:16 GMT

The end goal is to have a javascript website with both a legend and popups working.
I have code working now but for some reason the response is extremely slow.

Here is the code that gives me both but with extremely slow load time:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
  <!--The viewport meta tag is used to improve the presentation and behavior of the
  samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>
   City of San Luis Obispo CAPITAL IMPROVEMENT PROJECTS
  </title>
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css"/>

  <style>
   html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{
   padding: 20px 20px; } #map{ padding:0;}
  #rightPane{
  width:20%;
  }
  #legendPane{
   border: solid #97DCF2 1px;
   }

  </style>
  <script type="text/javascript">
   var djConfig = {
    parseOnLoad: true
   };
  </script>
  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
  <script type="text/javascript">
   dojo.require("dijit.layout.BorderContainer");
   dojo.require("dijit.layout.ContentPane");
   dojo.require("dijit.layout.AccordionContainer");
   dojo.require("esri.map");
   dojo.require("esri.dijit.Legend");
   dojo.require("esri.layers.FeatureLayer");
   dojo.require("esri.dijit.Popup");

   var map;

   function init() {
    esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
    
    // setup the map's initial extent (World View)
    var initExtent = new esri.geometry.Extent({
       "xmin":-13440283.392,
       "ymin":4195625.999,
       "xmax":-13424995.986,
       "ymax":4207091.553,
       "spatialReference":{"wkid":102100}
      });

    // define custom popup options
    var popupOptions = {
     'markerSymbol': new esri.symbol.SimpleMarkerSymbol('circle', 32, null, new dojo.Color([0, 0, 0, 0.25])),
     'marginLeft': '20',
     'marginTop': '20'
    };
    

    // define a popup template
    var popupTemplate = new esri.dijit.PopupTemplate({
     title: "CIP Project Info",
     fieldInfos: [
     {fieldName: "JOBNAME", visible: true, label:"ID"},
     {fieldName: "DESC", visible:true, label:"Description"},
     {fieldName: "START", visible:true, label:"Start Date" ,format:{dateFormat:'shortDateShortTime'}}
     ],
     showAttachments:true
    });
    
    // create a popup to replace the map's info window
    var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));

    map = new esri.Map("map", {
     extent: initExtent,
     infoWindow: popup
    });


    // Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
    map.addLayer(basemap);


    // create a feature layer based on the feature collection
    var featureLayer = new esri.layers.FeatureLayer("http://mapping.slocity.org/ArcGIS/rest/services/online/CIP/MapServer/0", {
     mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
     infoTemplate: popupTemplate,
     outFields: ['*']//'JOBNAME',"DESC","START",'TYPE']
    });
    featureLayer.setDefinitionExpression("TYPE != ''");
    
    var legendDijit = 0;
    
    // add the legend
    dojo.connect(map,'onLayerAddResult', function(results){
     if (legendDijit == 1) {
       legendDijit = new esri.dijit.Legend({
       map:map,
       layerInfos: [{ layer:featureLayer, title: featureLayer.name }]
      },"legendDiv");
      
      legendDijit.startup();
     }
     else 
      legendDijit = 1;
    });
     
    map.addLayer(featureLayer);

    dojo.connect(featureLayer,"onClick",function(evt){
      map.infoWindow.setFeatures([evt.graphic]);
    });

    dojo.connect(map, 'onLoad', function(theMap) {
     //resize the map when the browser resizes
     dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
    });

   }


   dojo.addOnLoad(init);
  </script>
 </head>
 <body class="claro">

   <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="true" >
      <div id="legendDiv"></div>
     </div>
     <div dojoType="dijit.layout.ContentPane" title="Pane 2" >
      This pane could contain tools or additional content
     </div>
    </div>
   </div>
   <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
   </div>
  </div>
 </body>

</html>