I'm working to launch a time slider. I've published a time aware layer into out ArcGIS Server 10.0. I taken the example used in sample section and added my service in replacement of one of the existing services. When I run the application I get an Access Control Error....its also showing the service is being called via Json. Anyone have this problem?Thanks,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
Arroyo Field Production by Time
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1compact"></script>
<script type="text/javascript" language="javascript">
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.TimeSlider");
dojo.require("esri.dijit.editing.TemplatePicker");
dojo.require("dojox.lang.functional");
dojo.require("dojox.lang.functional.fold");
dojo.require("dojox.lang.functional.curry");
function init() {
var startExtent = new esri.geometry.Extent(-101.874, 37.461, -101.702, 37.564, new esri.SpatialReference({ wkid: 4326 }));
var map = new esri.Map("map", {extent: esri.geometry.geographicToWebMercator(startExtent)});
dojo.connect(map, "onLayersAddResult", initSlider);
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(basemap);
// var fieldLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1", {
// mode: esri.layers.FeatureLayer.MODE_SNAPSHOT
// });
// fieldLayer.setDefinitionExpression("FIELD_NAME = 'ARROYO'");
// map.addLayer(fieldLayer);
var timeLayers = [];
var Usage = new esri.layers.FeatureLayer("*INSERT LOCAL ADDRESS HERE*", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
//Usage.setDefinitionExpression("Frequency = 'FREQUENCY'");
timeLayers.push(Usage);
//add all the layers to the map then initialize the slider
map.addLayers(Usage);
}
function initSlider(results) {
var map = this;
var timeLayers = dojo.map(results, function (result) {
return result.layer;
});
//build a legend
var symbols = [];
dojo.forEach(results, function (result) {
dojo.forEach(result.layer.renderer.infos, function (info) {
symbols.push({
label: info.minValue + " - " + info.maxValue,
symbol: info.symbol
});
});
});
var legend = new esri.dijit.editing.TemplatePicker({
items: symbols,
rows: "auto",
columns: 1,
style: "position: absolute; left:815px; top:27px; z-index: 200;"
}, "oilLegendDiv");
legend.startup();
var timeExtent = new esri.TimeExtent();
timeExtent.startTime = new Date("8/30/2012 UTC");
map.setTimeExtent(timeExtent);
var timeSlider = new esri.dijit.TimeSlider({
style: "width: 800px;"
}, dojo.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);
timeSlider.setThumbCount(1);
var layerTimeExtent = results[0].layer.timeInfo.timeExtent;
layerTimeExtent.startTime = timeExtent.startTime;
timeSlider.createTimeStopsByTimeInterval(layerTimeExtent, 1, 'esriTimeUnitsDays');
timeSlider.setThumbMovingRate(2000);
timeSlider.singleThumbAsTimeInstant(true);
timeSlider.setLoop(true);
timeSlider.startup();
//add ticks just at beginning and end
var labels = ['1989', '2009'];
timeSlider.setLabels(labels);
var timeQuery = new esri.tasks.Query();
dojo.connect(timeSlider, "onTimeExtentChange", function (timeExtent) {
timeQuery.timeExtent = timeExtent;
var yearlyLayerProduction = '';
dojo.forEach(timeLayers, function (layer) {
var mappedField = layer.renderer.attributeField;
layer.queryFeatures(timeQuery, function (featureSet) {
var values = dojo.map(featureSet.features, function (feature) {
return feature.attributes[mappedField];
});
var stats = computeStats(values);
var units = (layer.name === "Stanton County Oil Leases") ? "bbls" : "Mcf";
yearlyLayerProduction = yearlyLayerProduction + layer.name + " produced " + stats.sum + " " + units + " with " + stats.length + " wells. ";
});
});
var startVal = timeExtent.startTime.getFullYear();
console.log(startVal);
dojo.byId("daterange").innerHTML = "<i>" + startVal + "<\/i> " + yearlyLayerProduction;
});
}
function computeStats(values) {
var stats = {};
var df = dojox.lang.functional;
stats.length = values.length;
stats.sum = df.reduce(values, df.lambda("+"));
stats.avg = stats.sum / stats.length;
if (stats.length > 1) {
var sumSquresF = df.partial(df.lambda("ss,x,avg->ss+Math.pow(x-avg,2)"), df.arg, df.arg, stats.avg);
stats.sumSquares = df.reduce(values, sumSquresF);
stats.stdDev = Math.sqrt(stats.sumSquares / stats.length);
} else {
stats.sumSquares = 0;
stats.stdDev = 0;
}
return stats;
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div>
Arroyo Field Production in
<span id="daterange">
1989
</span>
</div>
<div id="map" style="width:800px; height:600px; border:1px solid #000;">
<div id="oilLegendDiv">
</div>
</div>
<div id="timeSliderDiv">
</div>
</body>
</html>