1 Reply Latest reply on Mar 9, 2012 8:41 AM by flexfun

    Web Mapping Application - Table of Contents and Legend

    flexfun

      Default Table of Contents (TOC) and Legend

       

      Hi folks,

       

      I need help with the TOC Table of Content flex code posted on the arcscript page by Tom Hill at  http://arcscripts.esri.com/details.asp?dbid=15874

       

       

       

       

       

      . I am developing a Flex app outside of the ESRI Flex Viewer. I need to have a  Group Table of Contents (like an accordion TOC) and the legends. I was already able to put together the website with the map, the group TOC and the legend using the esri Legend component. What I need help is with the following:

       

      1 - Have one layer always visible (in my case the county layer)

      2 - Have all the other layers off when another layer (other than the layer that is always visible, the counties layer) is checked on

      3- Have the legend pop up for the layer that is checked on (right now I would have the legend visible for all the layers that are checked on, I just need to have one single for the one layer checked on)

      4- I would just have one legend (for the map that is showing, the only one checked and visible on the TOC  (besides the counties layer that does not need a legend)

       

       

      I am not sure I can upload the files so if you want to look at the files please download from the link above

       

      I am attaching the image of my web application and the script of my main app so far:

       

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:esri="http://www.esri.com/2008/ags" xmlns:maplib="com.esri.maplib.*"

                     

                      xmlns:s="library://ns.adobe.com/flex/spark"

                      pageTitle="Flex TOC Groups Sample"

                      creationComplete="init()" height="1950"

                     

                     

                     

                      >

         

          <!-- Start Declarations -->

         

         

         

         

         

         

          <!-- End Declarations -->

         

       

         

          <mx:Script>

              <![CDATA[

                  import com.esri.ags.layers.Layer;

                 

             

             

                 

                  // A mapping of layer ID to layer label

                  private static const layerLabels:Object =

                      {

                         

                          "ForIndustryOutput": "Industry Output",

                          "ForEmploymentOutput": "Employment Output",

                          "ForLaborOutput": "Labor Output",

                          "ForIndirectBusinessTax": "Indirect Business Tax",

                          "LogIndustryOutput": "Industry Output",

                          "LogEmploymentOutput": "Employment Output",

                          "LogLaborOutput": "Labor Output",

                          "LogIndirectBusinessTax": "Indirect Business Tax",

                          "PrimaryPaperIndustryOutput":"Industry Output",

                          "PrimaryPaperEmploymentOutput": "Employment Output",

                          "PrimaryPaperLaborOutput": "Labor Output",

                          "PrimaryPaperIndirectBusinessTax": "Indirect Business Tax",

                          "PrimarySolidIndustryOutput":"Industry Output",

                          "PrimarySolidEmploymentOutput": "Employment Output",

                          "PrimarySolidLaborOutput": "Labor Output",

                          "PrimarySolidIndirectBusinessTax": "Indirect Business Tax",

                          "SecondaryPaperIndustryOutput":"Industry Output",

                          "SecondaryPaperEmploymentOutput": "Employment Output",

                          "SecondaryPaperLaborOutput": "Labor Output",

                          "SecondaryPaperIndirectBusinessTax": "Indirect Business Tax",

                          "SSecondarySolidIndustryOutput":"Industry Output",

                          "SSecondarySolidEmploymentOutput": "Employment Output",

                          "SSecondarySolidLaborOutput": "Labor Output",

                          "SSecondarySolidIndirectBusinessTax": "Indirect Business Tax",

                          "TotalIndustryOutput":"Industry Output",

                          "TotalEmploymentOutput": "Employment Output",

                          "TotalLaborOutput": "Labor Output",

                          "TotalIndirectBusinessTax": "Indirect Business Tax",

                          "Labels": "Counties"

                         

                         

                      };

                 

                  // A custom layer label function

                  private function layerLabelFunc( layer:Layer ):String

                  {

                      return layerLabels[layer.id];

                  }

                 

                 

                 

              ]]>

          </mx:Script>

         

          <mx:HBox   width="930" height="1280"  id="mapHbox"  horizontalAlign="center" >       

             

             

             

              <mx:VBox  height="480" width="370"  >

                 

                 

                  <mx:Panel

                      width="350" height="100%"

                      color="0x000000"

                      borderAlpha="0.15"

                     

                      >

                     

                     

                     

                      <esri:Map id="map"    openHandCursorVisible="false"

                                height="100%" 

                                logoVisible="false"

                                doubleClickZoomEnabled="false"

                                scrollWheelZoomEnabled="false"

                                zoomSliderVisible="true"

                                scaleBarVisible="false">

                         

                          <esri:extent>           

                              <esri:Extent  xmin="-10800000" ymin="3370000" xmax="-10370000" ymax="4100000">

                                  <esri:SpatialReference wkid="102100"/>        

                              </esri:Extent>       

                          </esri:extent>

                         

                          <!--Total-->

                          <esri:ArcGISDynamicMapServiceLayer name="Total Indirect Business Tax"   id="TotalIndirectBusinessTax" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_TOTALS_indire ct_bus_tax/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer name="Total Labor Output" id="TotalLaborOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_TOTALS_labor_output /MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="TotalEmploymentOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_TOTALS_employment_o utput/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="TotalIndustryOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_TOTALS_industry_out put/MapServer"/>

                         

                          <!-- Secondary Solid Wood Products-->

                          <esri:ArcGISDynamicMapServiceLayer id="SSecondarySolidIndirectBusinessTax" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_secondary_sol id_indirect_bus_tax/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="SSecondarySolidLaborOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_secsolid_labo r_ouptput/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="SSecondarySolidEmploymentOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_secsolid_empl oyment_ouptput/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="SSecondarySolidIndustryOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_secsolid_indu stry_ouptput/MapServer"/>

                         

                          <!-- Secondary Paper and Paperboard-->

                          <esri:ArcGISDynamicMapServiceLayer id="SecondaryPaperIndirectBusinessTax" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_secondary_pap er_indirect_bus_tax/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="SecondaryPaperLaborOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_secondarypape r_labor_ouptput/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="SecondaryPaperEmploymentOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_secondary_pap er_employment_out/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="SecondaryPaperIndustryOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_secondary_pap er_indirect_bus_tax/MapServer"/>

                         

                          <!-- Primary Solid Wood Products-->

                          <esri:ArcGISDynamicMapServiceLayer id="PrimarySolidIndirectBusinessTax" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_primarry_soli d_indirect_bus_tax/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="PrimarySolidLaborOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_primarysolid_ labor_ouptput/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="PrimarySolidEmploymentOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_primarysolid_ employment_out/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="PrimarySolidIndustryOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_primarysolid_ industry_out/MapServer"/>

                         

                          <!-- Primary Paper and Paperboard-->

                          <esri:ArcGISDynamicMapServiceLayer id="PrimaryPaperIndirectBusinessTax" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_primarry_pape r_indirect_bus_tax/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="PrimaryPaperLaborOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_primarypaper_ labor_ouptput/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="PrimaryPaperEmploymentOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_primarypaper_ employment_out/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="PrimaryPaperIndustryOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_primarypaper_ industry_out/MapServer"/>

                         

                          <!-- Logging -->

                          <esri:ArcGISDynamicMapServiceLayer id="LogIndirectBusinessTax" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_logging_indir ect_business_impact/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="LogLaborOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_logging_labor _ouptput/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="LogEmploymentOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_logging_emplo yment_ouptput/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="LogIndustryOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_logging_indus try_ouptput/MapServer"/>

                         

                          <!-- Forestry -->

                          <esri:ArcGISDynamicMapServiceLayer id="ForIndirectBusinessTax" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_forestry_indi rect_bus_tax_nocache/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="ForLaborOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_forestry_labo r_ouptput_nocache/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="ForEmploymentOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_forestry_empl oyment_ouptput_nocache/MapServer"  />

                          <esri:ArcGISDynamicMapServiceLayer id="ForIndustryOutput" visible="false" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_added_forestry_indu stry_ouptput_notcache/MapServer"/>

                         

                         

                          <!-- Counties-->

                          <esri:ArcGISDynamicMapServiceLayer id="Labels" visible="true" url="http://tfs-24279/ArcGIS/rest/services/TFEI_sorted_counties_2009_totals_LABELS2/MapServer"  />

                         

                         

                      </esri:Map>

                  </mx:Panel>

                 

              </mx:VBox>

             

             

         

                 

                 

                  <mx:VBox height="490" width="230"  >

                      <mx:Panel title="Map Content"  >

                          <maplib:TOCAccordion height="450" width="100%" map="{map}" useLayerFadeEffect="true" labelFunction="{layerLabelFunc}">

                              <maplib:categories>

                                  <!-- Each TOC category contains a label and an array of layer IDs. -->

                                  <mx:Object label="Counties" layers="[Labels]"/>

                                  <mx:Object label="Forestry" layers="[ForIndustryOutput, ForEmploymentOutput, ForLaborOutput, ForIndirectBusinessTax]"/>

                                  <mx:Object label="Logging" layers="[LogIndustryOutput, LogEmploymentOutput, LogLaborOutput, LogIndirectBusinessTax]"/>

                                  <mx:Object label="Primary Paper and Paperboard" layers="[PrimaryPaperIndustryOutput, PrimaryPaperEmploymentOutput, PrimaryPaperLaborOutput, PrimaryPaperIndirectBusinessTax]"/>

                                  <mx:Object label="Primary Solid Wood Products" layers="[PrimarySolidIndustryOutput, PrimarySolidEmploymentOutput, PrimarySolidLaborOutput, PrimarySolidIndirectBusinessTax]"/>

                                  <mx:Object label="Secondary Paper and Paperboard" layers="[SecondaryPaperIndustryOutput, SecondaryPaperEmploymentOutput, SecondaryPaperLaborOutput, SecondaryPaperIndirectBusinessTax]"/>

                                  <mx:Object label="Secondary Solid Wood Products" layers="[SSecondarySolidIndustryOutput, SSecondarySolidEmploymentOutput, SSecondarySolidLaborOutput, SSecondarySolidIndirectBusinessTax]"/>

                                  <mx:Object label="Total" layers="[TotalIndustryOutput, TotalEmploymentOutput, TotalLaborOutput, TotalIndirectBusinessTax]"/>

                              </maplib:categories>

                          </maplib:TOCAccordion>

                      </mx:Panel>

                  </mx:VBox>

                 

                  <!--    <mx:VBox   height="5" borderStyle="solid">

                 

                 

                 

                  </mx:VBox>-->

                 

                  <mx:VBox  width="250" height="408"   >

                     

                 

                      <mx:VBox paddingTop="5">

                         

                     

                     

                          <esri:Legend id="myLegend"

                                  

                                   layers="{[ TotalLaborOutput ]}"

                                   map="{map}"

                                   scaleY="0.9"

                                   respectCurrentMapScale="true"

                                   right="5" bottom="10"

                                     

                             

                                   />

                      </mx:VBox>

                     

                  </mx:VBox    >   

       

             

          </mx:HBox>

         

         

                             

      </mx:Application>

       

      mymapwebapp.jpg

      Any help is greatly appreciated! I am new to Flex and ActionScript so I am not sure yet how to implement this! I love Flex ! Thanks!

        • 1. Re: Web Mapping Application - Table of Contents and Legend
          flexfun Level 1

          I believe this is the class file that needs to be changed but I dont know how.

           

          /*

          * Copyright 2009 ESRI

          *

          * All rights reserved under the copyright laws of the United States

          * and applicable international laws, treaties, and conventions.

          *

          * You may freely redistribute and use this sample code, with or

          * without modification, provided you include the original copyright

          * notice and use restrictions.

          *

          * See use restrictions at http://resources.esri.com/help/9.3/usagerestrictions.htm.

          */

          package com.esri.maplib.tocClasses

          {

          import com.esri.ags.layers.TiledMapServiceLayer;

          import com.esri.maplib.controls.CheckBoxIndeterminate;

           

          import flash.events.MouseEvent;

           

          import mx.controls.treeClasses.TreeItemRenderer;

          import mx.controls.treeClasses.TreeListData;

           

          /**

          * A custom tree item renderer for a map Table of Contents.

          */

          public class TocItemRenderer extends TreeItemRenderer

          {

              //--------------------------------------------------------------------------

              //

              //  Variables

              //

              //--------------------------------------------------------------------------

             

              // Renderer UI components

              private var _checkbox:CheckBoxIndeterminate;

             

              // UI component spacing

              private static const PRE_CHECKBOX_GAP:Number = 5;

              private static const POST_CHECKBOX_GAP:Number = 4;

             

              //--------------------------------------------------------------------------

              //

              //  Methods

              //

              //--------------------------------------------------------------------------

             

              /**

               * @private

               */

              override protected function createChildren():void

              {

                  super.createChildren();

                 

                  // Create a checkbox child component for toggling layer visibility.

                  if (!_checkbox)

                  {

                      _checkbox = new CheckBoxIndeterminate();

                      _checkbox.addEventListener(MouseEvent.CLICK, onCheckBoxClick);

                      _checkbox.addEventListener(MouseEvent.DOUBLE_CLICK, onCheckBoxDoubleClick);

                      _checkbox.addEventListener(MouseEvent.MOUSE_DOWN, onCheckBoxMouseDown);

                      _checkbox.addEventListener(MouseEvent.MOUSE_UP, onCheckBoxMouseUp);

                      addChild(_checkbox);

                  }

              }

             

              /**

               * @private

               */

              override protected function commitProperties():void

              {

                  super.commitProperties();

                 

                  if (data is TocItem)

                  {

                      var item:TocItem = TocItem(data);

                     

                      // Set the checkbox state

                      _checkbox.indeterminate = item.indeterminate;

                      // The indeterminate state has visual priority over the selected state

                      _checkbox.selected = item.visible && !item.indeterminate;

                     

                      // Hide the checkbox for child items of tiled map services

                      var checkboxVisible:Boolean = true;

                      if (isTiledLayerChild(item))

                      {

                          checkboxVisible = false;

                      }

                      _checkbox.visible = checkboxVisible;

                     

                      // Apply a bold label style to root nodes

                      if (item.isTopLevel())

                      {

                          setStyle("fontWeight", "bold");

                      }

                      else

                      {

                          setStyle("fontWeight", "normal");

                      }

                  }

              }

             

              /**

               * @private

               */

              override protected function measure():void

              {

                  super.measure();

                 

                  // Add space for the checkbox and gaps

                  if (isNaN(explicitWidth) && !isNaN(measuredWidth))

                  {

                      var w:Number = measuredWidth;

                      w += _checkbox.measuredWidth;

                      w += PRE_CHECKBOX_GAP + POST_CHECKBOX_GAP;

                      measuredWidth = w;

                  }

              }

             

              /**

               * @private

               */

              override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void

              {

                  super.updateDisplayList(unscaledWidth, unscaledHeight);

                 

                  var startx:Number = data ? TreeListData(listData).indent : 0;

                  if (icon)

                  {

                      startx = icon.x;

                  }

                  else if (disclosureIcon)

                  {

                      startx = disclosureIcon.x + disclosureIcon.width;

                  }

                  startx += PRE_CHECKBOX_GAP;

                 

                  // Position the checkbox between the disclosure icon and the item icon

                  _checkbox.x = startx;

                  _checkbox.setActualSize(_checkbox.measuredWidth, _checkbox.measuredHeight);

                  _checkbox.y = (unscaledHeight - _checkbox.height) / 2;

                  startx = _checkbox.x + _checkbox.width + POST_CHECKBOX_GAP;

                 

                  if (icon)

                  {

                      icon.x = startx;

                      startx = icon.x + icon.width;

                  }

                 

                  label.x = startx;

                  label.setActualSize(unscaledWidth - startx, measuredHeight);

              }

             

              /**

               * Whether the specified TOC item is a child of a tiled map service layer.

               */

              private function isTiledLayerChild( item:TocItem ):Boolean

              {

                  while (item)

                  {

                      item = item.parent;

                      if (item is TocMapLayerItem)

                      {

                          if (TocMapLayerItem(item).layer is TiledMapServiceLayer)

                          {

                              return true;

                          }

                      }

                  }

                  return false;

              }

             

              /**

               * Updates the visible property of the underlying TOC item.

               */

                 private function onCheckBoxClick( event:MouseEvent ):void

                 {

                     event.stopPropagation();

                    

                     if (data is TocItem)

                     {

                      var item:TocItem = TocItem(data);

                      item.visible = _checkbox.selected;

                     

                     }

              }

             

              private function onCheckBoxDoubleClick( event:MouseEvent ):void

              {

                  event.stopPropagation();

              }

             

              private function onCheckBoxMouseDown( event:MouseEvent ):void

              {

                  event.stopPropagation();

              }

             

              private function onCheckBoxMouseUp( event:MouseEvent ):void

              {

                  event.stopPropagation();

              }

          }

           

          }