Program search widget to pop up window from intersecting polygon layer

6663
14
Jump to solution
05-08-2015 12:13 PM
MichaelHoward3
New Contributor II

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?

1 Solution

Accepted Solutions
TimWitt2
MVP Alum

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.

View solution in original post

14 Replies
TimWitt2
MVP Alum

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

TimWitt2
MVP Alum

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.

MichaelHoward3
New Contributor II

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?

0 Kudos
TimWitt2
MVP Alum

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

MichaelHoward3
New Contributor II

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.

0 Kudos
TimWitt2
MVP Alum

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

0 Kudos
MichaelHoward3
New Contributor II

Tim,

Please see attached code.

Thank you for your assistance!

Michael

0 Kudos
TimWitt2
MVP Alum

Michael it might have something to do with the layer.

Check this fiddle: Edit fiddle - JSFiddle

Type in an address and it will work.

MichaelHoward3
New Contributor II

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!

0 Kudos