Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am creating a map that will generate an XY coordinate based off the location that a user clicks. I only want this location to be generated after the user clicks a button to enable the draw toolbar and then clicks the map. The coordinate will be passed to another web page and ultimately stored in a database so I need to make sure that a point can't accidentally be created. Code below as well as a link to what I currently have running.

I may be wrong but I think it should have something to with a dojo.connect but I may be wrong. But you can see the commented out options that I have tried.

<!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="width=device-width,user-scalable=no"/>
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Maps Toolbar</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }
    </style>

    <script type="text/javascript">
      djConfig = {
        parseOnLoad: true
      }
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("dijit.Toolbar");
      dojo.require("esri.toolbars.draw");
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.Button");


      var map, toolbar, symbol, geomTask;
      var gsvc = null;
      var pt = null;

      function init() {
        var startExtent = new esri.geometry.Extent({"xmin":-11721159.665358918,"ymin":-11721159.665358918,"xmax":8277212.918942982,"ymax":9858297.322750043,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:startExtent});
        dojo.connect(map, "onLoad", createToolbar);
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);

        gsvc = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

      }



      function createToolbar(map) {

        toolbar = new esri.toolbars.Draw(map);
        //set drawing mode to extent
        //toolbar.activate(esri.toolbars.Draw.POINT);
        dojo.connect(toolbar, "onDrawEnd", addToMap);
        //dojo.connect(map, "onClick", projectToLatLong);

      }

      function addToMap(geometry) {
      map.graphics.clear();
      //toolbar.deactivate();
      map.showZoomSlider();
       switch (geometry.type) {
          case "point":
            var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);

        }

        var graphic = new esri.Graphic(geometry, symbol);
        map.graphics.add(graphic);
        //dojo.connect(map, "onUpdateEnd(geometry)", projectToLatLong);


      }

      function projectToLatLong(evt) {

        var point = evt.mapPoint;
        var outSR = new esri.SpatialReference({ wkid: 4326});


        gsvc.project([ point ], outSR, function(projectedPoints) {

         pt = projectedPoints[0];
          //display list of points in extent
          dojo.byId("results").innerHTML = "&nbsp;Latitude = " + pt.y + ",&nbsp;Longitude = " + pt.x;

        });
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:90%;">
    <div id="header" dojotype="dijit.layout.ContentPane" region="top" style="height:75px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;overflow:hidden;">
      <button dojoType="dijit.form.Button" onClick="projectToLatLong(evt); toolbar.activate(esri.toolbars.Draw.POINT);">Show XY</button>
    </div>
    <div id="map" dojoType="dijit.layout.ContentPane" style="border:solid 2px #587498;margin:5px;" region="center">
    </div>
    </div>
    <!-- list points in extent -->
    <div id="results" style="width:50%; height:20px; border:1px solid #000; overflow:auto;"></div>

  </body>
</html>

http://geoville.org/viewers/XY/

Thanks for your help.

-Mike

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

Let me know if there is a reason, but I don't see the reason to use dojo.connect to call the projectToLatLong function. Just call the function directly, and pass in the geometry. I made two tiny changes and it worked for me:

enter code here

Maps Toolbar html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

<script type="text/javascript">
  djConfig = {
    parseOnLoad: true
  }
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
<script type="text/javascript">
  dojo.require("esri.map");
  dojo.require("dijit.Toolbar");
  dojo.require("esri.toolbars.draw");
  dojo.require("dijit.dijit"); // optimize: load dijit layer
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.form.Button");


  var map, toolbar, symbol, geomTask;
  var gsvc = null;
  var pt = null;

  function init() {
    var startExtent = new esri.geometry.Extent({"xmin":-11721159.665358918,"ymin":-11721159.665358918,"xmax":8277212.918942982,"ymax":9858297.322750043,"spatialReference":{"wkid":102100}});
    map = new esri.Map("map",{extent:startExtent});
    dojo.connect(map, "onLoad", createToolbar);
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
    map.addLayer(basemap);

    gsvc = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

  }



  function createToolbar(map) {

    toolbar = new esri.toolbars.Draw(map);
    //set drawing mode to extent
    //toolbar.activate(esri.toolbars.Draw.POINT);
    dojo.connect(toolbar, "onDrawEnd", addToMap);
    //dojo.connect(map, "onClick", projectToLatLong);

  }

  function addToMap(geometry) {
  map.graphics.clear();

  //toolbar.deactivate();
  map.showZoomSlider();
   switch (geometry.type) {
      case "point":
        var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
       break;
    }

    var graphic = new esri.Graphic(geometry, symbol);
    map.graphics.add(graphic);
    //dojo.connect(map, "onUpdateEnd(geometry)", projectToLatLong);
    projectToLatLong(geometry);

  }

  function projectToLatLong(evt) {
    var point = evt;
    var outSR = new esri.SpatialReference({ wkid: 4326});


    gsvc.project([ point ], outSR, function(projectedPoints) {

     pt = projectedPoints[0];
      //display list of points in extent
      dojo.byId("results").innerHTML = "&nbsp;Latitude = " + pt.y + ",&nbsp;Longitude = " + pt.x;

    });
  }

  dojo.addOnLoad(init);
</script>

Show XY

share|improve this answer
    
Thanks badkins! That works exactly as desired. No specific reason for using dojo.connect other than I am still learning. Now I know how to call a function from within another function. –  Mike Long Apr 7 '11 at 18:18
    
No problem. Sometimes you will need to use dojo.connect, for instance when you need to wait for something to complete - such as a query - before moving onto the function. But in this case it is already ensured that your map click query is complete because of this line: dojo.connect(toolbar, "onDrawEnd", addToMap); –  badkins Apr 7 '11 at 18:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.