Hello,
I am working on dijit/search widget. I am trying to use to find trees on the feature layer based on Memorial feature.
When I try to search - it says Pagination error /enter a search term.
Not sure what I am missing.
Below is the code I am trying to work on. Can some one please let me know, If I am missing something ?
Unable to find much info on this widget.
<!DOCTYPE html>
<html dir="ltr">
<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>ArcGIS API for JavaScript | Basic Search</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/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: 20px;
left: 74px;
}
</style>
<script>
var dojoConfig = {
parseOnLoad: true
};
</script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
require([
"esri/map","esri/dijit/Search","esri/InfoTemplate","esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/dom-class", "dojo/dom-construct", "dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer",
"dojox/charting/Chart", "dojox/charting/themes/Dollar", "esri/InfoTemplate","dojo/domReady!"
], function (Map,Search,InfoTemplate, Popup, PopupTemplate, FeatureLayer, SimpleFillSymbol, Color, domClass,
domConstruct, on, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Chart,theme) {
var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
var popup = new Popup({
fillSymbol: fill,
titleInBody: false
}, domConstruct.create("div"));
domClass.add(popup.domNode, "dark");
var map = new Map("map", {
center: [-120.435, 46.159], // lon, lat
zoom: 7,
infoWindow: popup
});
var template = new PopupTemplate({
title: "BGSU Memorial Tree",
description: " Tree Memorial: {MEMORIAL} <br/>Tree Variety: {TREE_VARIETY} <br/>Tree Species: {TREE_SPECIES} Tree Species <br/> <img src={TLINK} height =100px width=100px alt=\"No image to display\" />",
//description1:"{TREE_SPECIES }: Tree Species",
fieldInfos: [{ //define field information
fieldName: "TREE_SPECIES",
label: "Type"
}, {
fieldName: "TREE_VARIETY",
label: "Type"
}],
mediaInfos: [{ //define the template
caption: "",
type: "",
value: {
theme: "",
fields: ["TREE_SPECIES", "TREE_VARIETY"]
}
}]
});
var basemap = new ArcGISTiledMapServiceLayer("https://gistest2.bgsu.edu/arcgis/rest/services/Basemap/Basemap/MapServer");
map.addLayer(basemap);
// this layer is for tree icons
var usaLayer = new ArcGISDynamicMapServiceLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTEST/MapServer/", {
opacity: 0.7,
visible: false
});
usaLayer.setVisibleLayers([2]);
map.addLayer(usaLayer);
// this is for data to be retrived and show in the template
var featureLayer = new FeatureLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTrees/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["MEMORIAL", "TREE_VARIETY", "TREE_SPECIES", "TLINK"],
infoTemplate: template
});
map.addLayer(featureLayer);
// search widget
var search = new Search({
map: map,
sources: [],zoomScale: 5000000}, "search");
//listen for the load event and set the source properties
search.on("load", function () {
var sources = search.sources;
sources.push({
featureLayer: featureLayer,
placeholder: "Search Memorial Trees",
enableLabel: false,
searchFields: ["MEMORIAL"],
displayField: "MEMORIAL",
exactMatch: false,
outFields: ["MEMORIAL", "TREE_SPECIES", "TREE_VARIETY"]
});
//Set the sources above to the search widget
search.set("sources", sources);
});
search.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>
Thanks!