Draw graphics + Query

jaykapalczynski · ‎12-08-2014

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

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

}

OwenEarley · ‎12-11-2014

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.

jaykapalczynski · ‎12-12-2014

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.

KenBuja · ‎12-12-2014

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

jaykapalczynski · ‎12-12-2014

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

}

jaykapalczynski · ‎12-12-2014

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]),

2

),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);

}

jaykapalczynski · ‎12-12-2014

THINK I GOT IT WITH THIS

params.geometries = [gr.geometry];

jaykapalczynski · ‎12-12-2014

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