Is it possible to edit or customize Search Result Popup, in your web map? I have an application in which user search for a location, and the search result pop up open, I want to customize that window is it possible, if yes, How can I do that, if no, is there any other way to do it?
Solved! Go to Solution.
Okay, Thanks
I am looking into it.
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
Hey Robert is there anyway, I can edit search widget?
I want to change the placeholder of the search widget, is there any way to do it?
My current Code:
// Adds the search widget to the top right corner of the view Search widget
search = new Search({
view: view,
popupOpenOnSelect: false,
id: "searchLoc",
});
search.defaultSource.withinViewEnabled = true; // Limit search to visible map area only
view.ui.add(search, "top-right"); // Add to the view
Thanks,
Deepak.
Thanks for the reply Robert, but the URL you send me is for the Javascript 3.23 version of ArcGIS, and I am using Javascript 4.6 version, can you redirect me to the URL for 4.6 or share some sample code if possible.
Thanks.
Deepak,
Here is the same reference for 4.6:
var searchWidget = new Search({ view: view,
allPlaceholder: "blah blah",popupOpenOnSelect: false });
I have added the line which you send me, but still, it does not change the placeholder text.
Deepak,
That is because you have not defined multiple sources in the Search widget so that text is not displayed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Search widget with multiple sources - 4.6</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"dojo/domReady!"
], function(
Map,
MapView,
Search) {
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-97, 38], // lon, lat
scale: 10000000
});
var searchWidget = new Search({
view: view,
popupOpenOnSelect: false,
allPlaceholder: "blah blah",
sources: [{
featureLayer: {
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServ...",
},
searchFields: ["DISTRICTID"],
displayField: "DISTRICTID",
exactMatch: false,
outFields: ["DISTRICTID", "NAME", "PARTY"],
name: "Congressional Districts",
placeholder: "example: 3708",
}, {
featureLayer: {
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0",
},
searchFields: ["Name", "Party"],
suggestionTemplate: "{Name}, Party: {Party}",
exactMatch: false,
outFields: ["*"],
name: "Senators",
}]
});
searchWidget.on('select-result', function(evt) {
console.info(evt);
view.popup.open({
location: evt.result.feature.geometry, // location of the click on the view
title: "You clicked here", // title displayed in the popup
content: "This is a point of interest" // content displayed in the popup
});
});
// Add the search widget to the top left corner of the view
view.ui.add(searchWidget, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>