WebApp Builder - Adding layers

[HamishKingsbury1]

Hi All

I'm working on developing a widget for Web App builder and what i'm trying to do is add a layer that has been created by the user in the web browser. In he JS API you can do something along the lines of:

map.addLayer();

However this is not working with the WebApp Builder. Below is the code I currently have with hard coded points:

var facilitiesGraphicsLayer = new GraphicsLayer();
facilitiesGraphicsLayer.setRenderer(Renderer);
facilitiesGraphicsLayer.add(new Graphic(new Point(1460355.1631064715,5082544.779264613,_viewerMap.__tileInfo.spatialReference))); /facilitiesGraphicsLayer.add(new Graphic(new Point(1564363.8936586068,5184488.835737464,_viewerMap.__tileInfo.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(1577894.9077129958,5222140.389124587,_viewerMap.__tileInfo.spatialReference))); 
facilitiesGraphicsLayer.add(new Graphic(new Point(1655876.6269847318,5306365.449387112,_viewerMap.__tileInfo.spatialReference))); 
facilities = new FeatureSet();
facilities.features = facilitiesGraphicsLayer.graphics;

What I am after is (with a button press) the points in the facilities feature set to be added to the map.

Any help is appreciated

Cheers

Hamish

[RobertScheitlin__GISP · Accepted solution]

Hamish,

  When building widgets you have easy access to the map by using "this.map"

So it would look something like this:

this.map.addLayer(yourLayer); 

[HamishKingsbury1]

Brilliant, thank you. I am however running into another issue. Using the RouteTask Api (making a custom widget that requires inputs that can't be done by the directions widget) I can't display the returned route. Below is some of my code. The comment section is another of my attemps. Both of them dispaly the error 'TypeError: this.Map.graphics is undefined'

// routeTask.on("solve-complete", function(evt){
        //     routeSymbol = new SimpleLineSymbol().setColor(new Color([0, 0, 255, 0.5])).setWidth(5);
        //     document.getElementById("routeResult").innerHTML = "Total Distance (optimized) is "+(((Math.round(evt.result.routeResults[0].directions.totalLength*100))/100).toFixed(2))+"kms.";
        //     toggle_visibility('calcloading','hide');
        //     route = evt.result.routeResults[0].route.setSymbol(routeSymbol);
        //     this.map.graphics.add(route);
        // });
        routeTask.on("solve-complete", this.this);
        routeTask.on("error",function(){
            alert('nay');
            toggle_visibility('calcloading','hide');
        });

    },
    this: function(evt){
        routeSymbol = new SimpleLineSymbol().setColor(new Color([0, 0, 255, 0.5])).setWidth(5);
        document.getElementById("routeResult").innerHTML = "Total Distance (optimized) is "+(((Math.round(evt.result.routeResults[0].directions.totalLength*100))/100).toFixed(2))+"kms.";
        toggle_visibility('calcloading','hide');
        route = evt.result.routeResults[0].route.setSymbol(routeSymbol);
        this.map.graphics.add(route);
    }

var facilitiesGraphicsLayer = new GraphicsLayer(); facilitiesGraphicsLayer.setRenderer(Renderer); facilitiesGraphicsLayer.add(new Graphic(new Point(1460355.1631064715,5082544.779264613,_viewerMap.__tileInfo.spatialReference))); /facilitiesGraphicsLayer.add(new Graphic(new Point(1564363.8936586068,5184488.835737464,_viewerMap.__tileInfo.spatialReference))); facilitiesGraphicsLayer.add(new Graphic(new Point(1577894.9077129958,5222140.389124587,_viewerMap.__tileInfo.spatialReference)));  facilitiesGraphicsLayer.add(new Graphic(new Point(1655876.6269847318,5306365.449387112,_viewerMap.__tileInfo.spatialReference)));  facilities = new FeatureSet(); facilities.features = facilitiesGraphicsLayer.graphics;

[RobertScheitlin__GISP]

Hamish,

   From the looks of your code the context of "this" inside your function is not what it needs to be. It looks like you are defining this as a function and therefore "this" does not have a map property. You can use dojos lang.hitch to maintain context of "this" in your functions. If you look t any of the esri otb widget you will see many good examples of best practice coding you can follow.

[HamishKingsbury1]

Thanks for that, I've read through the documentation on the Dojo website however it is making little sense to me. I have also looked at some of the included widgets (Geocoder and LayerList) for how they use lang.hitch but again, that is not being overly helpful.

Are you able to give a clear(ish) example?

Cheers

[RobertScheitlin__GISP]

Hamish,

   See if this thread helps any. If not I can try to go into more detail.

lang.hitch what does it do?

[HamishKingsbury1]

Yay! thank you so much!