[GIS] Display XY after Button Click

arcgis-serverjavascript

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

Best Answer

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

Related Solutions

[GIS] Function to add layer with button click

You have a form with a button of type submit. When you click the submit button on a form, the form is submitted.

There is no action for the form so the page is being reloaded (the default action is the same page).

Change the type of the button from submit to button and then the browser won't submit the form (reload the page) when you click it.

[GIS] display latitude and longitude on googlemaps on click

In the following lines you are trying to refer to a DOM element that does not exist:

document.getElementById("lat").innerHTML = location.lat();
document.getElementById("lon").innerHTML = location.lng();

So in your HTML you would have to add an element like a div or a span, that you can give an id. I would use a span, so you can stay in the same line without any further work:

lat:<span id='lat'></span>
lon:<span id='lon'></span>

Now your code grabs the element and writes the result into it.

enter image description here

EDIT:
But is that actually what you want to do? Pan the map and display its current coordinates? Or do you want to get the coordinates of your current click?

EDIT 2: (addressing comments):

Here would be your JavaScript (I have omitted what is not necessary to answer the question)

    var map;
        function initialize() {
            var myLatlng = new google.maps.LatLng(24.18061975930,79.36565089010);
            var myOptions = {
                zoom:7,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("gmap"), myOptions);
            // marker refers to a global variable
            marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });

            google.maps.event.addListener(map, "click", function(event) {
                // get lat/lon of click
                var clickLat = event.latLng.lat();
                var clickLon = event.latLng.lng();

                // show in input box
                document.getElementById("lat").value = clickLat.toFixed(5);
                document.getElementById("lon").value = clickLon.toFixed(5);

                  var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(clickLat,clickLon),
                        map: map
                     });
            });
    }   

    window.onload = function () { initialize() };

And this you would add to your body:

Lat: <input type="text" id='lat'>
Lon: <input type="text" id='lon'>

NOTE that I have truncated the decimals in the window using toFixed(5), as it does not make sense to display too many decimals.

As your next step you should probably remove all existing markers when clicking. You can use this example to implement that.

Best Answer

Related Solutions

[GIS] Function to add layer with button click

[GIS] display latitude and longitude on googlemaps on click

Related Question