Draw either point or extent?

DavidElies · ‎06-09-2011

Hi all,

I'm trying to figure out how to use the Draw toolbar to allow a user to draw either a point or an extent. I'm trying to use this for the identify tool. I don't want the user to have to select either point or extent, I want the application to be intelligent enough to determine if the user has clicked a single point, or clicked and dragged the mouse to enclose an extent. The problem I'm running into is if the Draw toolbar is in EXTENT mode, a single click starts drawing, and another single click finishes the drawing. I want a single click to represent a point. Is this possible? Also, am I doing this the wrong way? Is there a better way for the user to be able to identify from either a point or an extent?

This code seems like it would work, but since the Draw toolbar doesn't fire the "onDrawEnd" event on a single click if drawing an EXTENT, it doesn't.

var drawToolbar = new esri.toolbars.Draw(map);
    drawToolbar.activate(esri.toolbars.Draw.EXTENT);
    dojo.connect(drawToolbar, "onDrawEnd", function (geom) {
        if(geom.xmin == geom.xmax && geom.ymin == geom.ymax) {
            geom = new esri.geometry.Point(geom.xmin, geom.ymin, geom.spatialReference);
        }

        // execute an identifyTask using geom

    });

Thanks for your help.

HemingZhu · ‎06-10-2011

Hi all,

I'm trying to figure out how to use the Draw toolbar to allow a user to draw either a point or an extent. I'm trying to use this for the identify tool. I don't want the user to have to select either point or extent, I want the application to be intelligent enough to determine if the user has clicked a single point, or clicked and dragged the mouse to enclose an extent. The problem I'm running into is if the Draw toolbar is in EXTENT mode, a single click starts drawing, and another single click finishes the drawing. I want a single click to represent a point. Is this possible? Also, am I doing this the wrong way? Is there a better way for the user to be able to identify from either a point or an extent?

This code seems like it would work, but since the Draw toolbar doesn't fire the "onDrawEnd" event on a single click if drawing an EXTENT, it doesn't.
var drawToolbar = new esri.toolbars.Draw(map);
    drawToolbar.activate(esri.toolbars.Draw.EXTENT);
    dojo.connect(drawToolbar, "onDrawEnd", function (geom) {
        if(geom.xmin == geom.xmax && geom.ymin == geom.ymax) {
            geom = new esri.geometry.Point(geom.xmin, geom.ymin, geom.spatialReference);
        }

        // execute an identifyTask using geom

    });
Thanks for your help.

I am doing a update testing my app (2.2 to 2.3) on the same issue. It is interesting. In version 2.2, drawing a extent by clicking on the map actually did return a extent with xmin ==xmax and ymin==ymax. In version 2.3 it is not working any more!!!. I am thinking about modifying my code to deal with it. So anyone's input on this is appreciated.

HemingZhu · ‎06-10-2011

I am doing a update testing my app (2.2 to 2.3) on the same issue. It is interesting. In version 2.2, drawing a extent by clicking on the map actually did return a extent with xmin ==xmax and ymin==ymax. In version 2.3 it is not working any more!!!. I am thinking about modifying my code to deal with it. So anyone's input on this is appreciated.

after playing around a little bit. i came up with a workaround. Here is the sample page, you can try yourself if interested.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Identify by clicked point or a drawed extent</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" />
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.toolbars.draw");

        //global variables
        var map;
        var tb;
        var startPt;
        var endPt;
        var doIdentify = false;
        var theExtent;

        function init() {
            //create map, set initial extent and disable default info window behavior
            map = new esri.Map("map", {
                extent: esri.geometry.geographicToWebMercator(new esri.geometry.Extent(-125.90, 44.60, -114.65, 50.22, new esri.SpatialReference({ wkid: 4326 }))),
                showInfoWindowOnClick: false
            });
            dojo.connect(map, "onLoad", function(map) {
                dojo.connect(dijit.byId('map'), 'resize', resizeMap);
                tb = new esri.toolbars.Draw(map);
                dojo.connect(tb, "onDrawEnd", addGraphic);
            });
            map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"));
            dojo.connect(map, "onMouseDown", startDraw);
            dojo.connect(map, "onMouseUp", endDraw);

        }
        function addGraphic(geometry) {
            var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2));
            theExtent = new esri.Graphic(geometry, symbol);
            map.graphics.add(theExtent);

        }
        function resizeMap() {
            var resizeTimer;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                map.resize();
                map.reposition();
            }, 500);
        }
        function startDraw(evt) {
            if (doIdentify) {
                startPt = evt.mapPoint;
            }
            else return;
        }
        function endDraw(evt) {
            if (doIdentify) {
                endPt = evt.mapPoint;
                //alert("Start Point x=" + startPt.x + " y=" + startPt.y);
                //alert("End Point x=" + endPt.x + " y=" + endPt.y);
                if (startPt.x == endPt.x && startPt.y == endPt.y)
                    alert("You identify feature by clicking on the map!");
                else
                    alert("You identify feature by drawing an extent on the map!");

                /* you can add your identify logic here
                 * for example use startPt or theExtent to do query
                 */
                //reset
                startPt = null;
                endPt = null;
                doIdentify = false;
                theExtent = null;
                map.enablePan();
                tb.deactivate();
            }
            else return;
        }
        function startIdentify() {
            map.graphics.clear();
            tb.activate(esri.toolbars.Draw.EXTENT);
            map.disablePan();
            doIdentify = true;
        }
        dojo.addOnLoad(init);
    </script>

</head>
<body class="claro">
    <button onclick="startIdentify();">identify</button>
    
    Click the identify button to start identification<div id="map" style="width:800px; height:400px; border:1px solid #000;"></div>
</body>
</html>

DavidElies · ‎06-14-2011

Thanks for your reply!

I didn't realize it was a version thing. I guess I've never tried before. Does anybody know what the correct behavior is? If this is just a bug in v2.3, then I will just use v2.2 until a fix is available. If the behavior I want is actually just a bug in v2.2, I might try the workaround. I look forward to coming to a solution on this. Thanks for your help!

DavidElies · ‎09-28-2011

Hello again,

I haven't heard from anybody what the "correct" behavior of the draw extent tool is. I would like to start using some functionality from the latest versions of the Javascript API, but I am still stuck at version 2.1 because I can't get the draw extent tool in later versions to work like I want it to. Is there another way to get the draw toolbar to allow point or extent in the newer versions?
Thanks for your help!

KevinGooss · ‎12-12-2011

I'm experiencing the same issue. Using 2.1 i could click inside a polygon and it would select it. At 2.5 a click has no effect.

KevinGooss · ‎12-12-2011

What I'm finding is that if i click instead of clicking an dragging I am not even seeing the OnDraw event fired - meaning i cannot trap it like i am a click/drag.
not good.