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