TimeSlider With Pop-UP

MarkCunningham1 · ‎06-25-2014

I would like to add the functionality so that when a user clicks on a polygon or point I am able to have an info-window appear. If someone could look at my code and tell me perhaps what I am missing. I would like to have the info-window information come from the same service being used in the time slider. Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>cases 2010-2014</title>
    
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
   color: #00151; 
     overflow: hidden;
        }

     #mapDiv {
         padding: 0;
         height:100%;
         overflow: hidden;
   background-color:#0072AF; color:#0072AF;
        }

      #bottomPanel {
      
        margin: 0 auto;
       left:15%;
        position: absolute; 
        bottom: 1em;
  border-radius: 100px;
  width: 75%;
      }
      
 #title {
      font-size:150%;
      color: #ffffff;
      text-align:center;
   margin: 2px;
    }
    #subfooter {
      font-size:small;
      color: #ffffff;
   font-size:13px;
      text-align:center;
   margin: 2px;
    }
       #header {
      margin:0px;
      padding: 0px;
   text-align:right;
    background: -webkit-gradient(linear, left top, left bottom, from(#005b8c), to(#1980b7));
       background-color:#0072AF; color:#0072AF;
      border: solid 1px #000000;
      height: 56px;
    }

      #timeInfo{
        border-radius: 7px;
        border: solid 2px #ccc;
        background-color: #fff;
        display: block;
        padding: 5px;
        position: relative;
        text-align: center;
       
        z-index: 99;
      }
   
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;
   var infoTemplate;
      require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer", 
        "esri/TimeExtent",
        "esri/dijit/TimeSlider",
        "dojo/_base/array",
        "dojo/dom",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
    "dojo/domReady!"
      ], function(
        Map,
        InfoTemplate,
        ArcGISDynamicMapServiceLayer, 
        TimeExtent,
        TimeSlider,
        arrayUtils,
        dom
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-81.00, 33.500],
          zoom: 8
        });
        // InfoTemplate 
 //  var template = new InfoTemplate("Cases", "<tr> <td>${NAME}</td></tr><br/> <td>Total:</td><td>${TOTAL}</td></tr>");
  //Infowindow Template
  //var infoTemplate = new InfoTemplate();
  // infoTemplate.setTitle("${NAME}");
  // infoTemplate.setContent("${TOTAL}");
  
  ////Infowindow Template
  var infoTemplate = new InfoTemplate();
   infoTemplate.setTitle("${NAME}");
   infoTemplate.setContent("${*}");
  
        var opLayer = new ArcGISDynamicMapServiceLayer("CASESLAYERSERVERURL",{
    infoTemplate: infoTemplate,
     opacity: 0.8,
    outFields: ["*"]
   //outFields:["NAME", "TOTAL"]
  });
  
       //opLayer.setVisibleLayers([0]);
  
  var countyLayer = new ArcGISDynamicMapServiceLayer("COUNTYLAYERSERVERURL", {
           id: 'countyLayer',
    
        });

  //Add Layers to Map
  map.addLayers([ countyLayer,opLayer]);   map.infoWindow.resize(200, 75);
 


        map.on("layers-add-result", initSlider);

        function initSlider() {
          var timeSlider = new TimeSlider({
            style: "width: 100%;"
          }, dom.byId("timeSliderDiv"));
          map.setTimeSlider(timeSlider);
          
          var timeExtent = new TimeExtent();
          timeExtent.startTime = new Date("1/1/2010 UTC");
          timeExtent.endTime = new Date("12/31/2014 UTC");
          timeSlider.setThumbCount(2);
          timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsYears");
          timeSlider.setThumbIndexes([0,1]);
          timeSlider.setThumbMovingRate(3000);
          timeSlider.startup();
          
          //add labels for every other time stop
          var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) { 
            if ( i % 2 === 0 ) {
              return timeStop.getUTCFullYear(); 
            } else {
              return "";
            }
          }); 
          
          timeSlider.setLabels(labels);
          
        //  timeSlider.on("time-extent-change", function(evt) {
        //    var startValString = evt.startTime.getUTCFullYear();
        //    var endValString = evt.endTime.getUTCFullYear();
       //     dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString  + "<\/i>";
        //  });
        }
      });
    </script>
  </head>
  <body class="tundra">
 <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
  
   <div id="title"> Title
       <div id="subfooter">Subtitle</div> 
    
    </div> 

   </div><!-- End Header -->
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" region="center">
      <div id="bottomPanel" data-dojo-type="dijit/layout/ContentPane" region="bottom">
        <div id="timeInfo">
          <div> Cases <span id="daterange"> By Years</span></div>
          <div id="timeSliderDiv"></div>
        </div>
      </div>
    </div>
  </body>
</html>