topic Re: Using Jquery time slider with Map. in ArcGIS JavaScript Maps SDK Questions

Using Jquery time slider with Map.

Pawan_KumarVenugopal — Wed, 09 Mar 2011 23:34:15 GMT

I have a Jquery Time Slider which i am planning to Use with ArcGIS Map. I would like to to know how to attach the Jquery Time Slider with map so that when i tick over the slider based on time i should be able to change data in the map. I have attached a ZIP file with my code can you please help me.

I am using Just 1 thumb for my slider.

I get a time value from my Jquery slider as 12:30 or 8.30 . How do i use this data with the esri.timeextent and then render my map.

-Pawan

Re: Using Jquery time slider with Map.

KellyHutchins — Sat, 11 Dec 2021 12:29:12 GMT

When the jQuery time slider changes you can create a new time extent and set that to be the map's time extent.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>ESRI Map and jQuery</title>
    <link href="jquery.time.slider.css" rel="stylesheet" type="text/css" />
 
   
    <script type="text/javascript">
        var djConfig = { parseOnLoad: true };
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="jquery.time.slider.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1compact"></script>
    <script type="text/javascript" language="Javascript">
        dojo.require("esri.map");
        dojo.require("esri.layers.FeatureLayer");
        
        var map;

        function init() {

        var startExtent = new esri.geometry.Extent({"xmin":-18233316,"ymin":981737,"xmax":-8449376,"ymax":6852101,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {extent:startExtent});
         dojo.connect(map, "onLoad", function () {
            $(document).ready(jQueryReady);
        });
        var layers = [];
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);


        // feature layer
        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: [ "*" ]
        });
   
        
        featureLayer.setDefinitionExpression("magnitude > 2");
       
        
        dojo.connect(map, "onLayersAddResult", initSlider);
  
        map.addLayers([featureLayer]);
 
        }

        function jQueryReady() {
        
         $('.timepick').change(function () {  
          if(map.timeExtent){
            console.log('change');
            var timespan = new esri.TimeExtent();
            timespan.startTime = $('.timepick').timeslider('get');
            map.setTimeExtent(timespan);
            $('#chosen-time').text($('.timepick').timeslider('get').toString());}
        }).timeslider({ value: '12:00' });
        
        }

        function initSlider(result) {
        console.log('initSlider');
        
        var timeExtent = new esri.TimeExtent();
        var now = new Date();
        timeExtent.endTime = now;
        map.setTimeExtent(timeExtent);


        }
        

        
        dojo.addOnLoad(init);





    </script>
</head>

<body >
    <div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
    <span id="chosen-time"></span>
    <label>Time slider span: <span class="timepick">5:00</span></label>


</body>
</html>

Re: Using Jquery time slider with Map.

Pawan_KumarVenugopal — Thu, 10 Mar 2011 21:37:07 GMT

Hi Kelly,

Thanks. I had been struggling with this for some time.

Regards,
Pawan

Re: Using Jquery time slider with Map.

Pawan_KumarVenugopal — Sun, 12 Dec 2021 16:15:14 GMT

Hi Kelly ,

I tried using the code the same way in my application but I don't get any data. When i Dig deep into it the problem is caused in the InitSlider Method.

function initSlider(result) {
        console.log('initSlider');
        
        var timeExtent = new esri.TimeExtent();
        var now = new Date();
        timeExtent.endTime = now;
        map.setTimeExtent(timeExtent);
        }

It looks like when the jquery gets initialized it sends a request like this.

http://trf-phone/ArcGIS/rest/services/MondayLinks/MapServer/export?dpi=96&transparent=true&format=png8&layers=show%3A0&bbox=-13765025.978000592%2C4478635.912199644%2C-13468692.051999409%2C4656436.267800355&bboxSR=102113&imageSR=102113&size=1000%2C600&time=1294042500000%2C1294092401261&f=image

The Response of this brings the data right.

but again when the function initSlider(result) is called it again send a request similar to the above one but with no time paramater as shown below.

http://trf-phone/ArcGIS/rest/services/MondayLinks/MapServer/export?dpi=96&transparent=true&format=png8&layers=show%3A0&bbox=-13765025.978000592%2C4478635.912199644%2C-13468692.051999409%2C4656436.267800355&bboxSR=102113&imageSR=102113&size=1000%2C600&f=image

For this request i don't get any data.

Can you tell me why this could be happening. Why there are 2 request for the same date. Can you help me rectify this problem.

Thanks
Pawan