2

The following code works fine. When I click the "Test Play/Stop" button a series of points from the 'geojson' list are drawn with popup attributes one by one. The time interval is defined by the variable timeGap.

How I can put an option for user to enter his/her timeGap value?

<!DOCTYPE html>
<html>
<head>
  <title>My Test</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet-src.js">        </script>
  <link rel="stylesheet" href="Popcen.css" />
  <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">            </script>
  <script src="leaflet.js"></script>
  <script src="leaflet-google.js"></script>
<style>

</style>
</head>
<body>
  <div class="span9" style="height:100%">
 <div id="map" style="position: absolute; top: 0; bottom: 0; left: 0; right:     0; z-index: 9999; width: 100%; height: 100%">
          <div id="button-information">
              <input type="button" id="Pause1" value="Test Play/Stop"         onclick="myHit()"   class="btnStyle span2" />
          </div>
      </div>
  </div>
<script>
    {
         map.setView(new L.LatLng(28.1, 84.1), 7);
    }
</script>
  <script>  

    var map = L.map('map', {zoomControl: false, maxZoom:     12}).setView([28.1,84.1], 7);

var keepRunning = false;

timeGap = 5000;

myHit = function()
{
keepRunning = !keepRunning;    
console.log(keepRunning);

    var geojson = { type: 'LineString', coordinates: [[28.24, 84.75, 7.6,     .45, '04/25/2015', '11:56', 'Gorkha'], [28.41, 85.8, 5.5, .12, '04/25/2015', '12:23', 

'Sindhupalchowk/Tibet'], [28.28, 84.72, 6.6, .18, '04/25/2015', '12:30', 'Gorkha'], [28.13, 85.65, 5.7, .2, '04/25/2015', '12:41', 'Rasuwa'], [28.2, 85.75, 5.3, .65, '04/25/2015', 

'12:53', 'Rasuwa'], [27.99, 85.71, 5.1, .5, '04/25/2015', '13:32', 'Tibet'], [27.78, 85.84, 5.2, .05, '04/25/2015', '14:02', 'Sindhupalchowk'], [27.9, 84.86, 5.1, .15, '04/25/2015', 

'14:05', 'Dhading'], [28.18, 84.95, 5.2, .43, '04/25/2015', '14:14', 'Gorkha'], [27.65, 85.63, 5.7, .13, '04/25/2015', '14:40', 'Kabre'], [27.91, 85.33, 5.3, .45, '04/25/2015', '14:48', 

'Rasuwa'], [28, 85.6, 5.5, .22, '04/25/2015', '15:15', 'Sindhupalchowk'], [28.29, 85.16, 4.6, .67, '04/25/2015', '15:28', 'Rasuwa'], [27.87, 85.8, 4.1, .28, '04/25/2015', '16:08', 

'Sindhupalchowk'], [27.86, 85.85, 4, .42, '04/25/2015', '16:25',     'Sindhupalchowk'], [27.91, 85.5, 4.6, .6, '04/25/2015', '16:50', 'Sindhupalchowk'], [28.14, 85.28, 4.1, .6, 

'04/25/2015', '17:26', 'Rasuwa'], [28, 85.4, 4.9, .37, '04/25/2015', '18:02', 'Nuwakot'], [27.82, 86.05, 4.5, .08, '04/25/2015', '18:24', 'Dolakha'], [28.16, 84.71, 5.5, .77, 

'04/25/2015', '18:29', 'Gorkha'], [28.1, 85.2, 4.7, .1, '04/25/2015', '19:15', 'Rasuwa'], [27.69, 86.02, 4.9, .28, '04/25/2015', '19:21', 'Dolakha'], [27.79, 85.16, 4.1, .15, 

'04/25/2015', '19:38', 'Nuwakot'], [27.68, 85.32, 4.1, .13, '04/25/2015', '19:47', 'Kathmandu'], [27.73, 85.9, 4.7, .22, '04/25/2015', '19:55', 'Sindhupalchowk'], [28.05, 85.25, 4.1, 

.22, '04/25/2015', '20:08', 'Rasuwa'], [27.6, 86.09, 4.5, .07, '04/25/2015', '20:21', 'Dolakha'], [27.73, 85.9, 5, .18, '04/25/2015', '20:25', 'Sindhupalchowk'], [28.14, 85.16, 4.4, 

.43, '04/25/2015', '20:36', 'Rasuwa']]};

var hitSequence = L.marker([26, 80]).addTo(map);

loop(0,0);
var t = 0;
function loop(t){
   map.removeLayer(hitSequence);
   hitSequence = new L.marker([geojson.coordinates[t][0], geojson.coordinates[t]    [1]]).addTo(map).bindPopup("<b>Attribute1:  </b>" + geojson.coordinates[t][6] +     '<br>' + 

    "<b>Attribute2:  </b>" + geojson.coordinates[t][2] + '<br>' + "    <b>Attribute3:  </b>" + geojson.coordinates[t][4] + '<br>' + "<b>Attribute4:  </b>" + geojson.coordinates[t]

    [5]).openPopup();
   if (t>geojson.coordinates.length){t=0;}
    if(keepRunning){
       setTimeout(function() {loop(++t);}, geojson.coordinates[t][3] * timeGap);
    }
    else{map.removeLayer(hitSequence);}
   }   
    }
      </script>
</body>
</html>
Improve this question

1 Answer 1

Reset to default
1

One example using jQuery. You would need to integrate with your existing script; maybe keeping a default timeGap of 5000 (in case the user doesn't enter one), but overwriting that with the input value if the user clicks the submit button. You could also trigger this with the play button, grabbing the value from the input if it exists.

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<input id="time" type="text" placeholder="Enter a time gap" style="float:left; margin-right:5px; padding-left:3px;" />
<button type="button">Submit</button>

<script>
var timeGap = 5000;
$('button').click(function() {
    timeGap = $('input#time').val();
})
</script>
Improve this answer
1
  • But why the input text box and 'Submit' button are outside the screen area? It is reasonable that the input box and Submit button should be visible only when the user clicks 'Test Play/Stop' button' (before the action takes place) and clear away on next click on 'Test Play/Stop'. And the input box should be visible somewhere on top of map area. Any solution, please?
    – Suresh Man Shrestha
    Commented Jul 11, 2015 at 5:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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