Community
Select to view content in your preferred language

Sample Code Mashup

840
1
04-11-2011 05:42 PM
WilliamMcBride
by
Emerging Contributor
‎04-11-2011 05:42 PM
I'm trying to use parts of the code from the "Legend With Visible Layers" sample (found in Widgets: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm) and code from the "Editor" sample (found in "Editing") to create a legend in the accordion container that updates its contents depending upon which layers are on or off, but which I can select features from to drop on the the map to create new records (e.g., the location of a recent 911 call).  Is this possible or are these two things too self contained to take pieces from like this?

If this will not work I would like to put the editor feature in another accordion container, but I'm not sure where the editor code should go - should it fit inside of the "init" function or should it go outside by itself? Thank you in advance!
0 Kudos
1 Reply
WilliamMcBride
by
Emerging Contributor
‎04-14-2011 09:49 AM
Hi again,
So I'm still working on this problem, but now I'm just trying to get the editor to show up in a second accordion pane.  So far I have gotten the editable symbols to appear in the legend and on the map, and the editor widget appears (I think) in the bottom accordion pane, however, the editor is not populating with the editable features.  my code is below and I would appreciate any advice.  Thanks!

<!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" />
    <!--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>Updating the legend to display visible layers</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
      #rightPane{
        width:20%;
      }
      #legendPane{
        border: solid #97DCF2 1px;
      }
     .esriEditor .templatePicker{
        padding-bottom:5px;
        padding-top:5px;
      }
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></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.arcgis.utils");
      dojo.require("dijit.form.CheckBox");
      dojo.require("esri.dijit.editing.Editor-all");
     
      var map;
      var legendLayers = [];

      function init() {
       //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to 
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
        //for details on setting up a proxy page.
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
      //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");
       
        var initialExtent = new esri.geometry.Extent({"xmin":-13133288,"ymin":4020012,"xmax":-13016186,"ymax":4090945,"spatialReference":{"wkid":102100}});
        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 basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

         var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer...",         {mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
         id: 'points'
        });

        legendLayers.push({layer:operationsPointLayer,title:'Points'});
       
        var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer",{id:'fire'});

        legendLayers.push({layer:fireLayer,title:"Fire"});
        dojo.connect(map,'onLayersAddResult',function(results){
          var legend = new esri.dijit.Legend({
            map:map,
            layerInfos:legendLayers
          },"legendDiv");
          legend.startup();
        });
        map.addLayers([fireLayer,operationsPointLayer]);

    
       dojo.connect(map,'onLayersAddResult',function(results){

       
        //add check boxes
        dojo.forEach(legendLayers,function(layer){        
         var layerName = layer.title;
         var checkBox = new dijit.form.CheckBox({
            name: "checkBox" + layer.layer.id,
            value: layer.layer.id,
            checked: layer.layer.visible,
            onChange: function(evt) {
              var clayer = map.getLayer(this.value);
              if (clayer.visible) {
                clayer.hide();
              } else {
                clayer.show();
              }
              this.checked = clayer.visible;
            }
          });

          //add the check box and label to the toc
          dojo.place(checkBox.domNode,dojo.byId("toggle"),"after");
          var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:layerName},checkBox.domNode,"after");
           dojo.place("<br />",checkLabel,"after");
        });
     

        });    
        //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm      
        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout( function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
             dojo.connect(map, "onLayersAddResult", initEditing);
      }

  function initEditing(results) {
        var map = this;
        var featureLayerInfos = dojo.map(results, function(result) {
          return {'featureLayer':result.layer};
        });

        var settings = {
          map: map,
          layerInfos:featureLayerInfos
        };

        var params = {settings: settings};

        var editorWidget = new esri.dijit.editing.Editor(params,'editorDiv');
        editorWidget.startup();
      }

      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="Natural Disasters" >
            <span style="padding:10px 0;">Click to toggle the visibilty of the various natural disasters.</span>
            <div id="toggle" style="padding: 2px 2px;"></div>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Add Features" >
            <span style="padding:10px 0;">Click on an icon, then click on map to drop an instance of the icon.</span>
            <div id="editorDiv" ></div>
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
      </div>
    </div>
  </body>

</html>�??
0 Kudos