ArcGIS JS irregularly initiating search and more

[WilliamRiley]

Hello! I'm having a big time issue with the ARCgis Javascript. For some reason, occasionally when I refresh the page, the map will not instantiate the Geocoder element or hide the layers after the defferred map is instantiated.

Here's the code:

require([
  "dojo/parser", "dojo/ready", "dojo/dom-construct", "esri/config", "dojo/_base/connect",
  "esri/Color", "dijit/layout/ContentPane", "esri/dijit/Geocoder",
  "dojo/dom", "esri/map", "esri/urlUtils", "esri/arcgis/utils",
  "esri/tasks/query", "esri/tasks/QueryTask", "esri/tasks/Geoprocessor", "esri/tasks/FeatureSet",
  "esri/geometry/webMercatorUtils", "esri/geometry/Point", "esri/graphic","esri/geometry/Extent",
  "esri/dijit/Legend", "esri/dijit/Scalebar", "dijit/TooltipDialog",
  "esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol",
  "dojo/domReady!"
  ], function (
  parser, ready, domConstruct, esriConfig, connect,
  Color, ContentPane, Geocoder,
  dom, Map, urlUtils, arcgisUtils,
  Query, QueryTask, Geoprocessor, FeatureSet,
  webMercatorUtils, Point, Graphic, Extent,
  Legend, Scalebar, TooltipDialog,
  Popup, PopupTemplate, SimpleMarkerSymbol, PictureMarkerSymbol
  ) {
  ready(function() {


  window.Point = Point;
  window.webMercatorUtils = webMercatorUtils;
  window.Graphic = Graphic;


  esriConfig.defaults.map.panDuration = 1;
  esriConfig.defaults.map.panRate = 1;
  esriConfig.defaults.map.zoomDuration = 100;
  esriConfig.defaults.map.zoomRate = 1;
  esriConfig.defaults.map.slider = {left: null, right: "30px", top: null, bottom:"30px", width: null, height: "200px" };


  parser.parse();


  window.ourQueryTask = new QueryTask("http://gis.dogis.org/arcgis/rest/services/Public_Works/Parking_Facilities/MapServer/1");
  window.ourQuery = new Query();
  window.ourQuery.returnGeometry = false;
  window.ourQuery.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
  window.ourQuery.outFields = ["*"];


  function mercator_to_lat_lon(mercX, mercY) {


  var rMajor = 6378137;
  var shift  = Math.PI * rMajor;
  var lon    = mercX / shift * 180.0;
  var lat    = mercY / shift * 180.0;
  lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180.0)) - Math.PI / 2.0);


  return { 'Lon': lon, 'Lat': lat };
  }


  var defferredMap = arcgisUtils.createMap("8e298b55535548f4bcba1adf160111b5", "map", {
  mapOptions: {
  basemap: "topo",
  center: [-95.9406, 41.2600],
  minZoom: 15,
  smartNavigation: false,
  navigationMode: 'classic',
  zoom: 16,
  maxZoom: 18,
  slider: true,
  force3DTransforms: false,
  isScrollWheelZoom: false,
  isShiftDoubleClickZoom: true,
  isZoomSlider: true,
  isPan: false,
  showAttribution: false,
  displayGraphicsOnPan: true,
  logo: false,
  }
  });


  defferredMap.then(function(response) {


  window.map = response.map;


  map.disableMapNavigation();
  map.enableDoubleClickZoom();
  map.enablePan();


  var resizeTimer;


  var legendLayers = arcgisUtils.getLegendLayers(response);


  var legendDijit = new Legend({
  map: map,
  layerInfos: legendLayers
  },"legend");


  layers = legendLayers;


  var custom_geocoder = {
  placeholder: 'Filter by Venue',
  };


  var search_element = new Geocoder({
  arcgisGeocoder: custom_geocoder,
  autoComplete: true,
  map: map
  }, dom.byId("search"));


  search_element.startup();


  search_element.on("select", showLocation);


  function showLocation(evt) {
  map.graphics.clear();
  var point = evt.result.feature.geometry;
  var symbol = new PictureMarkerSymbol("<?php echo get_template_directory_uri(); ?>/assets/img/pin_all.svg", 32, 40)
  var graphic = new Graphic(point, symbol);
  map.graphics.add(graphic);
  };


  setTimeout(function() {
  $('.checkbox:first', '#onstreet').click();


  $('.find-me').on('click', function() {
  $(this).addClass('searching');
  if (navigator.geolocation) {
  if (typeof geocoder !== "undefined") {
  navigator.geolocation.getCurrentPosition(success_geo, errorFunction);
  } else {
  get_map_location();
  navigator.geolocation.getCurrentPosition(success_geo, errorFunction);
  }
  }
  });


  $(".esriPopupWrapper").bind("DOMSubtreeModified", window.update_our_popup);
  }, 3000)
  }, function (error) {
  alert("Error: ", error.code, " Message: ", error.message);
  defferredMap.cancel();
  });




  map.on("load", function(theMap) {
  $('#meters_all').click();
  });
});
});

Any ideas? I've completely rebuilt this 3 different times, really stuck here.

[KellyHutchins]

I can't reproduce the issue with the code you provided. Here's a jsbin showing your code and the search displays each time I run the app.

http://jsbin.com/vozadacaka/1

If you run your app with the developer console open are there any errors?

[WilliamRiley · Accepted solution]

Yes! Actually, there was one bug - Geocoder was being instantiated too early for some reason. But, I found the issue - the Geocoder class was occasionally being overwritten by an instance of Fastclick, so I removed the Fastclick library and it worked like a charm. Very weird!