I've created a simple search widget that searches 3 feature layers. The widget provides the correct suggestions, however, when I click on a suggestion it only zooms to the selected suggestion for my buildings layer, but not for my coffee or food layers. The only difference between layers that I can think of is the structuresFL is a polygon layer and the coffee/food layers are points. Regardless, all my layers are coded the same. The firebug inspector in firefox say its an error in the query execution. Why would this be happening?
Also - I would like the suggestions to include multiple fields. I tried setting this in the displayField properties but it didn't work. Is this not possible?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Switch Test</title>
<!-- css references -->
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/mobile/themes/iphone/iphone.css" >
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 90px;
left: 21px;}
#sw {
position: absolute;
top: 17px;
left: 60px;
width: 5%;
height: 10%;
padding: 0 5px;
}
</style>
<!-- dojo/javascript links-->
<!--script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script-->
<script src="https://js.arcgis.com/3.16/"></script>
<script>
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer","esri/layers/FeatureLayer","esri/dijit/Search","esri/InfoTemplate","dojo/dom","dojo/ready", "dojox/mobile/Switch","dojo/domReady!"],
function(Map, ArcGISTiledMapServiceLayer, FeatureLayer,Search,InfoTemplate, dom, ready, Switch){
var map = new Map("map", {
basemap: "topo",
center: [-111.841947,40.765530],
zoom: 15
});
var basemap = new ArcGISTiledMapServiceLayer ("https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/public_basemap_2014/MapServer");
map.addLayer(basemap);
var foodFL = new FeatureLayer("https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/1");
map.addLayer(foodFL);
foodFL.hide();
var coffeeFL = new FeatureLayer ("https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/0");
map.addLayer(coffeeFL);
coffeeFL.hide();
var structuresFL = new FeatureLayer("https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/2");
map.addLayer(structuresFL); //layer has no symbology - no need to hide. There for search function
var search = new Search ({
enableButtonMode: true, //this enable the search widget to display as a single button
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: true,
allPlaceholder: "Building, coffee, food...",
map: map,
sources: [] //disables ESRI GeoCoder search function
}, "search");
var sources = search.get("sources");
sources.push({
featureLayer: foodFL,
searchFields: ["name"],
outFields: ["name", "description","hours","floor"],
infoTemplate: new InfoTemplate("${name}","${description}<br>${hours}<br>${floor}"),
enableSuggestions: true,
name: "Food Locations", //name of layer that shows in drop down menu
maxResults: 6,
maxSuggestions: 6
});
sources.push({
featureLayer: structuresFL,
searchFields: ["formal_name", "informal_name","abbreviation","building_number"],
outFields:["formal_name", "informal_name","abbreviation","building_number"],
infoTemplate: new InfoTemplate("${informal_name}","${abbreviation}<br>${building_number}"),
enableSuggestions: true,
displayField: "informal_name",
name: "Buildings",
maxResults: 6,
maxSuggestions: 6
});
sources.push({
featureLayer: coffeeFL,
searchFields: ["Name"],
outFields: ["Name", "description","hours","floor"],
infoTemplate: new InfoTemplate("${Name}","${description}<br>${hours}<br>${floor}"),
enableSuggestions: true,
name: "Coffee Shops",
maxResults: 6,
maxSuggestions: 6
});
search.set("sources", sources);
search.startup();
var foo = new Switch({
id:"sw", //defines css
value:"off",
class:"mblSwSquareShape"
});
foo.placeAt(document.body); // e.g add the switch to body
foo.startup();
foo.on("stateChanged",function(newstate){
if (newstate === "on"){
foodFL.show();
}
else
{
foodFL.hide();
}
});
});
</script>
<body>
<body class = "claro">
<div id="sw"></div>
<div id="map"></div>
<div id="search"></div>
</body>
</html>
