Debugging TOC widget - Insert New Layer Prgrammaticaly

[AlexGole]

Hi all,

I am trying to programmatically add layer to my map and TOC via the TOC widget.

However I am getting an error : "Cannot read property 'on' of undefined" when running the script. Not too sure what that means.

Anyway, my map is here. The idea is to click on a button and automatically add a layer to both TOC and map using bootstrap popover. As showed below

Any help is welcome!

Alex

[KenBuja · Accepted solution]

You're trying to add the "on" event to the TOC before it's defined.

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;
});

You'll have to move that inside the 'layers-add-result' event

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;
    }); 
});

[AlexGole]

That works better! Thanks. Now I still have the same type of error for dynaLayer2. Originally I had:

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){
                         var h = dynaLayer2.on('load', 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();
                         });

Now, I have this:

 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){
                         var h = dynaLayer2.on('load', 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();
                         });

                         });

Everything works fine except the button Add... in the popover (Add Layer) does not seem to be hooked correctly to the URL.

<!--Add Layer PopOver-->
        <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 type="text" class="form-control" placeholder="Enter Layer's URL here…">
                </div>
                <button id="InsertNewLayer" disabled="disabled" type="submit" class="btn btn-default btn-block">Add...</button>
            </div>
            <div class="footer hide">test</div>
        </div>
        <!--End PopOver-->
    </div>

Not so sure why yet. Am I missing something here?

Thank you for your help,

Alex