Is it possible to edit or customize Search Result Popup, in your webmap? I have a 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 ther

3038
17
Jump to solution
01-09-2018 12:09 PM
DeepakBegrajka1
New Contributor III

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?  

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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>

View solution in original post

17 Replies
RobertScheitlin__GISP
MVP Emeritus

Deepak,

  Are you talking about WAB or some of configurable template?

0 Kudos
DeepakBegrajka1
New Contributor III

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.

Esri Search Result Popup

0 Kudos
DanPatterson_Retired
MVP Emeritus

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

Geonet Community Structure

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.

0 Kudos
DeepakBegrajka1
New Contributor III

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>

https://js.arcgis.com/4.6/

Thanks,

Deepak.

0 Kudos
DanPatterson_Retired
MVP Emeritus

I moved the thread to the appropriate location Deepak

Hopefully you will get some targeted responses there.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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>
DeepakBegrajka1
New Contributor III

Thanks a lot Robert for replying.

0 Kudos
DeepakBegrajka1
New Contributor III

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 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Deepak,

   That would involve doing a reverse geocode using a locator, yes it is possible.