Hi,
I try to create search widget for my map that when someone search the object id of the trees the map shows that tree with popup to user. the problem is the search widget didn't return objid.
Solved! Go to Solution.
Neda,
Strange the search widget works for me with that change in your code. I turned off autosuggest (as it seems to have an issue with OID fields) is that what you mean does not work? When I type 34 in the widget and hit enter it take me to that tree. Here is the full code with corrections:
<!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%;
}
</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>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"esri/widgets/Search",
"esri/widgets/Legend",
"esri/widgets/ScaleBar",
"dojo/domReady!"
], function(Map, MapView, Extent, FeatureLayer, Search, Legend, ScaleBar) {
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 template = {
title: "CSULB Tree Details, Tree ID: {tree_id}",
content: "<li>Common name: <b>{common_name}</b></li>" +
"<li>Scientific name: <b>{scientific_name}</b></li>" +
"<li>Genus: <b>{genus}</b> </li>" +
"<li>Specific epithet: <b>{specific_epithet}</b></li>" +
"<li>Cultivar subspecies: <b>{cultivar_subspecies}</b> </li>" +
"<li>Family: <b>{family}</b> </li>" +
"<li>Condition: <b>{condition}</b> </li>" +
"<li>Average of Trunk dbt: <b>{average_trunk_dbh_cm}</b></li>" +
"<li>Height: <b>{hight_m}</b> Meter</li>" +
"<li>Canopy height: <b>{canopy_height_m}</b> Meter</li>" +
"<li>Canopy width: <b>{canopy_width_m}</b> Meter</li>" +
"<li>Canopy shape: <b>{canopy_shape}</b> Meter</li>" +
"<li>Biomass Mt: <b>{biomass_mt}</b></li>" +
"<li>Co2 sequestration: <b>{co2_sequestration_kg}</b> Kg</li>" +
"<li>Owner: <b>{owner}</b> </li>" +
"<li>Photo: <b>{photo_urls}</b> Meter</li>" +
"<li>Date planted: <b>{date_planted}</b> </li>" +
"<li>ObjectId: <b>{objectid}</b> </li>",
fieldInfos: [{
fieldName: "canopy_width_m",
format: {
digitSeparator: true, // Use a comma separator for large numbers
places: 0 // Sets the number of decimal places to 0 and rounds up
}
}, {
fieldName: "average_trunk_dbh_cm",
format: {
digitSeparator: true,
places: 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: ["*"],
popupTemplate: template
});
map.add(tree);
var search = new Search({
view: view,
sources: [{
featureLayer: tree,
searchFields: ["objectid"],
displayField: "objectid",
exactMatch: true,
outFields: ["*"],
name: "Tree FS",
placeholder: "Object ID",
maxResults: 6,
maxSuggestions: 6,
suggestionsEnabled: true,
minSuggestCharacters: 0
}]
});
view.ui.add(search, "top-right");
var legend = new Legend({
view: view,
layerInfos: [{
layer: campus,
title: "CSULB Campus Land covers"
}]
});
view.ui.add(legend, "bottom-left");
var scaleBar = new ScaleBar({
view: view,
unit: "non-metric"
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Hi
Can you please share some test objectIDs to test in application.
Neda,
Your issue is that you are not setting up your search sources property correctly:
var search = new Search({
view: view,
sources: [{
featureLayer: tree,
searchFields: ["objectid"],
displayField: "objectid",
exactMatch: true,
outFields: ["objectid"],
name: "Tree FS",
placeholder: "object ID",
maxResults: 6,
maxSuggestions: 6,
suggestionsEnabled: false,
minSuggestCharacters: 0
}]
});
Hey Robert,
Thank you for fixing my code, although the search widget shows up with place holder name now, it cannot find the object id of trees, should I add any property to var tree?
Neda,
Strange the search widget works for me with that change in your code. I turned off autosuggest (as it seems to have an issue with OID fields) is that what you mean does not work? When I type 34 in the widget and hit enter it take me to that tree. Here is the full code with corrections:
<!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%;
}
</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>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"esri/widgets/Search",
"esri/widgets/Legend",
"esri/widgets/ScaleBar",
"dojo/domReady!"
], function(Map, MapView, Extent, FeatureLayer, Search, Legend, ScaleBar) {
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 template = {
title: "CSULB Tree Details, Tree ID: {tree_id}",
content: "<li>Common name: <b>{common_name}</b></li>" +
"<li>Scientific name: <b>{scientific_name}</b></li>" +
"<li>Genus: <b>{genus}</b> </li>" +
"<li>Specific epithet: <b>{specific_epithet}</b></li>" +
"<li>Cultivar subspecies: <b>{cultivar_subspecies}</b> </li>" +
"<li>Family: <b>{family}</b> </li>" +
"<li>Condition: <b>{condition}</b> </li>" +
"<li>Average of Trunk dbt: <b>{average_trunk_dbh_cm}</b></li>" +
"<li>Height: <b>{hight_m}</b> Meter</li>" +
"<li>Canopy height: <b>{canopy_height_m}</b> Meter</li>" +
"<li>Canopy width: <b>{canopy_width_m}</b> Meter</li>" +
"<li>Canopy shape: <b>{canopy_shape}</b> Meter</li>" +
"<li>Biomass Mt: <b>{biomass_mt}</b></li>" +
"<li>Co2 sequestration: <b>{co2_sequestration_kg}</b> Kg</li>" +
"<li>Owner: <b>{owner}</b> </li>" +
"<li>Photo: <b>{photo_urls}</b> Meter</li>" +
"<li>Date planted: <b>{date_planted}</b> </li>" +
"<li>ObjectId: <b>{objectid}</b> </li>",
fieldInfos: [{
fieldName: "canopy_width_m",
format: {
digitSeparator: true, // Use a comma separator for large numbers
places: 0 // Sets the number of decimal places to 0 and rounds up
}
}, {
fieldName: "average_trunk_dbh_cm",
format: {
digitSeparator: true,
places: 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: ["*"],
popupTemplate: template
});
map.add(tree);
var search = new Search({
view: view,
sources: [{
featureLayer: tree,
searchFields: ["objectid"],
displayField: "objectid",
exactMatch: true,
outFields: ["*"],
name: "Tree FS",
placeholder: "Object ID",
maxResults: 6,
maxSuggestions: 6,
suggestionsEnabled: true,
minSuggestCharacters: 0
}]
});
view.ui.add(search, "top-right");
var legend = new Legend({
view: view,
layerInfos: [{
layer: campus,
title: "CSULB Campus Land covers"
}]
});
view.ui.add(legend, "bottom-left");
var scaleBar = new ScaleBar({
view: view,
unit: "non-metric"
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Yea, by turning off the autosuggest it works for me too. Thank you.
Great, Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.