Neda,
So this seems like what you are after then:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Interactive web map for CSULB Trees dataset</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
var searchResults;
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Extent",
"esri/renderers/SimpleRenderer",
"esri/symbols/PictureMarkerSymbol",
"esri/layers/FeatureLayer",
"esri/widgets/Search",
"esri/widgets/Legend",
"esri/widgets/ScaleBar",
"esri/widgets/Home",
"dojo/domReady!"
], function(Map, MapView,
Extent, SimpleRenderer,
PictureMarkerSymbol,
FeatureLayer, Search,
Legend, ScaleBar, Home) {
var map = new Map({
basemap: "gray"
});
var initialExtent = new Extent({
xmin: -118.13,
xmax: -118.1,
ymin: 33.77,
ymax: 33.79
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 15,
center: [-118.114090, 33.783823],
extent: initialExtent
});
var treeRenderer = new SimpleRenderer({
symbol: new PictureMarkerSymbol({
url: "http://www.clker.com/cliparts/e/d/8/f/1206581914343605633nicubunu_RPG_map_symbols_tree_8.svg.hi.png",
width: 9,
height: 9,
angle: 0
})
});
var campus = new FeatureLayer({
url: "http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/1?t...."
});
map.add(campus);
var tree = new FeatureLayer({
url: "http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/0?t....",
outFields: ["*"],
renderer: treeRenderer
});
map.add(tree);
var search = new Search({
view: view,
sources: [{
autoselect: false,
popupOpenOnSelect: false,
featureLayer: tree,
searchFields: ["objectid", "common_name"],
displayField: "objectid",
exactMatch: false,
outFields: ["objectid", "common_name"],
name: "Tree FS",
placeholder: "Object ID or Tree Name",
maxResults: 6,
maxSuggestions: 6,
minSuggestCharacters: 1
}]
});
view.ui.add(search, "top-right");
search.viewModel.on("search-complete", function(event) {
searchResults = event.results[0].results;
document.getElementById('title').style.visibility = "visible";
pagenum = searchResults.length / 10;
if(!Number.isInteger(pagenum)){
pagenum++;
}
pagehtml = "";
for (x = 1; x <= pagenum; x++) {
pagehtml += "<a id='page" + x +"' href='#' style='margin-right:5px;' onClick='gotoresultspage(this.innerHTML)'>" + x + "</a>";
}
pagehtml += "<div id='resultstable'></div>";
document.getElementById('title').innerHTML = pagehtml;
gotopage = 1;
gotoresultspage(gotopage);
});
var legend = new Legend({
view: view,
});
view.ui.add(legend, "bottom-left");
var scaleBar = new ScaleBar({
view: view,
unit: "non-metric"
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
var homeBtn = new Home({
view: view
});
view.ui.add(homeBtn, "top-left");
});
function gotoresultspage(gotopage) {
var table = document.getElementById("resultstable");
var tableCode = "<table style='width:100%'>";
var en = gotopage * 10, bn = en - 10;
for (x = bn; x < en; x++){
if(!searchResults[x]){
objid = commonname = " "
}else{
commonname = searchResults[x].feature.attributes.common_name;
objid = searchResults[x].name;
}
tableCode += "<tr><td>" + objid + "</td><td>" + commonname + "</td></tr>";
}
tableCode += "</table>";
table.innerHTML = tableCode;
}
</script>
</head>
<body>
<div id="title" style="visibility:hidden; margin-left:auto; margin-right:auto; position:absolute; z-index:10; width:300px; height:230px; background-color:#ffffff; text-align:center; float:center;">title</div>
<div id="viewDiv"></div>
</body>
</html>
