RyanRGC

How to turn off default popup behaviour?

Discussion created by RyanRGC on Dec 6, 2013
Latest reply on Mar 11, 2014 by tligon
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);
  }


    });

Attachments

Outcomes