Hi, can someone please help me?I'm following the tutorial here: https://developers.arcgis.com/javascript/jstutorials/tutorial_geocoder.htmlI 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>
.png){kind=avatar}
