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.

For the last few days I have been trying to come up with a way to display a point on a map from a coordinate pair entered into a form. I began with the sample below and then added the formToJSON Dijit. Both components seem to be working but I can't figure out how to "hook" them together.

Does any one have any ideas or am I going about this all wrong?

Links to the original sample, my edits and code are below.

Original Sample: http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/map_topo_graphics.html

dojo.formToJson http://dojotoolkit.org/reference-guide/dojo/formToJson.html

My Edits: http://geoville.org/viewers/DP/

<!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">
    <!--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> Display Point</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      map{
        padding:0;
      }
    </style>

    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.TextBox");
      dojo.require("dijit.form.Button");
      dojo.require("esri.map");

      var map, formJson;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-13044922,"ymin":4033097,"xmax":-13042340,"ymax":4034363,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent});
        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
      }

      function drawPoint(){
        var infoSymbol = new esri.symbol.PictureMarkerSymbol("i_about.png",30,30);

       //add from the form below.

       var point1 = new esri.Graphic({
        "geometry": 
            formJson,
            "spatialReference": {
                "wkid": 102100
            }

       });
       point1.setSymbol(infoSymbol);

       map.graphics.add(point1);
      }

      function resizeMap(){
        //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 
        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
        var resizeTimer;
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout( function() {
          map.resize();
          map.reposition();
        }, 500);
      }
      //Use the formToJson digit to grab the coordinates and convert them to JSON.
      // http://dojotoolkit.org/reference-guide/dojo/formToJson.html
      function convertFormDigits() {
        dojo.connect(dijit.byId("convertFormDigits"), "onClick", function() {
            var formJson = dojo.formToJson("myform2");

            //Attach it into the dom as pretty-printed text.
            dojo.byId("formObject2").innerHTML = formJson;
        });
    }

    dojo.addOnLoad(convertFormDigits);


      dojo.addOnLoad(init);
    </script>
  </head>

<body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:80%;">
    <div id="map" dojoType="dijit.layout.ContentPane" style="border:solid 2px #587498;margin:5px;" region="center">
    </div>
    </div>
    <form id="myform2">
    <input type="text" dojoType="dijit.form.TextBox" name="X" value="-13043577">
    <input type="text" dojoType="dijit.form.TextBox" name="Y" value="4034040">
    <button dojoType="dijit.form.Button" onclick="drawPoint()" id="convertFormDigits"> Create Point </button>
    </form>
    <pre id="formObject2"> </pre>
  </body>
</html>

Thanks for your help.

-Mike

share|improve this question

2 Answers 2

up vote 1 down vote accepted

Here's a little code that will add a graphic:

map.graphics.add(
    new esri.Graphic(
        new esri.geometry.Point(-13043739, 4033623, map.spatialReference), 
        new esri.symbol.SimpleMarkerSymbol()
    )
);

One problem is that dojo.formToJson() returns a JSON string. I would ditch this approach and just grab the values out of your text boxes using a simpler method like giving each box and ID and using dojo.byId('boxId').value and parseInt or parseFloat to get a value you can pass to esri.geometry.Point().

share|improve this answer
    
Thanks Derek. I was hoping the dojo.formToJson would skip a few steps but it may have been making things worse. Between @GuillaumeC and your help maybe I will finally figure this out. –  Mike Long Feb 3 '11 at 15:56

You can try something along these lines:

  • Get your X and Y elements (getelementbyid).
  • Check that their values are numeric and in the correct range.
  • If so, create a point (new esri.geometry.Point).
  • Convert it to a graphic (new esri.Graphic)
  • And add it to the map (map.graphics.add)
share|improve this answer

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.