Esri Map - Add Location

by schlomm

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<div id="search"></div>
<div id="map"></div>
<script src="https://js.arcgis.com/3.16/"></script>

CSS

html, body, #map, .map.container {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}
#info {
	top: 2px;
	color: #444;
	height: auto;
	font-family: arial;
	font-weight: bold;
	left: 69px;
	margin: 5px;
	padding: 10px;
	position: absolute;
	width: 260px;
	z-index: 40;
	border: solid 1px #003300;
	border-radius: 4px;
	background-color: #E5E5E5;
}
#search {
	display: block;
	position: absolute;
	z-index: 2;
	top: 70px;
	left: 74px;
}
/*Beginning of search box modifications*/
.arcgisSearch .searchClear {
	background-color: #E5E5E5;
}
.arcgisSearch .esriIconZoom {
	background-image: url("finding.png");
	background-size: 20px 20px;
}
.esriIconZoom:before {
	content: "";
}
.arcgisSearch .searchGroup .searchInput, .arcgisSearch .searchBtn, .arcgisSearch .noResultsMenu, .arcgisSearch .suggestionsMenu {
	border: 1px solid #003300;
	background-color: #E5E5E5;
}
.arcgisSearch .noValueText {
	color: red;
	font-size: 14px;
}
/*Beginning of popup modifications*/
.esriPopup .titlePane {
	background-color: #003300;
	border-bottom: 1px solid #121310;
	font-weight: bold;
}
.esriPopup a {
	color: #DAE896;
}
.esriPopup .contentPane, .esriPopup .actionsPane, .esriPopup .pointer, .esriPopup .outerPointer {
	background-color: #B3B3B3;
}

JavaScript

var map, gsvc, pt;

      require([
        "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
        "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",
        "esri/SpatialReference", "esri/InfoTemplate", "esri/dijit/Search", "dojo/dom", "dojo/on", 
        "dojo/domReady!"
      ], function(
        Map, Graphic, SimpleMarkerSymbol,
        GeometryService, ProjectParameters,
        SpatialReference, InfoTemplate, Search, dom, on
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [77.0167, 38.8833],
          zoom: 9
        });

        gsvc = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
	
		var search = new Search({
            map: map
         }, "search");

         search.startup()
		 
		 search.on("select-result", showLocation); 
         function showLocation(e) {
            map.graphics.clear();
            var point = e.result.feature.geometry;
			var ppy = point.getLatitude().toFixed(4);
			var ppx = point.getLongitude().toFixed(4);
			
            map.infoWindow.setTitle("Search Result");
            map.infoWindow.setContent(e.result.name +' test ' + ppy + ',' + ppx + '<br><a onClick="getaddress();" id="addloc" href="javascript:;">Add Location</a>');
			var s_res = e.result.name
			console.log(e.result.name);
	      	
			function getaddress(){  
    	       alert('location added');
        	}  

			final_s_res = s_res.split(",");
		for(i = 0; i < final_s_res.length; i++)
        	   {
	  	console.log("<br /> Element " + i + " of the array is: " + final_s_res[i]);
	           }
         }
      });