How to turn off default popup behaviour?

RyanCoghlin — Fri, 06 Dec 2013 18:07:56 GMT

To be able to display multiple features in my popups, I get the map onClick event and use that to select features in a feature layer using the code below.

dojo.connect(map, "onClick", function (evt) {
    selectMapFeatures(evt);
  });
  
  function selectMapFeatures (evt) {
    featureLayer.clearSelection();
    var query = new esri.tasks.Query();
          /*query.geometry = evt.mapPoint;*/
    query.geometry = pointToExtent(map, evt.mapPoint, 40);
          var deferred = featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(evt.mapPoint);
  }
  
  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);
  }

This works as expected if I click near a group of features, as shown here... 12 features stacked and 12 features returned in popup.
[ATTACH=CONFIG]29655[/ATTACH]

However, when I click right on the graphic only a single feature is shown in the popup. I have tried intercepting the featureLayer onMouseUp event and passing that into the my selectMapFeatures function, but that doesn't work either. Any idea how to disable this behaviour so that my function will always be used?

Full code:

var map, featurelayer, toggle;
    require([
      "esri/map",
   "esri/InfoTemplate",
   "esri/dijit/Popup",
   "esri/dijit/PopupTemplate", 
      "esri/dijit/BasemapToggle", 
      "esri/config",
   "esri/layers/FeatureLayer",
   "esri/renderers/UniqueValueRenderer",
   "esri/symbols/SimpleLineSymbol",
   "esri/symbols/SimpleMarkerSymbol",
   "dojo/dom-construct",
      "dojo/on",
   "dijit/form/Button",
      "dojo/domReady!",
   "dojo/parser"   
    ], function(
      Map, InfoTemplate, PopupTemplate, Popup,
   BasemapToggle, esriConfig, FeatureLayer, UniqueValueRenderer,
   SimpleLineSymbol, SimpleMarkerSymbol, domConstruct, on
    )  {
   
   var popup = new esri.dijit.Popup({
            titleInBody: false
        },domConstruct.create("div"));
  
   var template = new esri.dijit.PopupTemplate({
          description: "<b>{Asset}</b><br>"+
     "{Address}<br>"+
     "<a href={Website}>{Website}</a>",
          fieldInfos: [{
     fieldName: "Asset",
            label: "Asset",
            visible: false
          }, {
     fieldName: "Subcategor",
            label: "Subcategory",
            visible: true
          }, {
     fieldName: "Address",
            label: "Address",
            visible: true
          }, {
     fieldName: "Website",
            label: "Website",
            visible: true
          }]
        });
   
   esriConfig.defaults.map.basemaps.vector = {
        baseMapLayers: [      
   { url: "http://myserver/ArcGISdev/rest/services/Basemaps/vectorbasemap/MapServer" }
        ],
        title: "Basemap"
      };
   esriConfig.defaults.map.basemaps.imagery = {
        baseMapLayers: [
   { url: "http://myserver/ArcGISdev/rest/services/Basemaps/ortho2013/MapServer" }
        ],
        title: "2013 Imagery"
      };
  
   var ext = new esri.geometry.Extent(
   {"xmin":670000,"ymin":4862260,"xmax":672400,"ymax":4864560,"spatialReference":{"wkid":26917}}
   ); 
  
   map = new Map("map", {
  infoWindow: popup,
  extent: ext,
  /*center: [-70.651, 43.145],*/
        zoom: 5,
  logo: false,
        basemap: "imagery",
  sliderPosition: "top-left",
        sliderStyle: "small",
  sliderOrientation: "horizontal"
      });
            
      toggle = new BasemapToggle({
        map: map,
        basemap: "vector",
        basemaps: {
          vector: {
            label: "Basemap",
   url: "http://js.arcgis.com/3.7/js/esri/dijit/images/basemaps/topo.jpg"
          }, imagery: {
            label: "Imagery",
            url: "http://js.arcgis.com/3.7/js/esri/dijit/images/basemaps/topo.jpg"
          }
        }
      }, "BasemapToggle");
      toggle.startup();
   
   var symbol = new esri.symbol.SimpleMarkerSymbol(
               esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 
               13, new esri.symbol.SimpleLineSymbol(
                 esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
                 new dojo.Color([255, 255, 255, 0.5]), 
                 8
             ));

          //create renderer
          var renderer = new UniqueValueRenderer(symbol, "Category");

          //add symbol for each possible value
          renderer.addValue("CommunityCulturalOrganization", new esri.symbol.PictureMarkerSymbol("images/ico_CommunityCulturalOrganizations.png", 32, 37));
          renderer.addValue("CulturalEnterprises", new esri.symbol.PictureMarkerSymbol("images/ico_CulturalEnterprises.png", 32, 37));
          renderer.addValue("CulturalFacilities", new esri.symbol.PictureMarkerSymbol("images/ico_CulturalFacility.png", 32, 37));
          renderer.addValue("CulturalHeritage", new esri.symbol.PictureMarkerSymbol("images/ico_CulturalHeritage.png", 32, 37));
          renderer.addValue("FestivalsAndEvents", new esri.symbol.PictureMarkerSymbol("images/ico_FestivalsEvents.png", 32, 37));
          renderer.addValue("NaturalHeritage", new esri.symbol.PictureMarkerSymbol("images/ico_NaturalHeritage.png", 32, 37));
          
          featureLayer = new FeatureLayer("http://myserver/ArcGISdev/rest/services/culturemap/MapServer/0", {
            infoTemplate: template,
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
          });
          
          featureLayer.setRenderer(renderer);

          map.addLayer(featureLayer);

  dojo.connect(dojo.byId('btnCultOrg'), 'onclick', function(e){
   featureLayer.clearSelection();
   featureLayer.setDefinitionExpression("Category='CommunityCulturalOrganization'");
  });
  dojo.connect(dojo.byId('btnCultEnt'), 'onclick', function(e){
   featureLayer.clearSelection();
   featureLayer.setDefinitionExpression("Category='CulturalEnterprises'");
  });
  dojo.connect(dojo.byId('btnCultFac'), 'onclick', function(e){
   featureLayer.clearSelection();
   featureLayer.setDefinitionExpression("Category='CulturalFacilities'");
  });
  dojo.connect(dojo.byId('btnCultHer'), 'onclick', function(e){
   featureLayer.clearSelection();
   featureLayer.setDefinitionExpression("Category='CulturalHeritage'");
  });
  dojo.connect(dojo.byId('btnFestEvt'), 'onclick', function(e){
   featureLayer.clearSelection();
   featureLayer.setDefinitionExpression("Category='FestivalsAndEvents'");
  });
  dojo.connect(dojo.byId('btnNatHer'), 'onclick', function(e){
   featureLayer.clearSelection();
   featureLayer.setDefinitionExpression("Category='NaturalHeritage'");
  });
  
  dojo.connect(featureLayer, "onClick", function (evt) {
    selectMapFeatures(evt);
  });
  
  //intercept the onMouseUp event on featurelayer graphics to use the custom
  //selectMapFeatures Task and not the default behaviour
  dojo.connect(featureLayer, "onMouseUp", function (evt) {
    selectMapFeatures(evt);
  });
  
  dojo.connect(map, "onClick", function (evt) {
    selectMapFeatures(evt);
  });
  
  function selectMapFeatures (evt) {
    featureLayer.clearSelection();
    var query = new esri.tasks.Query();
          /*query.geometry = evt.mapPoint;*/
    query.geometry = pointToExtent(map, evt.mapPoint, 40);
          var deferred = featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(evt.mapPoint);
  }
  
  //this is just a function that buffers the click point by number of pixels and returns an Extent.
  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);
  }


    });

Re: How to turn off default popup behaviour?

JasonZou — Sat, 07 Dec 2013 19:45:14 GMT

When you click on a feature, the following events will be fired based on your code.

map.onClick

featureLayer.onClick

featureLayer.onMouseUp

infoWindow popup defined by infoTemplate

All the above events are for one thing: display the attributes for the clicked feature(s). Defining any one of them should accomplish what you need. I'd suggest to remove the event handlers for map.onClick and featureLayer.onMouseUp. Keep either infoTemplate or featureLayer.onClick but not both.

Re: How to turn off default popup behaviour?

RyanCoghlin — Mon, 09 Dec 2013 22:47:49 GMT

Thanks for the response Jason. You're right, I do have several events doing the same thing... I kept adding event handlers to try to get it to work and they aren't all needed. However, InfoTemplate on its own will only return a single feature for me, even in a scenario where several points are coincident. So I either need to change the InfoTemplate behaviour so that it can return multiple features or disable it and allow only my select by location to fire whenever the map is clicked. Haven't had luck doing either of these yet...

Re: How to turn off default popup behaviour?

JasonZou — Tue, 10 Dec 2013 01:03:33 GMT

First of all, I have to correct what I said in my previous post. You will need to set the infoTemplate for the feature layer, and define map.onClick event handler to make it work correctly. Here is an ESRI sample for accomplishing the similar thing.

I am kind of confused about your issue. When you click right on a graphic, a single feature is supposed to be shown in the popup. Can you make it clear what your issue is?

Re: How to turn off default popup behaviour?

JeffSmith8 — Tue, 10 Dec 2013 17:48:21 GMT

Ryan,

I don't know if this will help at all, but I noticed in your full code listing that the parameters in the function call for Popup and PopupTemplate are reversed from their order in the require statement.

- Jeff

Re: How to turn off default popup behaviour?

RyanCoghlin — Wed, 11 Dec 2013 13:21:50 GMT

Thanks Jeff. I did have Popup and PopupTemplate reversed in the function call. I corrected this but nothing seems to have changed.

My issue is still this... in the location below there are 12 coincident features. With the map.onlick event that I defined to select features within 40 pixels of the map click, I can get all the features in to the popup.
[ATTACH=CONFIG]29765[/ATTACH]

But this ONLY works if I click NEAR the graphic. If I click on the feature layer graphic, I can only get one of those features in to the popup, despite there actually being 12 features stacked there. This makes it seem that there is only a single feature there.
[ATTACH=CONFIG]29766[/ATTACH]

I want to get all 12 features into the popup whether I click near or on the graphic...

Re: How to turn off default popup behaviour?

TyroneLigon — Tue, 11 Mar 2014 14:47:59 GMT

Ryan,

Did you solve this? I have a function much like yours in my application - click on or around a marker in a graphics layer, create a 20x20 pixel extent around the click point, figure out which markers are contained by the extent and put them in an array, then set the popup's features to the array. The only major difference I see between your implementation and mine is in my map initialization - I set the parameter "showInfoWindowOnClick" to "false". Give that a shot...

topic Re: How to turn off default popup behaviour? in ArcGIS JavaScript Maps SDK Questions

How to turn off default popup behaviour?

Re: How to turn off default popup behaviour?

Re: How to turn off default popup behaviour?

Re: How to turn off default popup behaviour?

Re: How to turn off default popup behaviour?

Re: How to turn off default popup behaviour?

Re: How to turn off default popup behaviour?