How do I plot a point returned from QueryTask with dojo???

3615
9
Jump to solution
02-18-2015 10:57 AM
LanceGoens
New Contributor III

I need some direction on how I should approach my widget. The basic function of the widget is to display order information. Each order will consist of 2 items (loaded into a tab control), an overview and an order instruction. This information is contained in two individual html pages - one page for overview and one for the instruction. In my widget.js, I am populating a ContentPane within a tab control (in widget.html) with the contents of the overview.html and instruction.html files from my Orders directory. My tab control works great with two tabs (overview \ instruction).

My question now is, within the instruction.html file that is loaded into the instruction tab, I'd like to place a button control / dijit that runs a simple querytask to fetch the site/location of where an order's work needs to be performed and then plot it on the map within the application that contains my widget. I am executing the querytask and receiving the results back (within instruction.html - NOT widget.html/js) - how do I plot this on the application's map?

How do I access the application's map when I'm querying from a file that didn't create the map?

I DO know the map container's id and am ok hardcoding that into the instruction.html page as the map div's id will never change... if I can access it this way somehow.

Here is my button code from instruction.html. I'm completely new to dojo so please call me out on anything wildly out of convention:

<button data-dojo-type="dijit/form/Button" type="button">

    Zoom to Site

    <script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">

   

        require([

        "dojo/ready",

        "esri/tasks/query",

        "esri/tasks/QueryTask",

        "esri/map",

        "esri/graphic",

        "esri/layers/GraphicsLayer",

        "esri/symbols/SimpleMarkerSymbol"

        ], function(ready,

        Query,

        QueryTask,

        Map,

        Graphic,

        GraphicsLayer,

        SimpleMarkerSymbol) {

        ready(function() {

       

        var queryTask = new QueryTask(<URL REMOVED>);

        var query = new Query();

        query.returnGeometry = true;

        query.where = "OBJECTID = 696";

        queryTask.execute(query, showResults);

        });

        function showResults(results) {

           

            alert("show results called");

           

            //Here is where i'm uncertain of how to plot the result on the applications map...

            //The application's map div id is "map"

            //From here down does not work and where I need help@ as I'm guessing 😞

            var appMap = dojo.byId("map");

            appMap.graphics.clear();

            var serviceLocationGraphicsLayer = new GraphicsLayer();

            var markerSymbol = new SimpleMarkerSymbol();

            markerSymbol.setPath("M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z");

            markerSymbol.setColor("00FF00");

            var resultCount = results.features.length;

            for (var i = 0; i < resultCount; i++) {

                var graphic = results.features;

                graphic.setSymbol(markerSymbol);

                serviceLocationGraphicsLayer.add(graphic);

            }

             appMap.addLayer(serviceLocationGraphicsLayer);

        };

    });

</script>

0 Kudos
1 Solution

Accepted Solutions
LanceGoens
New Contributor III

So... I've ended up creating a new js file that is referenced in index.html of the application. The first thing I do when my widget opens is pass the map reference to a global variable in the new js file. From there, I'm assigning onclick methods to my button controls within instruction.html, which calls functions inside the new js file. Within the method in the new js file, I'm executing my querytask in a non-dojo / standard js way. This is getting results from my map service and plotting them in the map. This doesn't seem like the "best practice" way of doing things but I'm on a time crunch and it's working. I'd like to see more documentation and better examples on the api / web appbuilder sites because they leave a little too much guess work on *how* to perform many things. The querytask example they share doesn't have a map component at all... just displays feature attributes in a table... which doesn't go far enough in my mind... ok... getting off soap box. Thanks for you help today.

View solution in original post

0 Kudos
9 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Lance,

   Any WAB widget has a connector to the Apps map by using 'this.map'. You have me a little confused about your use of instructions.html... Is instructions.html a html template for a dijit called instructions? If not why do you have a instructions.html at all, why not have the content of this file as part of the widget.html?

0 Kudos
LanceGoens
New Contributor III

Robert - thanks for the quick reply. The approach I'm using here is that in production we will have another  application creating the work orders and they will generate the overview and instructions html files and publish them to a directory where the widget will read them.The widget's job here is NOT to create the work order but rather display them. My thought is that those two html files should contain the data driving the work order. Instructions.html contains order-specific directions to a field-worker about what type of job needs to be done onsite and ideally a button that will plot the work site in the map.

Please ask additional questions if you still need clarification.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Lance,

   Do you have the widget currently displaying the instructions.html? If so how are you opening the instructions.html? It is possible that you could use window.opener to get a reference back to the widget and thus be able to call a function in the widget that would add the results to the map (since the widget has a reference to the map and your instructions.html does not).

0 Kudos
LanceGoens
New Contributor III

It is loaded into a ContentPane within the widget by setting the href property of the ContentPane.

When the widget opens... here is what happens

1. AccordionContainer dijit created.

2. Tab Container created.

3. ContentPane dijit created. href property set to instruction.html.

4. ContentPane in step 3 added to Tab Container created in step 2.

5. Repeat 3 & 4 for overview.html

6 Tab Container added to the Accordion Container created in step 1.

7. Repeat 1-6 for all other work orders.

End result is an accordion control, each accordion item has a tab control with two tabs - overview and instructions. Yes, this does work. It does render the contents of instructions.html and overview.html in the respective tabs.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Lance,

   So I have never done anything like that before but reading up on ContentPane it sounds like you will have to investigate and use dojox.layout.ContentPane that permits executeScripts

dojox.layout.ContentPane — The Dojo Toolkit - Reference Guide

0 Kudos
LanceGoens
New Contributor III

Yep... already using it.

Do you think my approach to this is flawed? Is there an easier way I'm overlooking?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Lance,

   Maybe you should try and crawl the dom object and see if you can get back to the widget.js from the Instructions.html. Try doing a console.info(this.parent) from inside the Instructions.html.

0 Kudos
LanceGoens
New Contributor III

So... I've ended up creating a new js file that is referenced in index.html of the application. The first thing I do when my widget opens is pass the map reference to a global variable in the new js file. From there, I'm assigning onclick methods to my button controls within instruction.html, which calls functions inside the new js file. Within the method in the new js file, I'm executing my querytask in a non-dojo / standard js way. This is getting results from my map service and plotting them in the map. This doesn't seem like the "best practice" way of doing things but I'm on a time crunch and it's working. I'd like to see more documentation and better examples on the api / web appbuilder sites because they leave a little too much guess work on *how* to perform many things. The querytask example they share doesn't have a map component at all... just displays feature attributes in a table... which doesn't go far enough in my mind... ok... getting off soap box. Thanks for you help today.

View solution in original post

0 Kudos
LanceGoens
New Contributor III

If not why do you have a instructions.html at all, why not have the content of this file as part of the widget.html?

That seems like a static approach. Widget.html contains the layout and tab container and tabs. But I'm not sure how to make the tab contents dynamic without my approach.

0 Kudos