topic Re: Popup has two titles in ArcGIS JavaScript Maps SDK Questions

Popup has two titles

Anonymous User — Wed, 01 Aug 2012 19:29:27 GMT

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
    });

Re: Popup has two titles

StephenLead — Wed, 01 Aug 2012 22:03:37 GMT

Hi Dan,

Have you followed the steps listed on the Working With Popups page?

There may be something amiss with your CSS which is causing the title to appear twice. Can you post a link to the live page?

Steve

Re: Popup has two titles

AdamWills — Sat, 11 Dec 2021 07:54:09 GMT

I'm having this issue as well....

This is my PopupTemplate...

    
var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{NAME}",
          fieldInfos: [
           {fieldName: "ADDRESS", visible: true, label:"Address:"},
           {fieldName: "TELEPHONE", visible:true, label:"Phone:"}
          ]
    });

Re: Popup has two titles

KellyHutchins — Sat, 11 Dec 2021 07:54:12 GMT

The Popup info window was designed to display navigation info in the header. For example if you've selected multiple features it will show 1 of 2 with nav arrows. In cases where you are associating the popup with a clicked feature - like in the sample below you will see the title in the top bar of the popup and also at the top of the popup's content section.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_featurecollection.html

You can hide the title in the content using the following css:

      .esriViewPopup .header {
        display:none;
      }
      .esriViewPopup .hzLine{
        display:none;
      }

Re: Popup has two titles

DerekMiller — Sat, 11 Dec 2021 07:54:15 GMT

The Popup info window was designed to display navigation info in the header. For example if you've selected multiple features it will show 1 of 2 with nav arrows. In cases where you are associating the popup with a clicked feature - like in the sample below you will see the title in the top bar of the popup and also at the top of the popup's content section.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_featurecollection.html

You can hide the title in the content using the following css:
      .esriViewPopup .header {
        display:none;
      }
      .esriViewPopup .hzLine{
        display:none;
      }

Hi Kelly... what if you'd rather remove the title from the header section? I understand that the 'default' popup functionality is to show navigation in the header with the title in the content, but in my experience this is not the case. I've been able to implement your solution above, but I would prefer the opposite.

See what I mean here: http://www.portlandbps.com/gis/beResourceful/index.html

I can post code if necessary as well.

Thanks,

- d

Re: Popup has two titles

KellyHutchins — Wed, 24 Oct 2012 13:37:38 GMT

Derek,

I took a look at your site (nice app by the way) and I'm not sure what you are trying to do? Sounds like you want the title in the header - which you have accomplished. Did you want to have both nav and the header?

Hi Kelly... what if you'd rather remove the title from the header section? I understand that the 'default' popup functionality is to show navigation in the header with the title in the content, but in my experience this is not the case. I've been able to implement your solution above, but I would prefer the opposite.

See what I mean here: http://www.portlandbps.com/gis/beResourceful/index.html

I can post code if necessary as well.

Thanks,

- d

Re: Popup has two titles

DerekMiller — Wed, 24 Oct 2012 15:37:35 GMT

Thanks, Kelly. Apologies for the confusion.

I'd like to put the title back into the content pane (in a new app I'm working on... beResourceful was an example).

I can do that by undoing the modifications to the css (think it was .hz line & .header in the css).

I cannot, however, prevent the popup from displaying the title in place of the nav info... which doesn't make any sense and has me confused.

Thoughts? Thanks again.

- derek

Re: Popup has two titles

StephenLead — Wed, 24 Oct 2012 20:50:26 GMT

I cannot, however, prevent the popup from displaying the title in place of the nav info

You could over-write the popup's title with a blank string using something like:

map.infoWindow.setTitle("")

Steve

Re: Popup has two titles

DerekMiller — Wed, 24 Oct 2012 21:25:26 GMT

Thanks, Stephen. You're correct, that will overwrite the popup title. However, I'm still not seeing the navigation info, with or without a title set. Anyone having this issue with popups?

Side note: I am NOT creating the map or popups through arcgisonline, but rather with the popupTemplate configuration parameters.

Thanks again for the thoughts.

Re: Popup has two titles

KellyHutchins — Wed, 24 Oct 2012 21:32:59 GMT

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.

Re: Popup has two titles

DerekMiller — Wed, 24 Oct 2012 21:44:07 GMT

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 -- ?

Re: Popup has two titles

DerekMiller — Sat, 11 Dec 2021 07:54:18 GMT

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>