Add Point Symbol and Zoom to Address using Geocoder Widget

LisCollins · ‎06-17-2014

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>

LisCollins · ‎06-17-2014

Here is the layout.css file if you want to test:

html,body {
height:100%;
width:100%;
padding:0;
margin:0;
overflow:hidden;
}

body {
background-color:#fff;
color:#333;
font-size:14px;
overflow:hidden;
font-family:Georgia, "Times New Roman", Times, serif;
}

a {
color:#555;
font-weight:bold;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

#header {
height:117px;
background:#3e3e3e;
color:#fff;
margin:0;
}

#headerText{
padding-top:20px;
padding-left:25px;
width:70%;
float:left;
min-width:800px;
}

#title {
font-size:30px;
font-weight:bold;
text-align:left;
white-space: nowrap;  
overflow: hidden;  
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}

#subtitle {
font-size:14px;
margin-top:10px;
overflow: hidden;
}

#addressbar{
position:absolute;
padding-top:8px;
right:10px;
}

#logoArea{
float:right;
padding-top:25px;
padding-right:25px;
text-align:right;
}

#social{
bottom: 25px;
right: 15px;
position: absolute;
}
#social2{
bottom: 3px;
right: 42px;
position: absolute;
}
#msLink{
color:#0276FD;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
outline:none;
}

#msLink1{
color:#0276FD;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
outline:none;
}

#Mdplogo{
right: 20px;
bottom:25px;
position:absolute;
z-index:100;
height:30px;
border:none;
}

#logoImg{
border:none;
outline:none;
}

#map {
margin:0;
}

#swipeImg{
display:none;
position:absolute;
z-index:2;
}

.moveable {
position:absolute;
border-left:1px solid #848484;
border-right:1px solid #848484;
background-color: #cdcdcd;
width: 6px;
height: 100%;
padding: 0 !important;
margin: 0;
z-index: 30;
cursor: col-resize;
}

.moveable:hover {
background-color:#999;
}

#footer {
display:none;
font-size:12px;
background:#848484;
height:18px;
margin:0;
padding:10px 15px 5px;
}

.map .bingLogo-lg {
left:18px !important;
}

#legendCon{
 position:absolute;
width:300px !important;
margin-left:100px;
z-index:100;
}

#legendDiv{
display:none;
background:#848484;
max-height:450px;
overflow:auto;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
}

#legendToggle{
position:relative;
background:#848484;
margin-top:-1px;
width:125px;
.height:28px;
cursor:pointer;
z-index:100;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
}

#legTogText{
position:relative;
margin:auto;
margin-left:2px;
.margin-top:0px;
padding:5px;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
}

g,v {
cursor:pointer;
}

#loadingCon{
position:absolute;
z-index:99;
width:100%;
top:40%;
text-align:center;
}

#loadingDialog{
margin:auto;
background-color:#dadada;
width:300px 
}

#loadingHeader{
background-color:#444;
color:#fff;
padding-top:10px;
padding-bottom:10px;
width:300px;
}

#loading{
padding-top:10px;
}

#loadingImg{
margin-top:5px;
padding-bottom:10px;
}

DanielWebb2 · ‎06-17-2014

At my work we�??re all noobs to Javascript and coding. And with the geocoder we went around in circles until it worked and then left it alone. 🙂 That�??s all meant to say that I might not have an answer for you but I�??ll try. (Also, I don't use arcgisUtils.createMap() to create my maps so hopefully I'm not going beyond my abilities to answer.)

We found that geocoder.on() didn't work for us. I don't know why because Esri's own sample uses it.

At my work we use connect.connect(geocoder, "onSelect", locate);
Another that works is dojo.connect(geocoder, "onSelect", locate);

These work for us. Maybe it will help you too.

Here is the entirety of our code for the geocoder.

var geocoder = new Geocoder
 ({
  autoNavigate : false,
  arcgisGeocoder : false,
  autoComplete : true,
  minCharacters : 0, //default is 3 change
  searchDelay : 10, //default is 350 milliseconds
  geocoders : [{
   url : geocodeURL,
   name : "Geocoder",
   placeholder : "Search for an address",
   singleLineFieldName : "SingleLine"
  }],
  map : map
 }, dom.byId("search"));

geocoder.startup();
geocoder.focus();

var psymbol = new PictureMarkerSymbol({
  "angle" : 0,
  "xoffset" : 0,
  "yoffset" : 10,
  "type" : "esriPMS",
  "url" : "http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
  "contentType" : "image/png",
  "width" : 24,
  "height" : 24
 });

var templateGC = new InfoTemplate("${name}", "${*}"); //Title is name of Address searched
//dojo.connect(geocoder, "onSelect", locate);
connect.connect(geocoder, "onSelect", locate);
function locate(result) {
 var l = map.getLayer("results");
 l.clear();
 gcFeature = result.feature;
 map.infoWindow.hide();
 gcFeature.attributes.name = result.name;
 gcFeature.setSymbol(psymbol);
 gcFeature.setInfoTemplate(templateGC);
 l.add(gcFeature);
 var geom;
 geom = gcFeature.geometry;
 map.setScale(2000);
 map.centerAt(geom);
}

LisCollins · ‎06-17-2014

Thank you danwebb for offering to help! I always feel like most of my threads are ignored around these parts.

I tried your way. It's now zooming in to the area that is geocoded, but it's still not showing the point symbol of the area searched.

Any other ideas?

DanielWebb2 · ‎06-17-2014

I�??m sorry. I don�??t have any other ideas. The code posted is all I have. The symbol should be set with the gcFeature.setSymbol(psymbol);

Are you adding the graphic to the right GraphicsLayer? Mine is being added to one with an id of �??results�?�. I add this GraphicsLayer at the same time I add all the other dynamic services.

map.addLayer(new GraphicsLayer({
 id : "results"
}));

The function �??locate�?� clears the graphic in that layer before adding a new one.

var l = map.getLayer(�??results�?�);
l.clear();
.......
l.add(gcFeature);

That's about all I have.

ChayanikaKhatua · ‎06-17-2014

Hi,

I tried running your code, seems it's trying to access an unavailable ArcGISOnline item. The code adding the graphic seems to be working fine, I tried the snippet with the geocoder sample.

Also jshint says there's a stray bracket in the end of the adding graphic snippet, the updated code:

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);
  }
        });

});
    });

Sorry I couldn't be more help. Good luck!

JonathanUihlein · ‎06-17-2014

Hello!

There are a number of syntax errors in the code you posted.
This makes it much harder to debug from my end.
Seeing several things that could be the issue but need more information.

What error messages are you seeing in the console or debugger?
Were you able to verify that the point is a valid Point object?
Is the map in scope inside your showLocation() function?

Thanks!