AnsweredAssumed Answered

Insert New Layer button not triggering

Question asked by AlexSabrina on Sep 11, 2014

Hi all,

I am using the TOC widget.

I am trying to add the "Insert New Layer" capability to my web map. However the "Add" button that is hooked by ID to the JS function does not seem to trigger. My map is here. I Have everything set up as such:

Capture.PNG

Here is my javascript for the TOC

 

 //TOC
                     map.on('layers-add-result', function (evt) {
                         dynaLayer1.setVisibleLayers([1, 2, 4]);
                         toc = new TOC({
                             map: map,
                             layerInfos: [{
                                 layer: dynaLayer1,
                                 title: "Layers",
                                 slider: true
                             }]
                         }, 'tocdiv');
                         toc.startup();


                         toc.on('load', function () {
                             if (console)
                                 console.log('TOC loaded');
                             dom.byId("InsertNewLayer").disabled = false;
                         });


                     });
                     map.addLayers([dynaLayer1]);
                     on(dom.byId("InsertNewLayer"), 'click', function(evt){
                         if (dynaLayer2 !=null){
                             map.removeLayer (dynaLayer2);
                             toc.layerInfos.splice(1, 1);// remove it.
                             dynaLayer2 = null;
                         }
                         dynaLayer2 = new ArcGISDynamicMapServiceLayer(dom.byId("NewLayerURL").value, {
                             opacity: 0.8
                         });
                         var h = map.on('layer-add-result', function(evt){
                             toc.layerInfos.splice(1, 0, {
                                 layer: dynaLayer2,
                                 title: "DynamicMapServiceLayer2",
                                 // collapsed: true, // whether this root layer should be collapsed initially, default false.
                                 slider: true, // whether to display a transparency slider.
                                 autoToggle: false //whether to automatically collapse when turned off, and expand when turn on for groups layers. default true. 
                             });
                             toc.refresh();
                             h.remove();
                             if (dynaLayer2.initialExtent){
                                 map.setExtent(dynaLayer2.initialExtent);
                             }
                         });
                        
                     });
                     map.addLayer(dynaLayer2);

 

Here is the HTML:

<div class="popover-markup" style="margin-top:-18px; margin-left:840px;">

            <a href="#" class="trigger" style="right: 250px; color: yellow;">Add Layer</a>

            <div class="head hide">Add layer</div>

            <div class="content hide">

                <div class="form-group">

                    <input id="NewLayerURL" size="110" type="text" class="form-control" value="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"/>

                </div>

                <button id="InsertNewLayer" disabled="disabled" class="btn btn-default btn-block">Add...</button>

            </div>

            <div class="footer hide">test</div>

        </div>

        <!--End PopOver-->

 

If anyone has any tips, ideas.... that would be very helpful,

Thank you,

Alex

Outcomes