Popup has two titles

Anonymous User · ‎08-01-2012

I have a popup window that displays the title twice. I really want to use the title field but it looks really weird as is. I have tried pulling from an attribute field as well as inputting plain text for the title. Anyone have any ideas??

    var popup = new esri.dijit.Popup(null, dojo.create("div"));
 
    map = new esri.Map("map", {
        extent: initExtent,
        infoWindow:popup
    });



          //define a popup template
       popupTemplate = new esri.dijit.PopupTemplate({
          title: "INCIDENT",
          fieldInfos: [
          {fieldName: "DESCRIPTION",label:"DESCRIPTION", visible: true},
          {fieldName: "ADDRESS", label:"LOCATION", visible: true},
          {fieldName: "START_DATE", label:"DATE", visible:true ,format:{dateFormat:'shortDate'}}
          ]
        });


    featureLayer = new esri.layers.FeatureLayer("http://gis6.midland-mi.org/ArcGIS/rest/services/PublicSafety/MapServer/0", {
        mode: esri.layers.FeatureLayer.MODE_SELECTION,
        outFields:["*"],
        infoTemplate: popupTemplate
    });

DerekMiller · ‎10-24-2012

The navigation info is displayed when you use popup.setFeatures to associate one or more features with the popup. So if you don't use setFeatures you'll only see one feature at a time.

Ok. That makes sense. So it's necessary to query selected features in the feature layer using featurelayer.selectFeatures(query); as opposed to map.infoWindow.setFeatures(evt.graphic); -- which is what I'm currently using to highlight the feature -- ?

DerekMiller · ‎10-25-2012

Thanks, Kelly. I got stuck, but finally made it work. Took a minute to realize that I had to query the map for the existence of a feature layer record as opposed to a click event on the feature layer to add multiple features to the infowindow. I used the sample here:

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/fl_popup/index.html

Here's my result

<script>
    // require the dojo layout dijits (map, header, etc.) so that the parser can auto create the layout elements
    require(["dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button", "dijit/form/TextBox", "dijit/Tooltip"]);
    
    // declare the map as a global variable to expose the element to the 'dojo/domReady!' function, and also the functions which follow outside the 'dojo/domReady!' function
    var map;
    
    // the dojo/domReady! function... the primary function of the application. Creates the map, adds & symbolizes operational layers
    require(["esri/Map", "esri/layers/FeatureLayer", "esri/dijit/InfoWindow", "esri/dijit/Popup", "esri/tasks/locator", "esri/tasks/query", "esri/symbol", "esri/Renderer", "dojo/_base/declare", "dojo/number", "dojo/parser", "dojo/dom", "dojo/query", "dojo/domReady!"],
      function(Map, FeatureLayer, InfoWindow, Popup, Locator, Query, Symbol, Renderer, declare, dojoNum, parser, dom, query) {
        //parse the script call and the dijits
        parser.parse();
        
        // define the basic popup options -- location and highlight symbol -- must be declared prior to instantiating the popup
        popupOptions = {
          'markerSymbol': new esri.symbol.SimpleMarkerSymbol('circle', 32, null, new dojo.Color([0, 0, 0, 0.25])),
          'marginLeft': '20',
          'marginTop': '20'
        };
        
        //define the gray marker symbol that indicates the 'clicked' feature
        var selectionSymbol = new esri.symbol.SimpleMarkerSymbol('circle', 32, null, new dojo.Color([0, 0, 0, 0.25]));
        
        //instantiate the popup to replace the default infoWindow
        myPopup = new esri.dijit.Popup(popupOptions, dojo.create("div"));
        
        //define the contents of the popup after creating the instance of the popup AND before assigning the template to the featureLayer -- last part is crucial        
        popupTemplate = new esri.dijit.PopupTemplate({
          title: "{building_name}",
          //description: "<h4>{building_name}</h4><hr/>{Short_Desc}",
          description: "{Short_Desc}",
          mediaInfos: [{
            "type": "image",
            "value": {
              "sourceURL": "{image_path}",
              "linkURL": "{image_path}"
            }
          }]
        });
        
        // define the initial extent of the map, this extent will also be used for the 'home' button, and any other function that requires the map to be re-centered, refreshed, etc. -- this is a global variable
        initialExtent = new esri.geometry.Extent({"xmin":-13661953.141290296,"ymin":5699870.980710014,"xmax":-13643608.25450188,"ymax":5708508.36490626,"spatialReference":{"wkid":102100}});
        
        //instantiate the map, this is a global variable that can be accessed by multiple functions outside of the dojo/domReady! function
        map = new esri.Map("map", {
          "extent": initialExtent,
          "wrapAround180": true,
          slider: false,
          showAttribution: false,
          infoWindow: myPopup
        });
        
        //add the basemap tile cache to the map object defined above
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"));
        
        //define the symbols
        var defaultSymbol = new esri.symbol.PictureMarkerSymbol({
          "angle": 0,
          "xoffset": 0,
          "yoffset": 12,
          "type": "esriPMS",
          "url" : "images/skullNbones.png",
          "contentType": "image/png",
          "width": 14,
          "height": 14
        });
        
        //define the default renderer
        var defRend = new esri.renderer.SimpleRenderer(defaultSymbol);
        
        // add a fake feature layer to the map so that you have features to click... even though you're querying the other feature layer -- confusing yes
        window.testUrl = "http://cgisagsec2.portlandoregon.gov/arcgis/rest/services/BPS/gda/MapServer/0";
        gdaTest = new FeatureLayer(window.testUrl, {
          "mode": esri.layers.FeatureLayer.MODE_SNAPSHOT
        });
        gdaTest.setRenderer(defRend);
        map.addLayer(gdaTest);
        
        //define the gda operational layer as a feature layer as a global variable
        window.gdaUrl = "http://cgisagsec2.portlandoregon.gov/arcgis/rest/services/BPS/gda/MapServer/0";
        window.outFields = ["*"];
        gda = new FeatureLayer(window.gdaUrl, {
          "id": "gda",
          "mode": esri.layers.FeatureLayer.MODE_SELECTION, // ONDEMAND, could also be esri.layers.FeatureLayer.MODE_ONDEMAND
          infoTemplate: popupTemplate,
          "outFields": window.outFields // returns all fields in the feature layer for use in the popup, queries, etc. Will need to call only those fields which are used by the application to increase perfo
        });
        
        // define the default definition expression to remove the records in need of review
        gda.setDefinitionExpression("review = 'false'");
        
        // define the default symbol renderer to use in the absence of anything else that makes sense
        gda.setRenderer(defRend);
             
        //add the gda layer to the map 
        map.addLayer(gda);
        
        // universal utility to resize the map div when the browser re-sizes
        dojo.connect(map, "onLoad", function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId("map"), "resize", map, map.resize);
          // show the border container now that the dijits 
          // are rendered and the map has loaded
          dojo.style(dijit.byId("container").domNode, "visibility", "visible");
        });
        
        //connect to the map to query the feature layer when clicked -- if feature layer exists, show the popup & selection graphic, else nothing (hide popup if existing)
        dojo.connect(map, "onClick", function(evt) {
          map.infoWindow.hide();
          map.graphics.clear();
          var query = new esri.tasks.Query();
          query.geometry = pointToExtent(map, evt.mapPoint, 25);
          var deferred = gda.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (results) {
            var result = results.length;
            if (result >= 1) {
              map.infoWindow.setFeatures([deferred]);
              map.infoWindow.show(evt.mapPoint);
            }
          })
        });
        
        //instantiate the locator
        locator = new esri.tasks.Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
        
        //zoom control function
        dojo.connect(dijit.byId('zoomIn'), "onClick", function(){
          map.setLevel(map.getLevel()+1);
        });
        
        dojo.connect(dijit.byId('zoomExtent'), "onClick", function(){
          map.setExtent(initialExtent);
          map.graphics.clear();
          map.infoWindow.hide();
        });
        
        dojo.connect(dijit.byId('zoomOut'), "onClick", function(){
          map.setLevel(map.getLevel()-1);
        });
      
  //the following curly brace and closing parentheses are the end of the dojo/domReady! function  
      }
  );
  //end of the dojo/domReady! function
  
  function pointToExtent(map, point, toleranceInPixel) {
       var pixelWidth = map.extent.getWidth() / map.width;
       var toleraceInMapCoords = toleranceInPixel * pixelWidth;
       return new esri.geometry.Extent( point.x - toleraceInMapCoords,
                    point.y - toleraceInMapCoords,
                    point.x + toleraceInMapCoords,
                    point.y + toleraceInMapCoords,
                    map.spatialReference );                           
  }
  </script>