AnsweredAssumed Answered

GEOCODER QUESTION

Question asked by hchapa89 on May 2, 2014
Latest reply on May 2, 2014 by hchapa89
I have a geocoder that is working find but when I search on this application not displays on the map where it found the match. It does zoom to the map base on that location but I wish I had an example how I add like a point based on the results it found using the goecoder. I just want an Idea of how making this happen?
Here is my code so far.
[HTML]
<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  <style>
     html, body {
    height: 100%;
    margin: 0px;
     overflow:hidden;
    padding: 0px;
    width: 100%;
  }
  #map {
    height: 100%;
    width: 100%;
    overflow:hidden;
    position: absolute;
    z-index: 0;
  }
   #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 70px;
        left: 75px;
      }
      #HomeButton {
      position: absolute;
      top: 245px;
      left: 20px;
      z-index: 10;
      }
      #LocateButton {
      position: absolute;
      top: 280px;
      left: 20px;
      z-index: 50;
    }
   
    #draggable{
    display: inline-block;
    position:absolute;
    float:left;
    width:10px;
    height:10px;
    left:10px;
    top:360px;
    z-index:50px;
   padding: 0.5em;
  }
   #login {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
     overflow:hidden;
    background-color:black;
    color:white;
  }
  #container {
position: fixed;
width: 340px;
height: 280px;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -170px;
}
#welcome{
text-align: center;

}
 





  </style>
  <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  <script src="http://js.arcgis.com/3.9/"></script>
  <script>
require([
        "esri/map",
        "esri/tasks/GeometryService",
        "esri/toolbars/edit",
       
        "esri/dijit/HomeButton",
        "esri/dijit/BasemapGallery",
        "esri/dijit/LocateButton",
  "esri/dijit/Geocoder",

       "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/FeatureLayer",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor",
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi",

        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, GeometryService, Edit,
        HomeButton, BasemapGallery, LocateButton,
  Geocoder,
        ArcGISDynamicMapServiceLayer, FeatureLayer,
        SimpleMarkerSymbol, SimpleLineSymbol,
        Editor, TemplatePicker,
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys
      ) {
        parser.parse();      

     
        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
        esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
       
        map = new Map("map", {
          basemap: "osm",
          center: [-98.185272, 26.282376],
          logo: false,
          sliderStyle: 'large',
          zoom: 9,
        });
       
       
       
         var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();
       
         geoLocate = new LocateButton({
        map: map
      }, "LocateButton");
      geoLocate.startup();
  
   var geocoder = new Geocoder({
   arcgisGeocoder: false,
   geocoders:[{
  url: "http://maps.lrgvdc911.org:6080/arcgis/rest/services/STEAR/Composite_STEAR/GeocodeServer",
            placeholder: "Search Address",
            outFields: "Xmin, Xmax, Ymin, Ymax",
            singleLineFieldName: "SingleLine"
   }],
   autoComplete: true,
   autoNavigate: true,
   zoomScale: 1000,
   map: map
   }, "search");
        geocoder.startup();
 
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();
       
        basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error:  ", msg);
        });
       
       
       

        map.on("layers-add-result", initEditor);
      
        //add boundaries and place names
        var dynamic = new ArcGISDynamicMapServiceLayer("http://maps.lrgvdc911.org:6080/arcgis/rest/services/STEAR/STEAR_DYNAMIC/MapServer");
        map.addLayer(dynamic);

        var events = new FeatureLayer("http://maps.lrgvdc911.org:6080/arcgis/rest/services/Public_Outreach/EVENTS/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

       

        map.addLayers([events]);

        function initEditor(evt) {
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
          });
          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 1
          }, "draggable");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result) {
            return { featureLayer: result.layer };
          });
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true
            }
          };

          var params = {settings: settings};   
          var myEditor = new Editor(params,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS,
            15,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0, 0.5]),
              5
            ),
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });
   
          myEditor.startup();
        }
      });
</script>

</head>
<body class="claro">
<div data-theme="a" data-role="header" data-position="fixed">
    <h3>LRG Kidz</h3>
    <a href="#featureDialog" data-role="button" class="ui-btn-right" onclick="hide();">Hide</a>
  </div>
  <div id="search"></div>
  <div id="map">
  <div id="HomeButton"></div>
      <div id="LocateButton"></div>

    <div style="position:absolute; right:20px; top:10px; z-Index:999;">
          <div data-dojo-type="dijit/TitlePane"
               data-dojo-props="title:'Switch Basemap', closable:false,  open:false">
            <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery" ></div>
            </div>
          </div>
        </div>
   

  </div>
 
  <div id="draggable"></div>
<div id="login">
      <h1 id="welcome">Welcome</h1>
      <div id="container">      
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="lower">
<input type="button" value="Login" onclick="showUser(username.value, password.value);"/>
</div><!--/ lower-->
</form>
</div>
    </div>

 
</body>
</html>
[/HTML]

Outcomes