Solved! Go to Solution.
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
//spatialReference: 102100
});
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>
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
//spatialReference: 102100
});
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>
Yes Robert, Thank you very much.
Hi Robert,
I am trying to link the template to the search table, can you please tell me what is the best way to do that? I couldn't find any properties. this is my first project that using javascript and API.
Neda,
What is the "template"? What do you mean link them?
Neda,
What you are asking is no small task. You are currently just building a simple html table with paging. So first you would have to attach click events to each row and have it return the ObjectId so that you can search the FeatureLayer to get the graphic based on the ObjectId and then set the graphics popuptemplate based on your template and show the view popup using that grapic.