Debugging TOC widget - Insert New Layer Prgrammaticaly

764
2
Jump to solution
09-11-2014 01:24 PM
AlexGole
Occasional Contributor II

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

Capture.PNG

Any help is welcome!

Alex

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

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;

    });

});

View solution in original post

0 Kudos
2 Replies
KenBuja
MVP Honored Contributor

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;

    });

});

0 Kudos
AlexGole
Occasional Contributor II

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

0 Kudos