maryandrews

where to put map.addLayer(featureLayer);

Discussion created by maryandrews on May 11, 2012
Latest reply on May 15, 2012 by DSwingley-esristaff
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>

Outcomes