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

Finde mehr Beiträge mit dem Tag

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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