afrocodes

Add Point Symbol and Zoom to Address using Geocoder Widget

Discussion created by afrocodes on Jun 17, 2014
Latest reply on Jun 17, 2014 by JUihlein-esristaff
Hi, can someone please help me?

I'm following the tutorial here: https://developers.arcgis.com/javascript/jstutorials/tutorial_geocoder.html

I just want to add a point symbol and zoom in for the address that has been geocoded, but the code given on the website is not working. Everything works except they point symbol is not showing up. Anyone know what is wrong with my code? I tried to use Picture Symbol vs Simple Marker symbol, with no results. The code works (showing base map with working geocoder, scale, and legend) if I take out the code for adding a point. When I leave in the code to add in a point, nothing displays on the web page other than the title border.

Thanks. 

Here is a sample of my code:

  <head>
    <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="css/layout.css">

 <style>
      #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 75px;
      } 
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
 //define variables
   var geocoder;

 //call widgets
      require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
  "dojo/dom",
  
    
        "esri/map", 
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
  "esri/dijit/Geocoder",
  
   "esri/graphic",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/PictureMarkerSymbol",
    "esri/geometry/screenUtils",

    //"dojo/dom",
    "dojo/dom-construct",
    "dojo/query",
    "dojo/_base/Color",

  
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar,
  Geocoder,
  Graphic, 
  SimpleMarkerSymbol, 
  PictureMarkerSymbol,
  screenUtils,
  //dom,
  domConstruct, 
  query, 
  Color
      ) {
   
   //create a map and instance of geocoder and other widgets here
        ready(function(){

        parser.parse();


        arcgisUtils.createMap("**WEB map id here**","mapDiv").then(function(response){
          //update the app 
          dom.byId("title").innerHTML = response.itemInfo.item.title;
          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

          var actualmap = response.map;


          //add the scalebar 
          var scalebar = new Scalebar({
            map: actualmap,
            scalebarUnit: "english"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get 
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response); 
          var legendDijit = new Legend({
            map: actualmap,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();

     //geocoder

   geocoder = new Geocoder({
     map: actualmap,
     autoComplete: true,
     arcgisGeocoder: false,
     geocoders: [{
    "name": "geocoder name",
    "url": "*geocoder url here*",
          "countryCode":"USA",
          "currentExtent":false,
          "placeholder": "Search",
          "singleLineFieldName":"SingleLine"
      }], 

   },"search");
   geocoder.startup();
   geocoder.focus();

//show results of geocoder on map   *CODE copied from ArcGIS Tutorial to add point****

geocoder.on("select", showLocation);
   
  function showLocation(evt) {
  map.graphics.clear();
  var point = evt.result.feature.geometry;
  var symbol = new SimpleMarkerSymbol()
    .setStyle("square")
    .setColor(new Color([255,0,0,0.5]));
  var graphic = new Graphic(point, symbol);
  map.graphics.add(graphic);
  });
        });

});
    });
    </script>
  </head>

  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="title"></div>
        <div id="subtitle"></div>
      </div>
      <div id="mapDiv" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
   <div id="search"></div>
   </div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
  </body>
</html>

Outcomes