nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Program search widget to pop up window from intersecting polygon layer

MichaelHoward3

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?

Finde mehr Beiträge mit dem Tag

Accepted answers

TimWitt2

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.

All comments

TimWitt2

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

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?

BAXTERQ_ANDREWS

Great info. Thanks!

TimWitt2

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.

TimWitt2

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.