Replicating a feature click, without clicking

AustinLasher · ‎02-10-2015

Gist of the problem:

I've built a convenient search widget that finds features on the map based on specified attributes. The issue I'm having is with replicating a click onto this feature. Right out of the box, if you click on a feature on the map the API will highlight the symbol with a little blue box, and show its InfoWindow, if it has one. I would like to replicate this functionality, but without clicking on it at all.

More information:

I've actually manually implemented what I'm asking above already, but it isn't working properly. I do this by generating a point that represents the graphic (say, the center of an extent, or the midpoint on a polyline,) zooming to it, then I manually create a graphic to highlight it along with an infoWindow. My actual problem is the infoWindow I'm creating has all of the attributes showing that I'd like, but coded values work strangely. If you click on the map normally, it will show the coded value description as the value (ex. "Some Waste Company") in the infoWindow. If, however, you run my search and view my manually generated infoWindow, it shows the coded value's code instead (ex. "SWC".) Because of how seemingly complicated it is to implement something that seems so simple, I can't help but wonder if there's an easier way to do it. If there isn't, then my follow up question would of course be "how do I fix these stupid infoWindows?"

Thanks a lot, I'll be happy to reply with additional information.

RobertScheitlin__GISP · ‎02-10-2015

Austin,

Sure you can manually show a features popup. If the FeatureLayer already has a popupTemplate or an infoTemplate assigned to it then all you have to do is set the maps infoWindow.setFeatures method

map.infoWindow.setFeatures([statePoly]);
map.infoWindow.show(pt);

and the popup will display using the predefined infowindow template just as if you had clicked on the feature in the map.

RobertScheitlin__GISP · ‎02-10-2015

Austin,

Here is a sample where you enter a state name in the geocoder widget and the map zooms and displays the popup for the Boston marathon runners in that state.

<!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>Popup</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
    <style>
      html, body, #map {
        padding: 0;
        margin: 0;
        height: 100%;
      }

      /* Change color of icons to match bar chart and selection symbol */
      .esriPopup.dark div.titleButton,
      .esriPopup.dark div.titlePane .title,
      .esriPopup.dark div.actionsPane .action {
        color: #A4CE67;
      }
      /* Additional customizations */
      .esriPopup.dark .esriPopupWrapper {
        border: none;
      }
      .esriPopup .contentPane {
        text-align: center;
      }
      .esriViewPopup .gallery {
        margin: 0 auto;
      }

      #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 74px;
      }
    </style>

    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
      var map;
      require([
        "esri/map", "dojo/dom", "esri/geometry/Point", "esri/graphic", "esri/geometry/Polygon",
        "esri/dijit/Popup", "esri/dijit/PopupTemplate", "dojo/_base/array",
        "esri/layers/FeatureLayer", "esri/dijit/Geocoder",
        "esri/symbols/SimpleFillSymbol", "esri/Color",
        "dojo/dom-class", "dojo/dom-construct", "dojo/on", 'dojo/_base/lang',
        "dojox/charting/Chart", "dojox/charting/themes/Dollar",
        "dojo/domReady!"
      ], function(
        Map, dom, Point, Graphic, Polygon,
        Popup, PopupTemplate, array,
        FeatureLayer, Geocoder,
        SimpleFillSymbol, Color,
        domClass, domConstruct, on, lang,
        Chart, theme
      ) {
        //The popup is the default info window so you only need to create the popup and
        //assign it to the map if you want to change default properties. Here we are
        //noting that the specified title content should display in the header bar
        //and providing our own selection symbol for polygons.
        var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
        var popup = new Popup({
            fillSymbol: fill,
            titleInBody: false
        }, domConstruct.create("div"));
        //Add the dark theme which is customized further in the <style> tag at the top of this page
        domClass.add(popup.domNode, "dark");

        map = new Map("map", {
          basemap: "gray",
          center: [-98.57, 39.82],
          zoom: 4,
          infoWindow: popup
        });

        var template = new PopupTemplate({
          title: "Boston Marathon 2013",
          description: "{STATE_NAME}:  {Percent_Fi} of starters finished",
          fieldInfos: [{ //define field infos so we can specify an alias
            fieldName: "Number_Ent",
            label: "Entrants"
          },{
            fieldName: "Number_Sta",
            label: "Starters"
          },{
            fieldName: "Number_Fin",
            label: "Finishers"
          }],
          mediaInfos:[{ //define the bar chart
            caption: "",
            type:"barchart",
            value:{
              theme: "Dollar",
              fields:["Number_Ent","Number_Sta","Number_Fin"]
            }
          }]
        });

        var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: template
        });
        map.addLayer(featureLayer);

        geocoder = new Geocoder({
          map: map,
          autoNavigate: false
        }, "search");
        geocoder.startup();

        on(geocoder, "find-results", function(results){
          var mpPt = results.results.results[0].feature.geometry;
          var scrPt = map.toScreen(mpPt);
          featureLayer.graphics.some(function(graphic, index, array){
            if (graphic.geometry.getExtent().contains(mpPt)){
              if (graphic.geometry.contains(mpPt)){
                map.infoWindow.setFeatures([graphic]);
                map.infoWindow.show(mpPt);
                return true;
              }
            }
            return false;
          });
          map.centerAndZoom(mpPt,8);
        });
      });
    </script>
  </head>

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

</html>