Create Point Graphic from Input boxes values

637
1
Jump to solution
10-17-2019 09:18 PM
victhomas
New Contributor III

Hello all,

I'm having trouble creating point graphic on a map from input values box.  Below are the code that I have.  I'm trying to get the lat and long values that is entered to plot on the map after the button is clicked.  Any help on how to get the global input values into the require() to generate the point graphic would be appreciated.  Thanks,

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Create Point Graphic</title>
	<style>
		 #viewDiv {
			padding: 0;
			margin: 0;
			height: 600px;
			width: 100%;
		  }
		  #getInput{
			margin-left: 100px;
			height: 100px;
			
		  }
	</style>
	<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
	<script src="https://js.arcgis.com/4.12/"></script>
  
	<script>
		var longi = -96.867;
		var lati = 40.228; 
		var lontest;
		var lattest;

		function plotPoint()
		{
			lontest = document.getElementById("longInput").value;
			lattest = document.getElementById("latInput").value;
			alert("Long: "+lontest +" Lat: "+lattest);
		}
		require([
		  "esri/Map",
		  "esri/views/MapView",
		  "esri/Graphic",
		  "esri/layers/GraphicsLayer"
		], function(Map, MapView, Graphic, GraphicsLayer) 
		{
	  
			var map = new Map({
				basemap: "topo-vector"
			});

			var view = new MapView({
				container: "viewDiv",  
				map: map,
				center: [-96.8670, 40.228],
				zoom: 6
			});

			var graphicsLayer = new GraphicsLayer();
			map.add(graphicsLayer);  
			
			
			// Create a point
			var point = {
				type: "point",
				longitude: lontest ,
				latitude: lattest
			};

			var simpleMarkerSymbol = {
				type: "simple-marker",
				color: [226, 119, 40],  // orange
				outline: {
					 color: [12, 137, 148],
					 width: 1
				}
			};

			var pointGraphic = new Graphic({
				geometry: point,
				symbol: simpleMarkerSymbol
			});

			graphicsLayer.add(pointGraphic);
			
		});
	</script>
</head>
<body>
	<div id="getInput">
		Latitude:<br>
		<input id="latInput" type="text" name="latpoint">
		<br>
		Longitude:<br>
		<input id="longInput" type="text" name="longpoint">
		<button onclick="plotPoint()"> Click Me</button>
	</div>
  <div id="viewDiv"></div>
</body>
</html> 
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Vic,

  Here is your code working:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Create Point Graphic</title>
  <style>
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #getInput {
      margin-left: 100px;
      position: relative;
      padding: 12px 15px;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>
    var longi = -96.867;
    var lati = 40.228;
    var lontest;
    var lattest;
    var plotPoint;

    
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer"
    ], function (Map, MapView, Graphic, GraphicsLayer) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-96.8670, 40.228],
        zoom: 6
      });

      var graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

      plotPoint = function() {
        lontest = document.getElementById("longInput").value;
        lattest = document.getElementById("latInput").value;
        // Create a point
        var point = {
          type: "point",
          longitude: lontest,
          latitude: lattest
        };

        var simpleMarkerSymbol = {
          type: "simple-marker",
          color: [226, 119, 40], // orange
          outline: {
            color: [12, 137, 148],
            width: 1
          }
        };

        var pointGraphic = new Graphic({
          geometry: point,
          symbol: simpleMarkerSymbol
        });

        graphicsLayer.add(pointGraphic);
      }
      
      view.ui.add(getInput, "top-right");
    });
  </script>
</head>

<body>
  <div id="getInput" class='esri-widget esri-widget--panel'>
    Latitude:<br>
    <input id="latInput" type="text" name="latpoint" value='40.228'>
    <br>
    Longitude:<br>
    <input id="longInput" type="text" name="longpoint" value='-96.867'>
    <button onclick="plotPoint()"> Click Me</button>
  </div>
  <div id="viewDiv"></div>
</body>

</html>

View solution in original post

0 Kudos
1 Reply
RobertScheitlin__GISP
MVP Emeritus

Vic,

  Here is your code working:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Create Point Graphic</title>
  <style>
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #getInput {
      margin-left: 100px;
      position: relative;
      padding: 12px 15px;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>
    var longi = -96.867;
    var lati = 40.228;
    var lontest;
    var lattest;
    var plotPoint;

    
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer"
    ], function (Map, MapView, Graphic, GraphicsLayer) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-96.8670, 40.228],
        zoom: 6
      });

      var graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

      plotPoint = function() {
        lontest = document.getElementById("longInput").value;
        lattest = document.getElementById("latInput").value;
        // Create a point
        var point = {
          type: "point",
          longitude: lontest,
          latitude: lattest
        };

        var simpleMarkerSymbol = {
          type: "simple-marker",
          color: [226, 119, 40], // orange
          outline: {
            color: [12, 137, 148],
            width: 1
          }
        };

        var pointGraphic = new Graphic({
          geometry: point,
          symbol: simpleMarkerSymbol
        });

        graphicsLayer.add(pointGraphic);
      }
      
      view.ui.add(getInput, "top-right");
    });
  </script>
</head>

<body>
  <div id="getInput" class='esri-widget esri-widget--panel'>
    Latitude:<br>
    <input id="latInput" type="text" name="latpoint" value='40.228'>
    <br>
    Longitude:<br>
    <input id="longInput" type="text" name="longpoint" value='-96.867'>
    <button onclick="plotPoint()"> Click Me</button>
  </div>
  <div id="viewDiv"></div>
</body>

</html>
0 Kudos