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.
#search { display: block; position: absolute; z-index: 2; top: 20px; left: 75px; } //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); }})})})
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
ointer;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 {cursorointer;}#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;}
أكثر...
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.
#search { display: block; position: absolute; z-index: 2; top: 20px; left: 75px; } //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); }})})})
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
ointer;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 {cursorointer;}#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;} أكثر...