Hello,
I'm trying to use the example code as a proof of concept for using the search widget for searching a feature layer that was created from a feature collection. For some reason, I always get "no results found". Is this a limitation with the search widget?
Here is my code. I'm not really concerned with how pretty this looks as this is just a proof of concept.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Flickr</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
html, body, #map {
height:100%;
width:100%;
margin:0;
padding:0;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 70px;
left: 74px;
}
/*Beginning of search box modifications*/
.arcgisSearch .searchClear {
background-color: #E5E5E5;
}
.arcgisSearch .esriIconZoom {
background-image: url("finding.png");
background-size: 20px 20px;
}
.esriIconZoom:before {
content: "";
}
.arcgisSearch .searchGroup .searchInput,
.arcgisSearch .searchBtn,
.arcgisSearch .noResultsMenu,
.arcgisSearch .suggestionsMenu {
border: 1px solid #003300;
background-color: #E5E5E5;
}
.arcgisSearch .noValueText {
color: red;
font-size: 14px;
}
.esriScalebar{
padding: 20px 20px;
}
#map{
padding:0;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/Search",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/request",
"esri/geometry/Point",
"esri/graphic",
"dojo/on",
"dojo/_base/array",
"dojo/domReady!"
], function(
Map,
Search,
FeatureLayer,
PopupTemplate,
esriRequest,
Point,
Graphic,
on,
array
) {
var featureLayer;
map = new Map("map", {
basemap: "satellite",
center: [-46.807, 32.553],
zoom: 3
});
//hide the popup if its outside the map's extent
map.on("mouse-drag", function(evt) {
if (map.infoWindow.isShowing) {
var loc = map.infoWindow.getSelectedFeature().geometry;
if (!map.extent.contains(loc)) {
map.infoWindow.hide();
}
}
});
//create a feature collection for the flickr photos
var featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPoint"
}
};
featureCollection.layerDefinition = {
"geometryType": "esriGeometryPoint",
"objectIdField": "ObjectID",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"type": "esriPMS",
"url": "images/flickr.png",
"contentType": "image/png",
"width": 15,
"height": 15
}
}
},
"fields": [{
"name": "ObjectID",
"alias": "ObjectID",
"type": "esriFieldTypeOID"
}, {
"name": "description",
"alias": "Description",
"type": "esriFieldTypeString"
}, {
"name": "title",
"alias": "Title",
"type": "esriFieldTypeString"
}, {
"name": "author",
"alias": "Author",
"type": "esriFieldTypeString"
}]
};
var popupTemplate = new PopupTemplate({
title: "{author}",
description: "{description}"
});
featureLayer = new FeatureLayer(featureCollection, {
id: 'flickrLayer',
infoTemplate: popupTemplate
});
featureLayer.on("click", function(evt) {
map.infoWindow.setFeatures([evt.graphic]);
});
map.on("layers-add-result", function(results) {
requestPhotos();
});
map.addLayers([featureLayer]);
function requestPhotos() {
var requestHandle = esriRequest({
url: "https://api.flickr.com/services/feeds/geo?&format=json",
callbackParamName: "jsoncallback"
});
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io) {
var features = [];
array.forEach(response.items, function(item) {
var attr = {};
attr["description"] = item.description;
attr["title"] = item.title ? item.title : "Flickr Photo";
attr["author"] = item.author;
var geometry = new Point(item);
var graphic = new Graphic(geometry);
graphic.setAttributes(attr);
features.push(graphic);
});
featureLayer.applyEdits(features, null, null);
}
function requestFailed(error) {
console.log('failed');
}
var search = new Search({
map: map,
sources: [],
zoomScale: 5000000
}, "search");
search.on("load", function () {
var sources = search.sources;
sources.push({
featureLayer: featureLayer,
placeholder: "Enter an Author name...",
enableLabel: false,
searchFields: ["author"],
displayField: "author",
exactMatch: false,
outFields: ["*"]
});
search.set("sources", sources);
});
search.startup();
});
</script>
</head>
<body >
<div id="search"></div>
<div id="info" />
<div id="map"></div>
</body>
</html>Thanks,
Jason
