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.
Deepak,
You will need to set the search widgets popupOpenOnSelect property to false so that you can catch the select-result event yourself and display the views popup with you own customized content.
<!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
});
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>
Deepak,
Are you talking about WAB or some of configurable template?
Hey Robert,
I am not talking about WAB, I am developing customise web application using web map ID of my company map.
I use Arcgis 4.6 for development, with HTML, CSS, JS, Bootstrap.
In my app I have added a Search widget in which if user enter a location he will be directed to that location and a address-search-result-popup opens, which has title as Search result, also it has the address of the current location,
I want to customise this Popup.
Can you help me with it.
Thanks.
Arcgis 4.6 ? what are you referring to?
You have this posted in GeoNet Help.... which is about getting help on how to use GeoNet.
Perhaps, you might want to redirect your question to a more suitable location within the
you can use the Move option once you find a location.
Also, could you shorten your title and put most of what is there in the body of the question, It just tends to attract an audience when the title is short and focussed.
By Arcgis 4.6 I meant, I am using latest ArcGIS API for javascript, API Reference version 4.6 for web development.
You can access the below URL for developer resources.
Overview | API Reference | ArcGIS API for JavaScript 4.6
This is URL is included as your Script source.
<script src="https://js.arcgis.com/4.6/"></script>
Thanks,
Deepak.
I moved the thread to the appropriate location Deepak
Hopefully you will get some targeted responses there.
Deepak,
You will need to set the search widgets popupOpenOnSelect property to false so that you can catch the select-result event yourself and display the views popup with you own customized content.
<!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
});
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>
Thanks a lot Robert for replying.
Hey Guy,
I have one more question, is it possible to get physical address of the location if you search the location using latitude and longitude?
By physical address I mean, Street, city, Zip.
Thanks,
Deepak
Deepak,
That would involve doing a reverse geocode using a locator, yes it is possible.