1

I'm following the tutorial here and it's not working: https://developers.arcgis.com/javascript/jstutorials/tutorial_geocoder.html

Issue: I just want to add a point symbol and zoom in for the address that has been geocoded, but I can't get the geocoded symbol point to display when I type in an address.

The web page works (map, legend, geocoder, scale, etc shows) if I take out the code for adding a point. When I add the code to add in a point for the geocoded result, nothing displays on the web page except for the title border in IE. In Chrome and Firefox with the added point code, the map shows, but when I type in an address to be geocoded, it doesn't zoom in to the address entered nor is a point added.

Anyone know why my code is not working? Sample of code below.

(I removed the web map id and arcgis online id.)

Thanks. 

<html>
  <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/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, 
        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>

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;
}
|improve this question
1

Well, I don't know if this is the only problem, and may or may not be, but I can't test without your layout.css file. But, I do know at least your closing brackets/parentheses at the end of the script section appear to be a bit messed up. You have an extra close parentheses I think, and/or some of them are out of order... Try replacing the last 6 lines of your script section with:

  map.graphics.add(graphic);
  }})})})
</script>

Also, again, I don't know if for sure it is causing you an issue, but your code

var symbol = new SimpleMarkerSymbol()
    .setStyle("square")
    .setColor(new Color([255,0,0,0.5]));
var graphic = new Graphic(point, symbol);

may work, but I would recommend changing that to 

var symbol = new SimpleMarkerSymbol().setStyle("square").setColor(new Color([255,0,0,0.5]));
var graphic = new Graphic(point, symbol);

at least for testing to see if that makes any difference, especially depending on the browser you're testing in as some browsers are pickier than others.

Also, I'm assuming you just took it out for the sake of anonymity, but make sure to put in a correct web map ID from ArcGIS Online, or possibly portal (not sure on that), here: arcgisUtils.createMap("**WEB map id here**","mapDiv")

Just a few thoughts. Also, it may help if you edited your question to mark specifically what parts you commented out or deleted to get it to work when you said it worked without the add point symbol section. If you told us more specifically what code does work and what didn't, we could have a better idea what the problem might be.

|improve this answer
  • Hi @John. I added the layor.css file if you want to test. I added more details about what issues I'm having. I tried what you suggested (the parentheses and changing var symbol/graphic), and still no luck. Any other suggestions? – afrocodes Jun 17 '14 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.