AnsweredAssumed Answered

Open first ContentPane in AccordionContainer

Question asked by ghilton on Jul 25, 2016
Latest reply on Jul 26, 2016 by ghilton

This is a follow up to a question I asked earlier today. I'm trying to open a Content Pane with an AccordionContainer and Content Panes which are not visible when the application opens; while making sure the first Content Pane in the Accordion Container is opened.  The answer for the question I asked earlier was answered correctly by Robert Scheitlin in this thread:  https://community.esri.com/message/623381?et=watches.email.thread#comment-623381

 

Using the answer as a guide I tried to work it into an application I have where I have code broken out into a separate load.js file and not in the entire html file.  I'm wondering if perhaps I need to have my modules listed in a different order for the code to automatically open the first ContentPane in an Accordion Container?  I think I have all of the required modules and in an appropriate order  My load.js file is listed below. 

 

I hope just attaching the load.js file and not the other associated js files will work, if not I can attach all of my other js files and html file. Any help is greatly appreciated

 

Thanks,
George Hilton

 

 

 

var map;

var selectionToolbar;

var dLayer;

var idlay;

var scalebar;

var parfill;

var popup;

var qbyidpt;

var navToolbar;

var infoTemplate;

var idTask;

var idParam;

var pFP;

var yn;

var store;

var sr;

var legend;

var legaccord;

var inviz;

 

 

 

 

require([

  "esri/map",

  "esri/dijit/Legend",

  "esri/layers/GraphicsLayer",

  "esri/SpatialReference",

  "esri/toolbars/draw",

  "esri/dijit/Scalebar",

  "esri/geometry/Point",

  "esri/graphic",

  "esri/symbols/SimpleFillSymbol",

  "esri/symbols/SimpleLineSymbol",

  "esri/toolbars/navigation",

  "esri/tasks/IdentifyTask",

  "esri/tasks/IdentifyParameters",

  "esri/dijit/Popup",

  "dojo/dom-construct",

  "esri/geometry/Extent",

  "esri/InfoTemplate",

  "esri/layers/ArcGISDynamicMapServiceLayer",

  "dijit/layout/ContentPane",

  "dojo/on",

  "dojo/parser",

  "dojo/_base/array",

  "esri/Color",

  "dijit/registry",

  "dojo/domReady!"

],

 

 

function (

  Map, Legend, GraphicsLayer, SpatialReference, Draw, Scalebar, Point, Graphic, SimpleFillSymbol, SimpleLineSymbol, Navigation, IdentifyTask, IdentifyParameters, Popup, domConstruct, Extent, InfoTemplate, ArcGISDynamicMapServiceLayer,

  FloatingPane, on, parser, arrayUtils, Color, registry

) {

    // call dojo parser

    parser.parse();

 

 

    // Full extent of map

    fullExtent = new esri.geometry.Extent({ "xmin": fullMinX, "ymin": fullMinY, "xmax": fullMaxX, "ymax": fullMaxY, "spatialReference": { "wkid": fullWKID } });

 

 

 

 

    //var initExtent = new esri.geometry.Extent({ "xmin": -8227830.3637063, "ymin": 5340700.39573648, "xmax": -8171280.30528049, "ymax": 5394550.12077208, "spatialReference": { "wkid": 102100 } });

    map = new Map("map", {

        basemap: "topo",

        //infoWindow: popup,

        //extent: initExtent,

        showAttribution: false,

        slider: false,

        logo: false,

        center: [-73.7164, 43.3724],

        zoom: 11

 

 

 

 

    });

 

 

    map.on("update-start", showLoading);

    map.on("update-end", hideLoading);

 

 

   

   

 

    //scale = new scaleUtils.getScale(map);

    //console.log(scale);

    //var scale = scaleUtils.getScale(map);

    //var tscale = scale.toString();

    //alert(tscale);

 

 

 

 

    selectionToolbar = new Draw(map, {showTooltips: false});

 

 

    selectionToolbar.on("draw-end", addrectselToMap);

 

 

    scalebar = new Scalebar({

        map: map,

        scalebarStyle: "ruler",

        //scalebarUnit: "dual",

        attachTo: "bottom-left"

    });

 

 

 

 

 

 

 

 

    parfill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

    new Color([255, 0, 0]), 1), new Color([255, 255, 100, 0.25])

  );

 

 

 

 

    //define symbol for popup

    popup = new Popup({

        fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

            new Color([255, 0, 0]), 2), new Color([50, 50, 255, 0.25]))

    }, domConstruct.create("div"));

 

 

 

 

 

 

 

 

     sr = new SpatialReference(3857);

    

 

 

    // Empty Point for Qby Identify Function Info Window Box Location

    qbyidpt = new Point;

 

 

   

 

 

    infoTemplate = new InfoTemplate();

    infoTemplate.setTitle("Selected Parcel: ${NEWNUMBER}");

    infoTemplate.setContent("Parcel ID : ${NEWNUMBER}");

 

 

    idTask = new IdentifyTask("http://toqgis.queensbury.net/arcgis/rest/services/Web_App/MapServer");

    idParam = new IdentifyParameters();

    idParam.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;

    idParam.tolerance = 1;

    idParam.layerIds = [3];

    idParam.width = map.width;

    idParam.height = map.height;

  //idParam.spatialReference = this.map.spatialReference;

    idParam.returnGeometry = true;

 

 

    navToolbar = new Navigation(map);

 

 

   

    map.on("load", initOperationalLayer);

    map.on("layers-add-result", verifyLoadStatus);

    map.on("click", getMapPoint);

    map.on("mouse-move", showCoordinates);

    map.on("mouse-out", clearCoordinates);

    map.infoWindow.on("hide", hideidwin);

 

 

 

 

 

 

    function initOperationalLayer() {

 

 

        // Hook up jQuery

        $(document).ready(mapReady);

 

 

        //add QBY Map Service

        dLayer = new ArcGISDynamicMapServiceLayer("http://toqgis.queensbury.net/arcgis/rest/services/Web_App/MapServer");

 

  //add empty Graphics Layer

        idlay = new GraphicsLayer();

 

     map.addLayers([dLayer, idlay]);

    }

 

 

   

    //INITIALIZING FUNCTION FOR JQuery

    function mapReady() {

      //SET UP CLICK EVENT AND FUNCTION FOR LEGEND TOGGLE BUTTON

   //var tlg = document.getElementById("toggleleg");

   //tlg.addEventListener("click", showhideleg);

   $('#toggleleg').click(showhideleg);

   

   

   var easing = 1;

   var easing_effect ='easeOut Bounce';

   var animation_speed = 500;

  

   var slider_width = $('#content').width();

   

      //wire click event for check box to a function

      $('.sub-layer-label, .sub-layer-check').click(updateLayerList);

      

    //wire click event for left panel

    $('#layer-tabs-left-handle').click(function () {

           var mar = $('#content').css("margin-left");

    var cw = $('#content').css("width");

    //alert(cw);

   

   

    if ($('#content').width() == 0) {

    $('#layer-tabs-left-handle').animate({left:268}, "fast", "linear");

    $('#content').animate({width:300}, "fast", "linear" );

    $('#contenttitle').css("display", "inline-block");

    $('#accordion').css("display", "inline-block");

    $(this).css("border", "none");

        $(this).css("background-image", "url(http://toqgis.queensbury.net/webappjsworking/images/arrow_left.png)");

        $(this).attr('title', 'Close');

    }

    else {

    //alert(cw);

    $('#layer-tabs-left-handle').animate({left:0}, "fast", "linear");

    $('#content').animate({width:0}, "fast", "linear" );

    $('#contenttitle').css("display", "none");

    //$(this).css("border", "none");

    $(this).css({"background-color": "", "border": "none"});

        $(this).css("background-image", "url(http://toqgis.queensbury.net/webappjsworking/images/arrow_right.png)");

        $(this).attr('title', 'Open');

    }

   

  

   

   

   

   

   

    var is_collapsed = $(this).css("margin-left") == slider_width+"px" && !$(this).is(':animated');

    //alert(is_collapsed);

   

    var sign = (is_collapsed) ? '-' : '+' ;

   

       });

   

   

  

   

   

   

    $('#layer-tabs-left-handle').hover(

      function() {

  var cwid = $('#content').width();

  //alert(cwid);

  

            if (cwid == 0) {

  $(this).css({"background-color": "white", "border" : "solid 1px #a6c9e2"});   

    

        }

  

  }, function (){

  $(this).css({"background-color": "", "border": "none"});

  });

  

   

       

    }

 

  //******

  //TOGGLE LEGEND AND LAYER LIST CONTENT PANE

  //******

  function showhideleg() {

   var legwin = document.getElementById("rightPane"); 

   var viz = legwin.style.visibility;

   

   legwin.style.visibility = "visible"; 

      registry.byId("accord").selectChild("legendPane", true);

 

  }

 

 

   

 

 

    //Verify that all Layers have been loaded

  //set up to handle layers-add-result

    function verifyLoadStatus(results) {

       

        //BUILD LEGEND

        legend = new Legend({

   map: map,

  

   layerInfos: [{

     layer: dLayer,

  hideLayers: [0,1],

  title: "Interactive Map Layers"

   }]

  },"legendDiv");

  legend.startup();

  

  

 

 

        if (results.layers.length == 1) {

            //alert(map.layerIds.length);

            createLayerList();

        }

  }

    function createLayerList() {

 

 

        ////Gets Sub Layer Names then create Layer List/set visibility and check boxes

        var lyrInfos = dLayer.layerInfos;

        //count of all layers in service

        //alert(lyrInfos.length);

        for (lyr in lyrInfos) {

            var lyrname;

            lyrname = lyrInfos[lyr].name;

            //alert(lyrname);

        }

 

 

    }

 

 

      

 

 

});

Outcomes