topic Re: Program search widget to pop up window from intersecting polygon layer in ArcGIS JavaScript Maps SDK Questions

Program search widget to pop up window from intersecting polygon layer

MichaelHoward3 — Fri, 08 May 2015 19:13:59 GMT

Looking to program this functionality using the search widget: User searches for address or feature layer field but rather than show the info window from the search layer, a pop up windows appears for the polygon layer that contains or intersects with the search result point location. Is this possible?

Re: Program search widget to pop up window from intersecting polygon layer

TimWitt2 — Fri, 08 May 2015 19:18:07 GMT

Michael,

you could run a function that uses the x/y coordinate that is returned from your address locator to select the polygon it falls into.

This is the event you are looking for Geocoder | API Reference | ArcGIS API for JavaScript

Tim

Re: Program search widget to pop up window from intersecting polygon layer

TimWitt2 — Fri, 08 May 2015 19:23:32 GMT

Look at this example: ArcGIS API for JavaScript Sandbox

Instead of using the map click event.point you just need to create your own "event point" that you can get from the find-results event.

I hope this explains it a little bit better.

Re: Program search widget to pop up window from intersecting polygon layer

BAXTERQ_ANDREWS — Fri, 08 May 2015 22:18:27 GMT

Great info. Thanks!

Re: Program search widget to pop up window from intersecting polygon layer

MichaelHoward3 — Mon, 11 May 2015 16:18:39 GMT

Thank you Tim. I understand what you are explaining on a conceptual level but I am new to programming. What specifically should I being looking for in the example code you referenced?

Re: Program search widget to pop up window from intersecting polygon layer

TimWitt2 — Fri, 10 Dec 2021 21:22:47 GMT

Michael,

look at the following code:

I have added lines 73 to 81.

Line 81 will call the function starting line 106. At this moment it will not select anything from the layers in the example because the geocoded point doesnt fall within a polygon. But assuming it would, it would open the popup and show information about each layer it intersects with.

Just to be able to see it use the following address: 920 Sandhurst Rd Bloomfield Hills

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Identify with Popup</title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
        #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 75px;
      }
    </style>


    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      var map;


      require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/dijit/Popup",
        "dojo/_base/array",
        "esri/Color",
        "dojo/dom-construct",
  "esri/dijit/Geocoder",
        "dojo/domReady!"
      ], function (
        Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
        SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
        arrayUtils, Color, domConstruct,Geocoder
      ) {


        var identifyTask, identifyParams, NeededPoint;


        var popup = new Popup({
          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
        }, domConstruct.create("div"));


        map = new Map("map", {
          basemap: "satellite",
          center: [-83.275, 42.573],
          zoom: 18,
          infoWindow: popup
        });

        map.on("load", mapReady);
  geocoder = new Geocoder({
          map: map,
          autoComplete: true
        },"search");
        geocoder.startup();



  geocoder.on("select", executeIdentifyTask);



        var parcelsURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
        map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL,
          { opacity: 0.55 }));


        function mapReady () {
          map.on("click", executeIdentifyTaskClick );
          //create identify tasks and setup parameters
          identifyTask = new IdentifyTask(parcelsURL);


          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 3;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 2];
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
          identifyParams.width = map.width;
          identifyParams.height = map.height;
        }


        function executeIdentifyTask (event) {
          identifyParams.geometry = event.result.feature.geometry;
          identifyParams.mapExtent = event.result.feature.extent;


          var deferred = identifyTask
            .execute(identifyParams)
            .addCallback(function (response) {
              // response is an array of identify result objects
              // Let's return an array of features.
              return arrayUtils.map(response, function (result) {
                var feature = result.feature;
                var layerName = result.layerName;


                feature.attributes.layerName = layerName;
                if (layerName === 'Tax Parcels') {
                  var taxParcelTemplate = new InfoTemplate("",
                    "${Postal Address} <br/> Owner of record: ${First Owner Name}");
                  feature.setInfoTemplate(taxParcelTemplate);
                }
                else if (layerName === 'Building Footprints') {
                  console.log(feature.attributes.PARCELID);
                  var buildingFootprintTemplate = new InfoTemplate("",
                    "Parcel ID: ${PARCELID}");
                  feature.setInfoTemplate(buildingFootprintTemplate);
                }
                return feature;
              });
            });


          // InfoWindow expects an array of features from each deferred
          // object that you pass. If the response from the task execution
          // above is not an array of features, then you need to add a callback
          // like the one above to post-process the response and return an
          // array of features.
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.result.feature.geometry);
        }
  function executeIdentifyTaskClick (event) {
                identifyParams.geometry = event.mapPoint;
  identifyParams.mapExtent = map.extent;


          var deferred = identifyTask
            .execute(identifyParams)
            .addCallback(function (response) {
              // response is an array of identify result objects
              // Let's return an array of features.
              return arrayUtils.map(response, function (result) {
                var feature = result.feature;
                var layerName = result.layerName;


                feature.attributes.layerName = layerName;
                if (layerName === 'Tax Parcels') {
                  var taxParcelTemplate = new InfoTemplate("",
                    "${Postal Address} <br/> Owner of record: ${First Owner Name}");
                  feature.setInfoTemplate(taxParcelTemplate);
                }
                else if (layerName === 'Building Footprints') {
                  console.log(feature.attributes.PARCELID);
                  var buildingFootprintTemplate = new InfoTemplate("",
                    "Parcel ID: ${PARCELID}");
                  feature.setInfoTemplate(buildingFootprintTemplate);
                }
                return feature;
              });
            });


          // InfoWindow expects an array of features from each deferred
          // object that you pass. If the response from the task execution
          // above is not an array of features, then you need to add a callback
          // like the one above to post-process the response and return an
          // array of features.
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
        }
      });
    </script>
  </head>

  <body>
    <div id="search"></div>
    <div id="map"></div>
  </body>


</html>

I hope this helps somewhat. Let me know if you have any question!

Tim

Re: Program search widget to pop up window from intersecting polygon layer

MichaelHoward3 — Mon, 11 May 2015 19:07:42 GMT

Tim,

Try this address using your code: 572 Pineway Cir.

This address does fall within a parcel, but the popup does not show any information on the search result. Manually clicking on this parcel does show information.

Re: Program search widget to pop up window from intersecting polygon layer

TimWitt2 — Mon, 11 May 2015 19:17:16 GMT

Is there a way you can share your code or a link to a fiddle?

Re: Program search widget to pop up window from intersecting polygon layer

MichaelHoward3 — Tue, 12 May 2015 14:01:53 GMT

Tim,

Please see attached code.

Thank you for your assistance!

Michael

Re: Program search widget to pop up window from intersecting polygon layer

TimWitt2 — Tue, 12 May 2015 14:36:13 GMT

Michael it might have something to do with the layer.

Check this fiddle: Edit fiddle - JSFiddle

Type in an address and it will work.

Re: Program search widget to pop up window from intersecting polygon layer

MichaelHoward3 — Tue, 12 May 2015 15:18:38 GMT

That's great! I will have to figure out why it would not work with my feature layer.

Is it possible to get the same popup window when the map is manually clicked as well? Also, can the popup window display the info for all intersecting layers at once, instead of scrolling through each layer window with the arrow?

Thanks!

Re: Program search widget to pop up window from intersecting polygon layer

TimWitt2 — Tue, 12 May 2015 15:23:58 GMT

Here is an updated fiddle that will also work with just clicking the map: Edit fiddle - JSFiddle

I don't know how to show all layers in one window, this would include a lot of customized code.

Re: Program search widget to pop up window from intersecting polygon layer

MichaelHoward3 — Tue, 12 May 2015 15:30:16 GMT

Thank you!

Re: Program search widget to pop up window from intersecting polygon layer

Anonymous User — Fri, 01 Sep 2017 13:01:44 GMT

Awesome info -- any ideas on how to accomplish this by modifying the 'Search Widget' code in Web App Builder Developer Edition?

Re: Program search widget to pop up window from intersecting polygon layer

TimWitt2 — Fri, 01 Sep 2017 17:34:31 GMT

It would look something like this. you just need to access the search widget.

Edit fiddle - JSFiddle