topic Re: dojo bootstrap typeahead - example in ArcGIS JavaScript Maps SDK Questions

dojo bootstrap typeahead - example

TracySchloss — Sat, 11 Dec 2021 22:47:46 GMT

I am using this example as my starting point: Dojo Bootstrap with ArcGIS JavaScript API - odoenet

I am not in a position to upgrade our servers to 10.3 to take advantage of including a featureLayer in my Search widget, at least not in time to meet my current deadline. I'm hoping this code will do the trick for now. It takes the text the enters and provides a list of suggestions based on what they've typed. Once they select an item. the map centers on it.

The user is likely to initiate a search while the map is still zoomed to the whole state, so I need it to both zoom and center. I'm not wrapping my head around how to modify this code to accomplish this.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Auto Complete Find Example</title>
  <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Example found at http://odoe.net/blog/dojo-bootstrap-with-arcgis-javascript-api/
-->
  <style>
    #map {
   height: 500px;
 }

#autocomplete {
  position: fixed;
  z-index: 99;
  left: 75px;
  top: 20px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #e3e3e3;
}
  </style>
  <script>
var dojoConfig = {
    packages: [{
        name: "bootstrap",
        location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
    }]
};
  </script>
<script src="http://js.arcgis.com/3.11/"></script>
</head>
<body>
      <script type=text/javascript>     
      require([
  'esri/map',
  'dojo/query',
  'bootstrap/Typeahead',
  'esri/tasks/FindParameters',
  'esri/tasks/FindTask',
  'esri/layers/FeatureLayer',
  'esri/graphicsUtils',
  'dojo/domReady!'
], function(
        Map, query, Typeahead,
         FindParameters, FindTask,
         FeatureLayer,
         graphicsUtils
) {
  var pathName = "https://ogitest.oa.mo.gov";
 // var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer';
  var url = pathName + '/arcgis/rest/services/DSS/medProvider/MapServer';
  var graphicsExtent = graphicsUtils.graphicsExtent;
  
  var asFeatures = function asFeatures(data) {
    return [data.feature];
  };


  var findResult = function findResult(results, item) {
    return results.filter(function(x) {
      return x.value === item;
    }).shift();
  };
  
  var setExtent = function setExtent(map, features) {
    return map.setExtent(features);
  };

  var map = new Map('map', {
    center: [-92.593, 38.5],
    zoom: 7,
    basemap: 'topo'
  });
   var featureLayer = new FeatureLayer(url+"/0", {
            id:'featureLayer',
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ['*']
        });
        
   map.addLayer(featureLayer);
  map.on('load', function() {
    var findTask = new FindTask(url);
    var params = new FindParameters();
    params.returnGeometry = true;
    params.outSpatialReference = map.spatialReference;
    params.layerIds = [0];
    params.searchFields = ['NA_PROVIDER'];
    
    var results;


    var node = document.getElementById('search');
    query(node).typeahead({
      source: function(q, process) {
        params.searchText = q;
        findTask.execute(params).then(function(x) {
          results = x;
          process(x.map(function(a) {
            return a.value;
          }));
        });
      },
     updater: function(x) {
        setExtent(
          map,
          graphicsExtent(
            asFeatures(findResult(results, x))
          ));
          return x;
        }
     });
  });
  
})
</script>
  <div id="map">
    <div id="autocomplete">
        <label>Search For Provider:</label><br/>
<input id="search" type="text" class="span4"></input>
      </div>
  </div>
</body>
</html>

Re: dojo bootstrap typeahead - example

TracySchloss — Sat, 11 Dec 2021 22:47:49 GMT

I really didn't expect to get this figured out so quickly. Sometimes I get lucky.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Auto Complete Find Example</title>
  <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">


<!-- Example found at http://odoe.net/blog/dojo-bootstrap-with-arcgis-javascript-api/
I made my example 4/29/2015
Tracy Schloss
-->
  <style>
    #map {
  height: 800px;
}


#autocomplete {
  position: fixed;
  z-index: 99;
  left: 75px;
  top: 20px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #e3e3e3;
}
  </style>
  <script>
var dojoConfig = {
    packages: [{
        name: "bootstrap",
        location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
    }]
};
  </script>
<script src="http://js.arcgis.com/3.11/"></script>
</head>
<body>
      <script type=text/javascript>   
      require([
  'esri/map',
  'dojo/query',
  'bootstrap/Typeahead',

  'esri/tasks/FindParameters',
  'esri/tasks/FindTask',
  'esri/layers/FeatureLayer',
  'esri/graphicsUtils',

  'dojo/domReady!'
], function(
        Map, query, Typeahead,
        FindParameters, FindTask,
        FeatureLayer,
        graphicsUtils
) {
  var pathName = "https://ogitest.oa.mo.gov";
// var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer';
  var url = pathName + '/arcgis/rest/services/DSS/medProvider/MapServer';
  var graphicsExtent = graphicsUtils.graphicsExtent;

/*
  var asFeatures = function asFeatures(data) {
    return [data.feature];
  };
*/
var asGeom = function asGeom(data){
  return [data.feature.geometry]
}

  var findResult = function findResult(results, item) {
    return results.filter(function(x) {
      return x.value === item;
    }).shift();
  };
  /*
  var setExtent = function setExtent(map, features) {
    return map.setExtent(features);
  };
*/ 
  var centerZoom = function centerZoom(map,features){
    return map.centerAndZoom(features[0], 12);
  }
  var map = new Map('map', {
    center: [-92.593, 38.5],
    zoom: 7,
    basemap: 'topo'
  });
  var featureLayer = new FeatureLayer(url+"/0", {
            id:'featureLayer',
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ['*']
        });
       
  map.addLayer(featureLayer);
  map.on('load', function() {
    var findTask = new FindTask(url);
    var params = new FindParameters();
    params.returnGeometry = true;
    params.outSpatialReference = map.spatialReference;
    params.layerIds = [0];
    params.searchFields = ['NA_PROVIDER'];
   
    var results;


    var node = document.getElementById('search');
    query(node).typeahead({
      source: function(q, process) {
        params.searchText = q;
        findTask.execute(params).then(function(x) {
          results = x;
          process(x.map(function(a) {
            return a.value;
          }));
        });
      },
    updater: function(x) {
    centerZoom(map,
    asGeom(findResult(results, x)));
/*
        setExtent(
          map,
          graphicsExtent(
            asFeatures(findResult(results, x))
          ));
*/
          return x;
        }
    });
  });

})
</script>
  <div id="map">
    <div id="autocomplete">
        <label>Search For Provider:</label><br/>
<input id="search" type="text" class="span4"></input>
      </div>
  </div>
</body>
</html>

Re: dojo bootstrap typeahead - example

RobertScheitlin__GISP — Wed, 29 Jul 2015 17:05:19 GMT

Tracy,

Crazy. I was just writing you a reply that used map.zoomAndCenter.

Re: dojo bootstrap typeahead - example

TracySchloss — Wed, 29 Jul 2015 17:09:31 GMT

I thought I'd tried this already before I posted my question. When I tried one more time, suddenly it decided to work.

The only thing I don't like about this is that it seems like you have to hit "Enter", it doesn't work on a mouse click to pick it from the list. I figure that's how typeahead works and not something I'm missing in my code.

Re: dojo bootstrap typeahead - example

RobertScheitlin__GISP — Wed, 29 Jul 2015 20:05:43 GMT

Tracy,

I can't seem to get the click event to fire either.

Re: dojo bootstrap typeahead - example

TracySchloss — Wed, 29 Jul 2015 20:55:31 GMT

I'll just tell the users that's in the next release. Once I upgrade to 10.3, I'll just incorporate that into the Search widget.

I want this to fire an infoWindow, but I always get confused between setContent and setFeatures.

It seems like one or the other should work, but maybe this is failing because I'm not passing the right type of object.

updater: function(x) {

var geom = asGeom(findResult(results, x));

var feat = asFeatures(findResult(results, x));

centerZoom(map, geom);

app.map.infoWindow.setTitle('Find Provider Result');

// map.infoWindow.setFeatures(feat);

app.map.infoWindow.setContent(x); //this works, since x is just a string

app.map.infoWindow.show(geom[0]);

return x;

}

Re: dojo bootstrap typeahead - example

TracySchloss — Thu, 30 Jul 2015 13:16:53 GMT

It seems to work with double click.