broadstreet

graphics undefined even after update-end fires.

Discussion created by broadstreet on Jun 17, 2014
Latest reply on Jun 17, 2014 by broadstreet
So i've been learning the Javascript API and i've been building a custom page based on several samples. What i'm finding is that I'm obviously not understanding a concept here and it's causing me some problems. The following is a code snip from the page i'm building the entire source can be found at a link at the bottom posted to paste bin.
    var map;
    var currPoint;
        require(["esri/map",
            "esri/arcgis/utils",
            "esri/dijit/Legend",
            "esri/graphic",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/renderers/SimpleRenderer",
            "esri/symbols/SimpleFillSymbol",
            "esri/Color",
            "esri/layers/FeatureLayer",
            "esri/geometry/Circle",
            "esri/layers/OpenStreetMapLayer",
            "esri/request",
            "esri/tasks/GeometryService",
            "dojo/dom",
            "dojo/parser",
            "dojo/promise/all",
            "dojo/_base/array",
            "dijit/form/HorizontalSlider",
            "dijit/form/HorizontalRule",
            "dijit/form/HorizontalRuleLabels",
            "dijit/form/TextBox", // this we only include to make an example with TextBox
            "dojo/dom-construct",
            "dojo/on",
            "esri/config",
            "dojo/domReady!"], function (Map, arcgisUtils, Legend, Graphic, SimpleLineSymbol, SimpleMarkerSymbol, SimleRenderer,
                                         SimpleFillSymbol, Color, FeatureLayer, Circle, OpenStreetMapLayer, esriRequest, GeometryService,
                                         dom, parser, all,array, HorizontalSlider, HorizontalRule,
                                         HorizontalRuleLabels, TextBox, domConstruct, on, esriConfig) {
                var geometryService,baseGraphics;
                //esriConfig.defaults.io.corsEnabledServers.push("services3.arcgis.com");
                //esriConfig.defaults.io.proxyUrl = "/proxy";
                //esriConfig.defaults.io.alwaysUseProxy = false;
                map = new esri.Map("mapDiv", {
                    center: [-114.0288, 51.0669],
                    zoom: 10
                });

                var osmLayer = new OpenStreetMapLayer({
                    id:"osmLayer",
                    visible:true
                });

                geometryService = new GeometryService("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");

                var legend = new Legend({
                    map: map,
                    layerInfos: (arcgisUtils.getLegendLayers(map))
                }, "legendDiv");

                legend.startup();
                parser.parse();
                var rulesNode = domConstruct.create("div", {}, dom.byId("slider"), "first");
                var sliderRules = new HorizontalRule({
                    container: "topDecoration",
                    count: 6,
                    style: "width: 5px;"
                }, rulesNode);

                // Create the labels
                var labelsNode = domConstruct.create("div", {}, dom.byId("slider"), "first");
                var sliderLabels = new HorizontalRuleLabels({
                    container: "topDecoration",
                    labelStyle: "font-style: italic; font-size: 0.75em",
                    count: 6,
                    labels: [5, 10, 15, 20, 25, 30]
                }, labelsNode);

                var slider = new HorizontalSlider({
                    name: "slider",
                    value: 5,
                    minimum: 5,
                    maximum: 30,
                    intermediateChanges: true,
                    discreteValues: 6,

                    style: "width:300px;",
                    onChange: function (value) {
                        dom.byId("sliderValue").value = value;
                        buildMap();
                    }
                }, "slider");



                var siteValue = dom.byId('drpSite').value;
                var drpSite = dom.byId("drpSite");
                on(drpSite, "change", function (e) {
                    siteValue = dom.byId('drpSite').value;
                    buildMap();
                });
                //alert(value);
                var sites = new FeatureLayer("http://services.arcgis.com/sG0VAg8cwgcmMUkE/ArcGIS/rest/services/CalgarySites/FeatureServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    id: "CalgarySites",
                    name: "Calgary Sites",
                    outFields: ["*"]
                });
                var dt = new FeatureLayer("http://services.arcgis.com/sG0VAg8cwgcmMUkE/ArcGIS/rest/services/CalgarySites%20Drive%20Time%20Final/FeatureServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    id: "DriveTime",
                    name: "Drive Times",
                });

                sites.setDefinitionExpression("NICKNAME='" + siteValue + "'");
                map.addLayer(osmLayer);
                map.addLayer(dt);
                map.addLayer(sites);
                sites.on("update-end", function (evt) {
                    currPoint = new Graphic(evt.target.graphics[0].toJson());
                    dt.setDefinitionExpression("NICKNAME='" + siteValue + "' and ToBreak=" + sliderValue.value);
                });

                dt.on("update-end", function (evt) {
                    var promises = new all({
                        poilist : executeLocalSearch(currPoint)
                    }).then(updateGIS);
                });

                sliderRules.startup();
                sliderLabels.startup();

                function buildMap() {
                    sites.setDefinitionExpression("NICKNAME='" + siteValue + "'");
                }


The error I'm getting is the one listed here.
TypeError: Unable to draw graphic (null): evt.target.graphics[0] is undefined
currPoint = new Graphic(evt.target.graphics[0].toJson());


my assumption was that when i first getting the error it had to do with the asynchronous nature of the code so i switched to using the update-end on the point layer (sites) figuring that once the update-end fired i should have a graphic with a point. However, the error above seems to imply differently. Any suggestions or help is much appreciated.


full code available here.

http://pastebin.com/HLhccRkp

Outcomes