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