0

I have an ArcGIS JS map with a time slider. I've created a Div element that shows the local time in two minute intervals. I want it to follow a shapefile as it moves across the screen diagonally, down and to the right.

The element is in the right place at first, but on the second time change it disappears. I'm not sure what I'm missing. I've defined the Div position in the css, and I want to change it with each time change. Here are the relevant sections of my code.

 #timePanel {
        position: absolute;
      top: 225px;
      left: 300px;
      z-index: 50;
  }


function timeMove() {
             var elem = document.getElementById("timePanel");   
             var pos = 225;
             var id = setInterval(frame, 2000);
             function frame() {
                  pos++; 
                  elem.style.top = pos + '25px'; 
                  elem.style.left = pos + '100px'; 
                }
             }

      timeSlider.on("time-extent-change", function(evt) {
        var startValString = evt.startTime.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', timeZoneName: 'short'})
       ;
        dom.byId("daterange1").innerHTML = "<b>" + startValString + "<\/b>"
           dom.byId("daterange2").innerHTML = "<b>" + startValString + "<\/b>"

           timeMove();

        });
2

When you do this, you're appending pos and "25px":

elem.style.top = pos + '25px';

So if pos is 225, the top value becomes "22525px", which is probably offscreen. You want to add the numbers before you append "px":

elem.style.top = pos + 25 + 'px'; 
elem.style.left = pos + 100 + 'px'; 

Since you want to move the element from its position in the last frame, you probably want to do something like:

elem.style.top = elem.offsetTop + 25 + 'px'; 
elem.style.left = elem.offsetLeft + 100 + 'px'; 
  • OK, I tried this, and it's only moving right and down one pixel. I guess I'm confused as to exactly what the single value "pos" represents, because I have the first instance set to an xy point (225,300). – Bill Hambone Aug 9 '17 at 20:44
  • pos++ increments by 1, so your position will change by 1 pixel in each direction. – Marc Pfister Aug 9 '17 at 20:52
  • OK, do I need a for-loop incrementer? – Bill Hambone Aug 9 '17 at 21:03
  • Essentially. Those might not be the exact values, but in the ballpark. – Bill Hambone Aug 9 '17 at 21:06
  • 1
    see update for a possible simple solution. – Marc Pfister Aug 9 '17 at 21:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.