nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

AlexGole

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

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

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>

All comments

AlexGole

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

Alex,

Did you figure out the zoom part?

AlexGole

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

AlexGole

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

OwenEarley

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

RobertScheitlin__GISP

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>

Venkata_RaoTammineni

try below this...

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.