TimeSlider for Newbie

AlvicPaje

I am fairly new to using the ArcGIS JavaScript API and have hit a wall trying to use the timeSlider to add a playback functionality to my map. 

My map is a global map that is using the following map server URL: https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer, and it's being set in a ArcGISTiledMapServiceLayer:


[INDENT]map = new esri.Map("map");[/INDENT]
[INDENT]dojo.connect(map, "onLoad", initFunc);[/INDENT]
[INDENT]var layer = new esri.layers.ArcGISTiledMapServiceLayer(https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer);[/INDENT]
[INDENT]map.addLayer(layer);[/INDENT]


My points are lat/long based and being plotted manually via a function call (addPointToMap(lon, lat)). The function created an esri.geometry.Point using the lat/long information, creates a esi.symbol.SimpleMarkerSymbol, and then adds a new graphic to the map using the point and marker.  Like this:


[INDENT]var point = new esri.geometry.Point(lon, lat, map.spatialReference);[/INDENT]
[INDENT]var marker = new esri.symbol.SimpleMarkerSymbol();[/INDENT]
[INDENT]marker.setColor(new dojo.Color([255, 0, 0, 0.5]));[/INDENT]

[INDENT]map.graphics.add(new esri.Graphic(point,marker))[/INDENT]


This all works fine and dandy, but I have no clue how to modify this to make the points plot over time using the slider.  All the examples I've seen use dynamicmaplayers, time extens, and map services with data hosted on arcgis.com.  I need this to be standalone, with the only thing being retrieved is the global map base.

Any help would be greatly appreciated.

AlvicPaje

I think you'll need to add your points to a featureLayer based on a featureCollection, then set the time definition for the layer. After that, the layer will be time-aware and you can use the time-slider.

If that doesn't work, try adding the points to a new layer inside ArcMap, set the time definition there, and publish the layer to ArcGIS Server or ArcGIS Online.

Steve

Thank you for the response.  I tried to follow your suggestion and feel like I am close, but I am having a hard time, possibly due to the a variance in my situation that I never see in the examples on this site.

So I am using a grid (Telerik MVC), where when a row is clicked on the grid, a call is made to plot the row's points on the map (PlotMap(rowID).  I believe my problems are that I'm missing or doing something wrong, plus the order/sequence of featureLayer, timeSlider init, and the fact that I am plotting points on demand.

Any further help would be greatly appreciated.  Code of interest is posted below:

function init() {
    var zoomSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([0, 0, 255]), 2), new dojo.Color([255, 255, 0, 0.5]));
    esri.config.defaults.map.zoomSymbol = zoomSymbol.toJson();

    var mappingURL = (mapURL != null) ? mapURL : '';
    if (mappingURL != '') {
        map = new esri.Map("map");
        dojo.connect(map, "onLoad", initFunc);
        var baseLayer = new esri.layers.ArcGISTiledMapServiceLayer(mappingURL);

        var layerDefinition = {
            "geometryType": "esriGeometryPolygon",
            "fields": [{
                "name": "BUFF_DIST",
                "type": "esriFieldTypeInteger",
                "alias": "Buffer Distance"
            }]
        }
        var featureCollection = {
            layerDefinition: layerDefinition,
            featureSet: null
        };

        featureLayer = new esri.layers.FeatureLayer(featureCollection, {
            mode: esri.layers.FeatureLayer.MODE_SNAPSHOT
        });

        var defn = new esri.TimeExtent();
        defn.startTime = new Date("2/3/2013 UTC")
        defn.endTime = new Date("2/4/2013 UTC");
        featureLayer.setTimeDefinition(defn);

        map.addLayer(baseLayer);
        map.addLayer(featureLayer);

        dojo.connect(baseLayer, "onError", function (err) {
            alert("ArcGIS Mapping Not Available (" + err.code + " : " + err.message + (err.details ? "\n" + err.details.join("\n - ") : "") + ")");
            $('#contactMapDiv').width('0%');
        });
    }
    else {
        $('#contactMapDiv').width('0%');
    }
} 

function initSlider() {
    var timeSlider = new esri.dijit.TimeSlider({
        style: "width: 100%;"
    }, dojo.byId("timeSliderDiv"));
    map.setTimeSlider(timeSlider);

    var timeExtent = new esri.TimeExtent();
    timeExtent.startTime = new Date("2/3/2013 UTC");
    timeExtent.endTime = new Date("2/4/2013 UTC");
    timeSlider.setThumbCount(2);
    timeSlider.createTimeStopsByTimeInterval(timeExtent, 2, 'esriTimeUnitsHours');
    timeSlider.setThumbIndexes([0, 1]);
    timeSlider.setThumbMovingRate(2000);
    timeSlider.startup();

    //add labels for every other time stop
    var labels = dojo.map(timeSlider.timeStops, function (timeStop, i) {
        if (i % 2 === 0) {
            return timeStop.getUTCFullYear();
        } else {
            return "";
        }
    });

    timeSlider.setLabels(labels);

    dojo.connect(timeSlider, "onTimeExtentChange", function (timeExtent) {
        var startValString = timeExtent.startTime.getUTCFullYear();
        var endValString = timeExtent.endTime.getUTCFullYear();
        dojo.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
    });
}

function initFunc(map) {
    initSlider();
}

function addLineToMap(pt1, pt2) {
    //create points array
    var points = [pt1, pt2];

    //create polyline
    var polyline = new esri.geometry.Polyline(map.spatialReference);
    polyline.addPath(points);

    //create graphic
    var line = new esri.Graphic(polyline, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 255, 255]), 1));

    //add graphic to map
    featureLayer.add(line);
}

function addPointToMap(lon, lat) {
    var point = new esri.geometry.Point(lon, lat, map.spatialReference);


    if (point1 == null) {
        point1 = new esri.geometry.Point(lon, lat, map.spatialReference);
    }
    else {
        if (point2 != null) {
            point1 = point2;
        }
        point2 = new esri.geometry.Point(lon, lat, map.spatialReference);
        addLineToMap(point1, point2);
    }
    var marker = new esri.symbol.SimpleMarkerSymbol();
    marker.setColor(new dojo.Color([255, 0, 0, 0.5]));

    featureLayer.add(new esri.Graphic(
                    point,
                    marker
                ));
//    map.graphics.add(
//                new esri.Graphic(
//                    point,
//                    marker
//                )
//            )
    //var wmpoint = esri.geometry.geographicToWebMercator(point);
    map.centerAndZoom(point,7);
}
dojo.addOnLoad(init);

function PlotMap(rowID) {
    point1 = null;
    point2 = null;
    featureLayer.clear();
    $.ajaxSetup({ cache: false });
    $.getJSON(getMapPointDataURL, { id: rowID },
    function (mapPointData) {
        $.each(mapPointData, function (index, itemData) {
            if ((itemData.Text != "") && (itemData.Value != "")) {
                var lathour = itemData.Text.substring(0, 2);
                var latminute = itemData.Text.substring(2, 4);
                var lat = parseFloat(lathour) + parseFloat((latminute) / 60);
                if (itemData.Text.substring(4) == "S") {
                    lat = "-" + lat;
                }

                var longhour = itemData.Value.substring(0, 3);
                var longminute = itemData.Value.substring(3, 5);
                var long = parseFloat(longhour) + parseFloat((longminute) / 60);
                if (itemData.Value.substring(5) == "W") {
                    long = "-" + long;
                }
                //                    alert(long + ', ' + lat);
                addPointToMap(parseFloat(long), parseFloat(lat));

            }
        });
        $.ajaxSetup({ cache: true });
    });
}