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

AlexGole · ‎09-29-2014

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

RobertScheitlin__GISP · ‎09-29-2014

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>

View solution in original post

Venkata_RaoTammineni · ‎09-29-2014

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); } }

RobertScheitlin__GISP · ‎09-29-2014

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>

OwenEarley · ‎09-29-2014

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

AlexGole · ‎09-29-2014

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

AlexGole · ‎09-29-2014

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

RobertScheitlin__GISP · ‎09-30-2014

Alex,

Did you figure out the zoom part?

AlexGole · ‎09-30-2014

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

RobertScheitlin__GISP · ‎09-30-2014

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).