[GIS] ArcGIS API Javascript – FeatureLayer from json: problem with queries and popup

arcgis-javascript-apifeature-layerjsonpopupquery

Hello everybody
I've tried this code proposed by Derek Swingley in JSFIDDLE:
JSFIDDLE-FeatureLayer from JSON
Everything "seems" to work fine, but not always. If you go down to the closer scale (level 21 I suppose) and click several times on different points of the line, sometimes you get a popup with the text "(1 of 3)" in the black section of the popup and sometimes you get the text "Buck Creek 3". Once you press in the arrow keys of the popup, this title doesn't return, you will always have the "(x of 3)" text and, besides, the order is a bit strange. Pressing the right arrow, it passes from "Buck Creek 3" to "Buck Creek 2" and after that to "Buck Creek 3" again. It's needed to press several times the left arrow to get to "Buck Creek 1".
I have built a similar example, replacing lines with points in the json. In this case, I never get the "(1 of 3)" text when the popup has just opened. Now, similarly, if I press the arrow keys of the popup, I always get the "(x of 3)" text. And with points I have same problem with the order.
I think the problem is related to the matter that the feature layer is coming from a JSON, because if I create it from an ArcGIS Server URL I'm not able to reproduce the problem. But the problem is that I need to take the data from the JSON.
Do you know if it's possible to modify this behavior? I prefer having the "(1 of 3)" text from the very beginning and see the elements in the right order.
Thanks in advance,
Santiago

Best Answer

As lynxlynxlynx recommens me, here is the code:





    
    Example
    
    
    
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{
      padding: 20px 20px; } #map{ padding:0;}
    
    var dojoConfig = { parseOnLoad: true };
    
    
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");

      var map;
      var featureLayer;
      var popupTemplate;

      function init() {
        //setup the map's initial extent 
        var initExtent = new esri.geometry.Extent({"xmin":-7,"ymin":34,"xmax":5,"ymax":42,"spatialReference":{"wkid":4326}});

        //create a popup to replace the map's info window
        var popup = new esri.dijit.Popup(null, dojo.create("div"));
        map = new esri.Map("map", {
          extent: initExtent,
          infoWindow: popup
        });

        //Add the imagery layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
        map.addLayer(basemap);

        //define a popup template
        popupTemplate = new esri.dijit.PopupTemplate({
          title: "{gnis_name}",
          description:"Length (km): {lengthkm}"
        });

        //create a feature layer based on the feature collection
        featureLayer = new esri.layers.FeatureLayer(fljson, {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          id: "dummyLayer",
          //infoTemplate: popupTemplate
          infoTemplate: null
        });

        // select features on map click
        dojo.connect(map, "onClick", function(e) {
            console.log("map-onClick");
            featureLayer.infoTemplate = popupTemplate;
            map.infoWindow.clearFeatures();
            //console.log("map click: ", e.mapPoint);
            var pad = map.extent.getWidth() / map.width * 5;
            var extent = new esri.geometry.Extent(e.mapPoint.x-pad, e.mapPoint.y-pad, e.mapPoint.x+pad, e.mapPoint.y+pad, map.spatialReference)
            var query = new esri.tasks.Query();
            query.geometry = extent;
            //console.log("query: ", query);
            var select = featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);
            select.then(function(features) {
                //console.log("select features result: ", features);
                map.infoWindow.setFeatures(features);
                map.infoWindow.show(e.mapPoint);
            }, function(err) {
                console.log("select features error: ", err);
            });
        });

        dojo.connect(popup, "onHide", function() {
            //alert("onHide");
            featureLayer.infoTemplate = null;
        });

        dojo.connect(featureLayer, "onClick", function(e) {
            console.log("featureLayer-onClick");
            featureLayer.infoTemplate = null;
        });

        //add the feature layer that contains the flickr photos to the map
        map.addLayers([featureLayer]);

        dojo.connect(map, "onLoad", function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId("map"), "resize", map, map.resize);
        });
      }

      dojo.ready(init);
    

var fljson = {
  "layerDefinition": {
    "id": 1,
    "name": "Rivers",
    "type": "Feature Layer",
    "description": "",
    "definitionExpression": "",
    "geometryType": "esriGeometryPoint",
    "copyrightText": "None.",
    "parentLayer": null,
    "subLayers": [],
    "minScale": 1000000000,
    "maxScale": 0,
    "defaultVisibility": true,
    "extent": {
      "xmin": -179.999999999794,
      "ymin": -38.9694202655534,
      "xmax": 179.999999999747,
      "ymax": 84.8856987640737,
      "spatialReference": {
        "wkid": 4326
      }
    },
    "hasAttachments": false,
    "htmlPopupType": "esriServerHTMLPopupTypeAsHTMLText",
    "drawingInfo": {
      "renderer": {
        "type": "simple",
        "symbol": 
        {
         "type": "esriSMS",
         "style": "esriSMSCircle",
         "color": [255,0,0,255],
         "size": 15,
         "angle": 0,
         "xoffset": 0,
         "yoffset": 0,
         "outline": 
        {
          "color": [0,0,0,255],
          "width": 1
         }
        },
        "label": "",
        "description": ""
      },
      "transparency": 0,
      "labelingInfo": null
    },
    "displayField": "gnis_name",
    "fields": [{
      "name": "objectid",
      "type": "esriFieldTypeOID",
      "alias": "Object ID"
    }, {
      "name": "fdate",
      "type": "esriFieldTypeDate",
      "alias": "FDate",
      "length": 36
    }, {
      "name": "resolution",
      "type": "esriFieldTypeInteger",
      "alias": "Resolution",
      "domain": {
        "type": "codedValue",
        "name": "Resolution",
        "codedValues": [{
          "name": "Local",
          "code": 1
        }, {
          "name": "High",
          "code": 2
        }, {
          "name": "Medium",
          "code": 3
        }]
      }
    }, {
      "name": "gnis_id",
      "type": "esriFieldTypeString",
      "alias": "GNIS ID",
      "length": 10
    }, {
      "name": "gnis_name",
      "type": "esriFieldTypeString",
      "alias": "GNIS Name",
      "length": 65
    }, {
      "name": "lengthkm",
      "type": "esriFieldTypeDouble",
      "alias": "Length Km"
    }, {
      "name": "reachcode",
      "type": "esriFieldTypeString",
      "alias": "Reach Code",
      "length": 14
    }, {
      "name": "flowdir",
      "type": "esriFieldTypeInteger",
      "alias": "Flow Direction",
      "domain": {
        "type": "codedValue",
        "name": "HydroFlowDirections",
        "codedValues": [{
          "name": "Uninitialized",
          "code": 0
        }, {
          "name": "WithDigitized",
          "code": 1
        }]
      }
    }, {
      "name": "wbareacomid",
      "type": "esriFieldTypeInteger",
      "alias": "WB Area Com ID"
    }, {
      "name": "ftype",
      "type": "esriFieldTypeInteger",
      "alias": "FType"
    }, {
      "name": "fcode",
      "type": "esriFieldTypeInteger",
      "alias": "FCode"
    }, {
      "name": "enabled",
      "type": "esriFieldTypeSmallInteger",
      "alias": "Enabled",
      "domain": {
        "type": "codedValue",
        "name": "EnabledDomain",
        "codedValues": [{
          "name": "False",
          "code": 0
        }, {
          "name": "True",
          "code": 1
        }]
      }
    }, {
      "name": "shape",
      "type": "esriFieldTypeGeometry",
      "alias": "Shape"
    }],
    "typeIdField": "ftype",
    "types": [{
      "id": 420,
      "name": "Underground Conduit",
      "domains": {
        "resolution": {
          "type": "inherited"
        },
        "flowdir": {
          "type": "inherited"
        },
        "fcode": {
          "type": "codedValue",
          "name": "Underground Conduit FCode",
          "codedValues": [{
            "name": "Underground Conduit",
            "code": 42000
          }, {
            "name": "Underground Conduit: Positional Accuracy = Definite",
            "code": 42001
          }, {
            "name": "Underground Conduit: Positional Accuracy = Indefinite",
            "code": 42002
          }, {
            "name": "Underground Conduit: Positional Accuracy = Approximate",
            "code": 42003
          }]
        }
      }
    }, {
      "id": 460,
      "name": "StreamRiver",
      "domains": {
        "resolution": {
          "type": "inherited"
        },
        "flowdir": {
          "type": "inherited"
        },
        "fcode": {
          "type": "codedValue",
          "name": "StreamRiver FCode_1",
          "codedValues": [{
            "name": "Stream/River",
            "code": 46000
          }, {
            "name": "Stream/River: Hydrographic Category = Intermittent",
            "code": 46003
          }, {
            "name": "Stream/River: Hydrographic Category = Perennial",
            "code": 46006
          }, {
            "name": "Stream/River: Hydrographic Category = Ephemeral",
            "code": 46007
          }]
        }
      }
    }, {
      "id": 428,
      "name": "Pipeline",
      "domains": {
        "resolution": {
          "type": "inherited"
        },
        "flowdir": {
          "type": "inherited"
        },
        "fcode": {
          "type": "codedValue",
          "name": "Pipeline FCode_1",
          "codedValues": [{
            "name": "Pipeline",
            "code": 42800
          }, {
            "name": "Pipeline: Pipeline Type = Aqueduct",
            "code": 42816
          }, {
            "name": "Pipeline: Pipeline Type = Aqueduct; Relationship to Surface = At or Near",
            "code": 42801
          }, {
            "name": "Pipeline: Pipeline Type = Aqueduct; Relationship to Surface = Elevated",
            "code": 42802
          }, {
            "name": "Pipeline: Pipeline Type = Aqueduct; Relationship to Surface = Underground",
            "code": 42803
          }, {
            "name": "Pipeline: Pipeline Type = Aqueduct; Relationship to Surface = Underwater",
            "code": 42804
          }, {
            "name": "Pipeline: Pipeline Type = General Case",
            "code": 42814
          }, {
            "name": "Pipeline: Pipeline Type = General Case; Relationship to Surface = At or Near",
            "code": 42805
          }, {
            "name": "Pipeline: Pipeline Type = General Case; Relationship to Surface = Elevated",
            "code": 42806
          }, {
            "name": "Pipeline: Pipeline Type = General Case; Relationship to Surface = Underground",
            "code": 42807
          }, {
            "name": "Pipeline: Pipeline Type = General Case; Relationship to Surface = Underwater",
            "code": 42808
          }, {
            "name": "Pipeline: Pipeline Type = Penstock",
            "code": 42815
          }, {
            "name": "Pipeline: Pipeline Type = Penstock; Relationship to Surface = At or Near",
            "code": 42809
          }, {
            "name": "Pipeline: Pipeline Type = Penstock; Relationship to Surface = Elevated",
            "code": 42810
          }, {
            "name": "Pipeline: Pipeline Type = Penstock; Relationship to Surface = Underground",
            "code": 42811
          }, {
            "name": "Pipeline: Pipeline Type = Penstock; Relationship to Surface = Underwater",
            "code": 42812
          }, {
            "name": "Pipeline: Pipeline Type = Siphon",
            "code": 42813
          }, {
            "name": "Pipeline: Pipeline Type = Stormwater",
            "code": 42820
          }, {
            "name": "Pipeline: Pipeline Type = Stormwater; Relationship to Surface = At or Near",
            "code": 42821
          }, {
            "name": "Pipeline: Pipeline Type = Stormwater; Relationship to Surface = Elevated",
            "code": 42822
          }, {
            "name": "Pipeline: Pipeline Type = Stormwater; Relationship to Surface = Underground",
            "code": 42823
          }, {
            "name": "Pipeline: Pipeline Type = Stormwater; Relationship to Surface = Underwater",
            "code": 42824
          }]
        }
      }
    }, {
      "id": 558,
      "name": "ArtificialPath",
      "domains": {
        "resolution": {
          "type": "inherited"
        },
        "flowdir": {
          "type": "inherited"
        },
        "fcode": {
          "type": "codedValue",
          "name": "ArtificialPath FCode",
          "codedValues": [{
            "name": "Artificial Path",
            "code": 55800
          }]
        }
      }
    }, {
      "id": 336,
      "name": "CanalDitch",
      "domains": {
        "resolution": {
          "type": "inherited"
        },
        "flowdir": {
          "type": "inherited"
        },
        "fcode": {
          "type": "codedValue",
          "name": "CanalDitch FCode_1",
          "codedValues": [{
            "name": "Canal Ditch",
            "code": 33600
          }, {
            "name": "Canal Ditch: Canal Ditch Type = Aqueduct",
            "code": 33601
          }, {
            "name": "Canal Ditch: Canal Ditch Type = Stormwater",
            "code": 33603
          }]
        }
      }
    }, {
      "id": 334,
      "name": "Connector",
      "domains": {
        "resolution": {
          "type": "inherited"
        },
        "flowdir": {
          "type": "inherited"
        },
        "fcode": {
          "type": "codedValue",
          "name": "Connector FCode",
          "codedValues": [{
            "name": "Connector",
            "code": 33400
          }]
        }
      }
    }, {
      "id": 566,
      "name": "Coastline",
      "domains": {
        "resolution": {
          "type": "inherited"
        },
        "flowdir": {
          "type": "inherited"
        },
        "fcode": {
          "type": "codedValue",
          "name": "Coastline FCode",
          "codedValues": [{
            "name": "Coastline",
            "code": 56600
          }]
        }
      }
    }],
    "relationships": [],
    "capabilities": "Map,Query,Data"
  },
  "featureSet": {
    "geometryType": "esriGeometryPoint",
    "features": [{
      "geometry": {
        "x" : -2,
        "y" : 39,
        "spatialReference": {
          "wkid": 4326
        }
      },
      "attributes": {
        "objectid": 1568,
        "fdate": 939772800000,
        "resolution": 3,
        "gnis_id": "00477402",
        "gnis_name": "Buck Creek 1",
        "lengthkm": 0.671,
        "reachcode": "11070203000411",
        "flowdir": 1,
        "wbareacomid": null,
        "ftype": 460,
        "fcode": 46006,
        "enabled": 1
      }
    }, {
      "geometry": {
        "x" : -2,
        "y" : 39,
        "spatialReference": {
          "wkid": 4326
        }
      },
      "attributes": {
        "objectid": 1569,
        "fdate": 939772800000,
        "resolution": 3,
        "gnis_id": "00477402",
        "gnis_name": "Buck Creek 2",
        "lengthkm": 0.671,
        "reachcode": "11070203000411",
        "flowdir": 1,
        "wbareacomid": null,
        "ftype": 460,
        "fcode": 46006,
        "enabled": 1
      }
    }, {
      "geometry": {
        "x" : -2,
        "y" : 39,
        "spatialReference": {
          "wkid": 4326
        }
      },
      "attributes": {
        "objectid": 1570,
        "fdate": 939772800000,
        "resolution": 3,
        "gnis_id": "00477402",
        "gnis_name": "Buck Creek 3",
        "lengthkm": 0.671,
        "reachcode": "11070203000411",
        "flowdir": 1,
        "wbareacomid": null,
        "ftype": 460,
        "fcode": 46006,
        "enabled": 1
      }
    }, {
      "geometry": {
        "x" : -4,
        "y" : 39,
        "spatialReference": {
          "wkid": 4326
        }
      },
      "attributes": {
        "objectid": 1571,
        "fdate": 939772800000,
        "resolution": 3,
        "gnis_id": "00477402",
        "gnis_name": "Buck Creek 4",
        "lengthkm": 0.671,
        "reachcode": "11070203000411",
        "flowdir": 1,
        "wbareacomid": null,
        "ftype": 460,
        "fcode": 46006,
        "enabled": 1
      }
    }]
  }
}
Related Question