graphics undefined even after update-end fires.

CorporateLogin — Sun, 12 Dec 2021 05:26:07 GMT

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

Re: graphics undefined even after update-end fires.

JonathanUihlein — Tue, 17 Jun 2014 18:20:26 GMT

It appears to be a scope issue with siteValue and malformed definition expressions.

siteValue appears to be null in certain cases.
I noticed you are treating it like a global... this might not be the best approach for your application.

Also, after fixing your definition expressions, the 'graphic' paramter in executeLocalSearch() still appears to be null, generating the second set of errors.

Re: graphics undefined even after update-end fires.

CorporateLogin — Tue, 17 Jun 2014 18:46:21 GMT

I'm afraid i don't see what's wrong with the definition expression. As for the scope issues, yes that was not my preferred way, and the original code looked quite different but this is what happens when i got frustrated iw as trying anything to make it work.

and the null parameter is where the heart of this problem lies. I'm not sure how it can be null when the point is being returned to the layer.

Re: graphics undefined even after update-end fires.

JonathanUihlein — Sun, 12 Dec 2021 05:26:10 GMT

I'm afraid i don't see what's wrong with the definition expression.

var siteValue = dom.byId('drpSite').value;

In your code, siteValue is null.
When siteValue is null, using this expression will cause an error.

This is not the correct way to get the value from a dom node using DOJO.
If you are stuck using this approach, use dom.byId('drpSite').innerHTML

sites.setDefinitionExpression("NICKNAME='" + siteValue + "'");
dt.setDefinitionExpression("NICKNAME='" + siteValue + "' and ToBreak=" + sliderValue.value);

Re: graphics undefined even after update-end fires.

JeffPace — Tue, 17 Jun 2014 19:51:58 GMT

jon is right

i am guessing drpSite is some type of selectbox. (especially since you hook an onchange even to it). It is incorrect to use
dom.byId('drpSite').value.

you do not want the value of the dom element. You want the dijit value

you should be using

registry.byId('drpSite')

to get the dijit

Re: graphics undefined even after update-end fires.

CorporateLogin — Tue, 17 Jun 2014 20:38:56 GMT

Yes it is a dropdown, that contians the "nicknames" for the various sites in the area. Ok will have to check this out.

topic Re: graphics undefined even after update-end fires. in ArcGIS JavaScript Maps SDK Questions

graphics undefined even after update-end fires.

Re: graphics undefined even after update-end fires.

Re: graphics undefined even after update-end fires.

Re: graphics undefined even after update-end fires.

Re: graphics undefined even after update-end fires.

Re: graphics undefined even after update-end fires.