topic Re: Insert New Layer TOC widget not working in ArcGIS JavaScript Maps SDK Questions

Insert New Layer TOC widget not working

AlexGole — Fri, 12 Sep 2014 17:43:32 GMT

Hi all,

I am trying to understand why the "insert new layer" of the TOC widget does not work with my script. It seems like I hooked the buttons correctly using on(domByID) technic. Not quite sure why the "Insert New Layer of the TOC widget does not work in my script.

Here is my map.

TOC widget is here

Re: Insert New Layer TOC widget not working

JonathanUihlein — Fri, 12 Sep 2014 18:06:56 GMT

That application doesn't work correctly for folks outside your network because of the following:

http://webgisdevint1/arcgis/rest/services/Alex_Try/Layers/MapServer

I'd love to help but can't replicate your workflow with this being broken from my point of view.

Re: Insert New Layer TOC widget not working

AlexGole — Fri, 12 Sep 2014 18:09:19 GMT

Oh let me fix that sorry that was on the test environment.

Re: Insert New Layer TOC widget not working

AlexGole — Fri, 12 Sep 2014 18:14:18 GMT

Alright I added a public layer so the TOC would work. The Add layer is already public (ESRI's sample). Let me know if you can see the TOC now.

Re: Insert New Layer TOC widget not working

JonathanUihlein — Fri, 12 Sep 2014 21:20:50 GMT

It's still pointing to a local reference and failing to load for me.

http://webgisdevext1/arcgis/rest/services/ResourceMgmt/WatershedMapper/MapServer

You can test this by going to http://webgisdevext1 on a device outside your network.

It will redirect to http://www.webgisdevext1.com/ which isn't doesn't look like your website

Re: Insert New Layer TOC widget not working

AlexGole — Fri, 12 Sep 2014 21:34:43 GMT

Ha. Wrong environment again. Man this Friday is tough! 🙂 Well I finally decided to choose a random ESRI sample. So I am sure there is no mistake and can see the TOC in action.

Re: Insert New Layer TOC widget not working

AlexGole — Fri, 12 Sep 2014 21:35:20 GMT

Thanks for your help!

Re: Insert New Layer TOC widget not working

RiyasDeen — Mon, 15 Sep 2014 05:09:32 GMT

Hi Alex,

If it helps, this is my inference on why your button click event is not getting fired up. I still don't know how to get around this, but my view is you should not mix up two frameworks, at least at element level.

        $('.popover-markup>.trigger').popover({
            html: true,
            title: function () {
                return $(this).parent().find('.head').html();
            },
            content: function () {
                return $(this).parent().find('.content').html();
            },
            container: 'body',
            placement: 'bottom'
        });

Above popover function is reading the content element (below) and attaching it to popover node created by bootstrap. As part of this process it's deleting the InsertNewLayer button from dom and inserting it back into the dom, Your button click event is attached from dojo before this process occurs and is not actually available when you click the button.





  <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>

As a test try replacing above node with below. This creates two InsertNewLayer button, click the larger one, it fires your click event.

           <div class="content">
                <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" style="z-index:100000; position: absolute; top: 20px; left: 0px;">Add...</button>
            </div>

Re: Insert New Layer TOC widget not working

AlexGole — Mon, 15 Sep 2014 16:18:33 GMT

Riyas,

Thank you. It seems like your test work like a charm and your explanation was very clear. Should I not use bootstrap for this InserNewlayer function then? Is there something similar to popover in dojo that I could use?

Thank you,

Alex

Re: Insert New Layer TOC widget not working

RiyasDeen — Tue, 16 Sep 2014 00:16:51 GMT

Hi Alex,

Glad it helped.

No, you can still use bootstrap if you want, but you should hook the click event of your button after the popover is initialised, may be during show event. I'll try if i can hook these two events together, ll post back here if succeed in doing that.

Closest to popover in dojo is dijit/TooltipDialog — The Dojo Toolkit - Reference Guide , if you want to explore this option.

Re: Insert New Layer TOC widget not working

RiyasDeen — Tue, 16 Sep 2014 10:17:42 GMT

Hi Alex,

Managed to hook up the events, refer attached (delete.html).

Below is what i have done.

Assigned a non-existent class insert-new-layer to the add button (just for accessing the buttons from dojo query)
Created a hookClick event with global scope, query elements with class insert-new-layer (you'll get two, one actual element on dom and the other one created by bootstrap) and attaching click event to both.
hook global hookClick function to bootstrap on popover show event

Re: Insert New Layer TOC widget not working

AlexGole — Tue, 16 Sep 2014 17:57:05 GMT

That is quite amazing! It does trigger the "hook click" alert! Should I modify my insert new layer script so that it triggers the "add layer"?

Thanks,

Alex

PS: I am very impressed, thank you again!

Re: Insert New Layer TOC widget not working

RiyasDeen — Wed, 17 Sep 2014 00:49:48 GMT

Hi Alex,

Glad it helped!

Didn't quite get your question here.

Re: Insert New Layer TOC widget not working

AlexGole — Wed, 17 Sep 2014 16:37:44 GMT

Sorry,

In your sample (that works perfectly) I do get the "Hook click" alert in window, but it still does not trigger the function that allows me to insert a new layer. I cannot figure out why. It must be easy but I don't see what I am missing.

I also get a "Uncaught TypeError: undefined is not a function"

My new map is here.

Thank you for your help and also the great work!

Alex

Re: Insert New Layer TOC widget not working

JonathanUihlein — Wed, 17 Sep 2014 22:01:01 GMT

The order of your dependencies inside the require is wrong. You assign "dojo/query" to "Color" and "dojo/_base/Color" to query. They must match 1 to 1. This is talked about in the introductory documentation.

Re: Insert New Layer TOC widget not working

RiyasDeen — Thu, 18 Sep 2014 12:40:42 GMT

Hi Alex,

As mentioned by jonathan, the error is coming out because of the wrong module name definition.

You map.addLayer is not scoped within the click event. Move this line

map.addLayer(dynaLayer2);

to before

var h = map.on('layer-add-result', function(evt){

Re: Insert New Layer TOC widget not working

AlexGole — Thu, 18 Sep 2014 16:50:43 GMT

Thank you for your help! I will reshape my code.

Alex