topic Re: Draw graphics + Query in ArcGIS JavaScript Maps SDK Questions

Draw graphics + Query

jaykapalczynski — Mon, 08 Dec 2014 16:24:39 GMT

I am using the below code to draw graphics in the map. Everything works great....

But I want to use those geometries to do spatial queries. I need to call a specific Feature to get the geometry for the query making the Graphic far to general. I am trying to select all the features from X Feature that are within the Geometry Drawn. Noting that there might be other graphics in the map so thats why I am thinking I need to separate them and get them into a Feature that I can reference by itself.

I think I need to push the graphics drawn to a Feature? Not sure how to do this. Once I have the feature I can use its geometry for the query.

Not sure if I am on the right path here...AND unsure how to convert the graphic to a feature so that its geometry can be used in a query....hope someone can help.

// markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples

var DrawmarkerSymbol = new SimpleMarkerSymbol();

DrawmarkerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");

DrawmarkerSymbol.setColor(new Color("#00FFFF"));

// http://blogs.esri.com/esri/arcgis/2012/02/03/esri-picture-marker-symbol-generator-for-javascript-developers/

var DrawPicturemarkerSymbol = new esri.symbol.PictureMarkerSymbol({

"angle": 0,

"xoffset": 0,

"yoffset": 12,

"type": "esriPMS",

"url": "http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png",

"contentType": "image/png",

"width": 24,

"height": 24

});

// lineSymbol used for freehand polyline, polyline and line.

var DrawlineSymbol = new CartographicLineSymbol(

CartographicLineSymbol.STYLE_SOLID,

new Color([255,0,0]), 2,

CartographicLineSymbol.CAP_ROUND,

CartographicLineSymbol.JOIN_MITER, 5

);

var DrawfillSymbol = new SimpleFillSymbol(

"solid",

new SimpleLineSymbol("solid", new Color([255,0,0]), 2),

new Color([0,128,255,0.25])

);

function initToolbar() {

tb = new Draw(app.map);

tb.on("draw-end", addGraphic);

// event delegation so a click handler is not

// needed for each individual button

on(dom.byId("infoShapefileCreate"), "click", function(evt) {

if ( evt.target.id === "info" ) {

return;

}

var tool = evt.target.id.toLowerCase();

app.map.disableMapNavigation();

tb.activate(tool);

});

}

function addGraphic(evt) {

//deactivate the toolbar and clear existing graphics

tb.deactivate();

app.map.enableMapNavigation();

// figure out which symbol to use

var symbol;

if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {

symbol = DrawPicturemarkerSymbol;

} else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {

symbol = DrawlineSymbol;

}

else {

symbol = DrawfillSymbol;

}

app.map.graphics.add(new Graphic(evt.geometry, symbol));

}

Re: Draw graphics + Query

SteveCole — Sat, 11 Dec 2021 19:20:19 GMT

I think the answer depends on how you want things to work. Do you want the query to happen as soon as the user finishes drawing a graphic? If so, your current code is fine and you just need to create a new function for the actual query (using queryTask) and call that function from inside your addGraphic function.

Assuming that what I have suggested is what you want, it would go something like this:

  function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics
          tb.deactivate();
          app.map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = DrawPicturemarkerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = DrawlineSymbol;
          }
          else {
            symbol = DrawfillSymbol;
          }
          app.map.graphics.add(new Graphic(evt.geometry, symbol));
          getIntersectingFeatures(evt.geometry);
    }

function getIntersectingFeatures(theGeometry) {
        var query = new esri.tasks.Query();
        query.outFields = ["*"];
        query.returnGeometry = true;
        query.geometry = theGeometry;

        var theQuery = new esri.tasks.QueryTask(<feature service URL>);
        theQuery.execute(query);
      ....etc....
}

Sorry I used legacy code instead of AMD but it's what I had handy.

Re: Draw graphics + Query

jaykapalczynski — Mon, 08 Dec 2014 19:02:30 GMT

I was hoping that I can fire that query off separately.....the user might create a couple polygons....these polygons will then be used for the query. I think can work?

Re: Draw graphics + Query

SteveCole — Mon, 08 Dec 2014 19:19:39 GMT

You absolutely can do that. In fact, In my application, the user draws their feature, and then initiates the query by clicking a button after they've completed their sketch. I have only worked with a single feature geometry so someone else will have to chime in about how you query based on multiple features. The API doesn't indicate if you can specify an array of features so my take away is that you can only specify a single feature geometry. If that's a case, maybe you need to union the various individual geometries together before specifying it to the Query?...

CC:

Kelly Hutchins‌

Re: Draw graphics + Query

RobertScheitlin__GISP — Mon, 08 Dec 2014 19:40:54 GMT

Jay,

Steve is right you will have to union the drawn geometries either using the Geometry Service or some client side code. I do this in my eSearch widget for WAB you can look at the code there go get some ideas.

Enhanced Search Widget Beta 3.3.2

Re: Draw graphics + Query

jaykapalczynski — Thu, 11 Dec 2014 17:09:52 GMT

I think I need to start with the thought of trying to determine how many objects there are drawn in the map.

Say I have the user and they draw 4 different polygons via the code I pasted in the first post above.

1. How would I test to determine if there are more than one feature?

... if thats the case then I run a Union. if not I go right to the query

2. What do I run the Union against....its just a graphic....

3. How to I specify the specific graphics in the Union (what if there are other graphics in the map, I dont want those to be in the union)

4. Can I assign the graphics being added via this draw tool to a specific ID or feature that I can reference in the Union and the eventual Query?

Re: Draw graphics + Query

RobertScheitlin__GISP — Thu, 11 Dec 2014 17:53:03 GMT

Jay,

I Would start by assigning a unique GraphicsLayer that the drawn features will be added to istead of the maps graphics layer. If you do that then you would not have to worry about if there are other graphics in the maps graphics layer.

You run the union on the graphics geometry. you can use esri/graphicsUtils and the getGeometries method.

Re: Draw graphics + Query

jaykapalczynski — Thu, 11 Dec 2014 20:01:25 GMT

Just getting the straight....I would run the Union on the New GraphicsLayer I created instead of the map graphics I am doing currently?

Re: Draw graphics + Query

jaykapalczynski — Thu, 11 Dec 2014 20:18:20 GMT

PART 1: Add the graphics to my Graphic Layer Like this????

O am attempting to comment out eixting code that draws pushed the graphics to the graphics map layer

and replace with code that creates a GraphicsLayer and adds the graphics to it...

That seem correct:

function addGraphic(evt) {

//deactivate the toolbar and clear existing graphics

tb.deactivate();

app.map.enableMapNavigation();

// figure out which symbol to use

var symbol;

if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {

symbol = DrawPicturemarkerSymbol;

} else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {

symbol = DrawlineSymbol;

}

else {

symbol = DrawfillSymbol;

}

// REMOVE FROM EXISTING

app.map.graphics.add(new Graphic(evt.geometry, symbol));

// ADD THIS TO ADD GRAPHICS TO GraphicLayer

var DrawnGraphics = new esri.layers.GraphicsLayer();

app.map.DrawnGraphics.add(evt.geometry, symbol);

}

Re: Draw graphics + Query

RobertScheitlin__GISP — Thu, 11 Dec 2014 20:35:03 GMT

Jay,

As long as you are not adding a GraphicsLayer every time the addGraphic function is called. I would create the GraphicsLayer in one of your apps init functions and also add it to the map at that point and using a global var to this new GraphicsLayer. The way your code looks now you are creating a local var called DrawnGraphics and then attempting to use a global var called app.map.DrawnGraphics when you are adding the actual graphic...

Re: Draw graphics + Query

OwenEarley — Sat, 11 Dec 2021 19:20:21 GMT

Hi Jay,

Steve and Robert have been pointing you in the right direction. You need to create your GraphicsLayer once and then add user polygon graphics to it. Then before you run the spatial query, use a geometry service to union the geometries for all of the graphics in the GraphicsLayer.

A working example is available here - User Input Graphics Layer

The key parts of the code are:

        // Create your custom graphics layer and add it to the map
        drawnGL = new GraphicsLayer({id:'user-input'});
        map.addLayer(drawnGL);

        function addGraphic(evt) {
          ...         
          // Add  your user created graphic to your graphics layer:
          drawnGL.add(new Graphic(evt.geometry, fillSymbol));
          ...
        }

        function unionGraphics(){
            ...
            // get geometries from your graphics layer
            var geoms = [];
            for (var i=0; i<drawnGL.graphics.length;i++){
              geoms.push(drawnGL.graphics.geometry)
            }
            // union geometries
            geomSvc.union(geoms, function(result){
              runAnalysis(new Graphic(result));
            }, function(){             
              alert("Geometry service error");
            });
            ...
        }

There are also a few console.log statements in the sample so you can open developer tools and see the results.

Re: Draw graphics + Query

jaykapalczynski — Fri, 12 Dec 2014 15:46:18 GMT

STEVE, ROBERT AND OWEN Thank you all for your help, examples and thoughts....VERY appreciated...

Have most working now just need to feed the Geometry to my Query (which is already working on a map click)...SO should not be any problem...

Cheers and thanks again.....dont know who to mark as correct answer as you all have provided fantastic input...will choose Owens just for the fact that is someone visits this the working code example is there.

Re: Draw graphics + Query

KenBuja — Fri, 12 Dec 2014 16:01:23 GMT

You could also mark the posts that provided you good guidance by marking them as Helpful

Re: Draw graphics + Query

jaykapalczynski — Fri, 12 Dec 2014 16:14:28 GMT

One last question...

Should I not be able to specify my Geometry as such in Params? I am using these params to then buffer the graphics I just created and then push that to a query.

function runAnalysis(gr){

// This is your final graphic to use in your analysis:

console.log("Final Graphic: ", gr);

dom.byId("ringCount").innerHTML = gr.geometry.rings.length;

// Get Buffer Distance from the Textbox input

varBufferDistance = registry.byId("BufferDistance");

var params = new BufferParameters();

params.geometries = [drawnGL];

params.distances = [ varBufferDistance ];

params.outSpatialReference = app.map.spatialReference;

params.unit = GeometryService.UNIT_STATUTE_MILE;

BufferTool(map, params); // Call BufferTool function and pass the Buffer Parameters

}

Re: Draw graphics + Query

jaykapalczynski — Fri, 12 Dec 2014 16:49:51 GMT

In responce to my last post...I am trying to buffer the newly drawn GRaphics that Are added to the GrpahicsLayer with this....think I am breaking here:

geometryService22.on("buffer-complete", function(result){

I THINK I am declaring my Geometry incorrectly in the PARAMS definition....thoughts?

function runAnalysis(gr){

// This is your final graphic to use in your analysis:

console.log("Final Graphic: ", gr);

dom.byId("ringCount").innerHTML = gr.geometry.rings.length;

// Run your spatial query here...

// Get Buffer Distance from the Textbox input

varBufferDistance1 = registry.byId("BufferDistance");

//alert("Action2 Aa");

var params1 = new BufferParameters();

params.geometries = [drawnGL];

params1.distances = [ varBufferDistance1 ];

params1.outSpatialReference = app.map.spatialReference;

params1.unit = GeometryService.UNIT_STATUTE_MILE;

BufferTool22(map, params1); // Call BufferTool function and pass the Buffer Parameters

}

function BufferTool22(map, params1){

// geometry service that will be used to perform the buffer

var geometryService22 = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

geometryService22.buffer(params1);

geometryService22.on("buffer-complete", function(result){

app.map.graphics.clear();

// draw the buffer geometry on the map as a map graphic

var symbol22 = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,

new Color([105,105,105]),

),new Color([255,255,0,0.25])

);

bufferGeometry22 = result.geometries[0]

BufferGraphic22 = new Graphic(bufferGeometry22, symbol22);

app.map.graphics.add(BufferGraphic22);

Bufferextent22 = BufferGraphic22.geometry.getExtent().expand(3.0);

app.map.setExtent(Bufferextent22);

}

Re: Draw graphics + Query

jaykapalczynski — Fri, 12 Dec 2014 17:20:37 GMT

THINK I GOT IT WITH THIS

params.geometries = [gr.geometry];

Re: Draw graphics + Query

jaykapalczynski — Fri, 12 Dec 2014 17:28:32 GMT

THANK YOU ALL......WORKING......CHEERS