topic Re: How to add graphic marker when user input XY coordinates in text boxes in ArcGIS JavaScript Maps SDK Questions

How to add graphic marker when user input XY coordinates in text boxes

AlexGole — Mon, 29 Sep 2014 20:55:39 GMT

Hi all,

Here is my new inquiry:

I am trying to get the user to add a graphic marker using. I would imagine two text boxes as input values and a simple button GO to add the graphic and then zoom to graphic. Here is what I have so far, My fiddle.

Thank you for your help,

Alex

Re: How to add graphic marker when user input XY coordinates in text boxes

Venkata_RaoTammineni — Mon, 29 Sep 2014 21:29:39 GMT

try below this...

function onQueryComplete(returnedPointFeatureSet){ var featureSet = returnedPointFeatureSet || {}; var features = featureSet.features || []; var extent = esri.graphicsExtent(features); if(!extent && features.length == 1) { var point = features[0]; map.centerAndZoom(point, 12); } else { map.setExtent(extent, true); } }

Re: How to add graphic marker when user input XY coordinates in text boxes

RobertScheitlin__GISP — Mon, 29 Sep 2014 21:31:53 GMT

Alex,

You forgot several requires:

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.10/"></script>
  <style>
    html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
  </style>
  <script>
    var map;

      require(["esri/map",
               "esri/symbols/SimpleLineSymbol",
               "esri/graphic",
               "esri/symbols/SimpleMarkerSymbol",
               "esri/Color",
               "dojo/on",
               "dojo/dom",
               "esri/geometry/Point",
               "dojo/domReady!"
              ], 
              function(Map, SimpleLineSymbol, Graphic, SimpleMarkerSymbol, Color, on, dom, Point) {
        map = new Map("map", {
          basemap: "topo",
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
          
        var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CIRCLE,
            15,
         new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([0, 0, 255, 0.5]),
            8
            ),
         new Color([0, 0, 255])
         );

         on(dom.byId("go"), "click", coordinates);

         function coordinates() {
            console.log("got here")
             var lat = document.getElementById("sel_lat").value
             var long = document.getElementById("sel_long").value
             var mp = new Point(long, lat);
             var graphic = new Graphic(mp, symbol);
             map.graphics.add(graphic);
         }

      });
  </script>
</head>
  <body>
    <div id="map">Tag Long:<input id="sel_long" type="text">
      <br />
       Tag Lat:<input id="sel_lat" type="text">
      <br />
      <button id="go">GO</button>
    </div>
  </body>
</html>

Re: How to add graphic marker when user input XY coordinates in text boxes

OwenEarley — Mon, 29 Sep 2014 22:09:10 GMT

Also - avoid using 'long' as a variable name (line 57) as it is a reserved word in JavaScript.

Re: How to add graphic marker when user input XY coordinates in text boxes

AlexGole — Mon, 29 Sep 2014 22:09:55 GMT

Thank you Robert! It works great! I am trying to apply code for an automatic zoom to graphic suggested above by vtammineni.

Re: How to add graphic marker when user input XY coordinates in text boxes

AlexGole — Mon, 29 Sep 2014 22:10:33 GMT

Thank you, I did not know. Will keep that in mind!

Re: How to add graphic marker when user input XY coordinates in text boxes

RobertScheitlin__GISP — Tue, 30 Sep 2014 13:15:35 GMT

Alex,

Did you figure out the zoom part?

Re: How to add graphic marker when user input XY coordinates in text boxes

AlexGole — Tue, 30 Sep 2014 15:54:43 GMT

Hi Robert,

I did figure it out last evening thanks to Vankata's code above.

All I really had to do was to use this:

 map.centerAndZoom(mp, 9);

So my function would be:

function coordinates() {
                         console.log("Coordinates")
                         var lat = document.getElementById("sel_lat").value
                         var longitude = document.getElementById("sel_long").value
                         var coord = webMercatorUtils.lngLatToXY(longitude, lat);
                         var mp = new Point(longitude, lat);
                         var graphic = new Graphic(mp, symbol);
                         map.graphics.add(graphic);
                         map.centerAndZoom(mp, 9);


                }     }

Thank you again for your help!

Alex

Re: How to add graphic marker when user input XY coordinates in text boxes

RobertScheitlin__GISP — Tue, 30 Sep 2014 19:19:07 GMT

Alex,

You will notice in my code that I do not use the webMercatorUtils. The reason you don't need that require or that line of code is that the JavScript API can use web mercator or lat lon coordinates to create a new point (Just FYI).