1


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

Improve this question
5
  • Since you modified the fiddle, your final code would greatly help anyone willing to help you debug it.
    – lynxlynxlynx
    Feb 14, 2013 at 10:54
  • Thank you very much, "lynxlynxlynx", for you interest. I have created my fiddle. To clarify what is happening, I have added an alert. Take a look at the title and position of the popup before and after the alert. The link to the fiddle is: JSFIDDLE
    – Santiago Horcajo
    Feb 15, 2013 at 8:06
  • Is there somebody who can help me?
    – Santiago Horcajo
    Jun 19, 2013 at 14:45
  • Finally I got it working. See this fiddle: JSFIDDLE
    – Santiago Horcajo
    Jun 28, 2013 at 10:40
  • It would be best to post that as an answer and then accepting it (fine by FAQ). Include a short description of how you fixed it, so future visitors can learn from it.
    – lynxlynxlynx
    Jul 3, 2013 at 17:52

1 Answer 1

Reset to default
1

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
      }
    }]
  }
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.