Community

FeatureLayer load event not working

6906
1
03-01-2015 07:19 AM
Olgat
by
New Contributor
‎03-01-2015 07:19 AM

I am trying to measure how much time it takes to render features. My complete code is located here:

arcgis_wfs.html - Google Drive

Basically, I create a new FeatureLayer and do esri.request with predefined URL. As a result I see that all features were successfully added to map, but I am interested in how much time it took to render those features. I try to measure it with FeatureLayer  "load" event, but it seems that it is not working as it does not print any time. What might be the problem?

Another issue is that after some time I get a timeout error:  dojo.io.script error q {message: "Timeout exceeded", response: Object, log: undefined, stack: (...), dojoType: "timeout"…}. But browser network console indicates that all requests are completed. What it tries to fetch?

Tags (1)
0 Kudos
1 Reply
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎03-02-2015 08:57 AM

Olga,

You should move this question over to the ArcGIS API for JavaScript​ place and add appropriate tags (like "javascript-api") to get more people with the right expertise to help you on this question.

The Load event is supposed to fire after layer properties for the layer are successfully populated. But since there are no layer properties for the layer as you have created it, I don't think it will fire. The odd thing is, the update-end event also isn't firing for the layer, as shown in this demo. I've cleaned a few things up and added a timer to the end of the loadFeatures function.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ArcGis API WFS 300</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.12/"></script>
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map">
    </div>
    <script>
    var start = performance.now();
    var map;
    require([
        'esri/map', "esri/layers/FeatureLayer", "esri/SpatialReference", 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
        'dojo/_base/array', 'dojo/dom', 'dojo/dom-construct', 'dojo/parser', "esri/request",
        'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', "dojo/_base/json" , 'dojo/domReady!'
    ], function (Map, FeatureLayer, SpatialReference, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser, request) {
        parser.parse();
        map = new Map("map",
                {
                    extent: new Extent({"xmin": 300000, "ymin": 6.3e+06, "xmax": 800000, "ymax": 6.7e+06, "spatialReference": {"wkid": 3301}}), center: new esri.geometry.Point(550000, 6520000, new esri.SpatialReference({ wkid: 3301 }))
                });
        var layerDefinition = {
            "extent": {
                "xmin": 350000,
                "ymin": 6370000,
                "xmax": 750000,
                "ymax": 6630000,
                "spatialReference": {
                    "wkid": 3301
                }
            },
            "fields": [
                {
                    "name": "OBJECTID",
                    "type": "esriFieldTypeOID"
                }
            ]
        };
        var featureCollection = {
            layerDefinition: layerDefinition
        };
        var vectorLayer = new FeatureLayer(featureCollection);

        map.addLayers([vectorLayer]);
        var layerUrl = 'http://loom-gis.geo.ut.ee:8080/geoserver/ermas/ows?service=WFS&' +
                'version=1.1.0&request=GetFeature&typeName=ermas:testdata_geopnt&' +
                'outputFormat=text/javascript&format_options=callback:loadFeatures&maxFeatures=5000&' +
                'srsname=EPSG:3301&EPSG:3301';
        var loadFeatures = function (response) {
            for (var i = 0; i < response.features.length; i++) {
                var geometry = new esri.geometry.Point(response.features.geometry.coordinates[0], response.features.geometry.coordinates[1], new esri.SpatialReference({ wkid: 3301 }));
                var symbol = new esri.symbol.SimpleMarkerSymbol();
                var graphic = new esri.Graphic(geometry, symbol);
                vectorLayer.add(graphic)
            }
            console.log(performance.now() - start)
        };
        window.loadFeatures = loadFeatures;
        var layersRequest = request({
            url: layerUrl,
            callbackParamName: "loadFeatures"
        });
        vectorLayer.on("update-end", function () {
            var time = performance.now() - start;
            console.log(time, " milliseconds");
        });
        layersRequest.then(
                function (response) {
                    console.log("Success: ", response);
                }, function (error) {
                    console.log("Error: ", error);
                });
        map.setZoom(0);

    });
    </script>
</body>
</html>
0 Kudos