0

The following leaflet codes draws a series of markers one by one. How to introduce variable time interval in "window.setInterval(function() {..." segment?. I want to display each marker for the time specified in "myInterval = geojson.coordinates[t][2]" milliseconds.

<!DOCTYPE html>
<html>
<head>
<title>Break Draw</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="leaflet.js"></script>
<script src="leaflet-google.js"></script>
<script src="leaflet.groupedlayercontrol.js"></script>
<script src="districtar.js"></script>
</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="btnSummary" value="Hit Sequence" onclick="myHit()"     class="btnStyle span2" />
      </div>
  </div>
</div>
<script>
function myHit()
{
var geojson = { type: 'LineString', coordinates: [[29.07, 81.51, 1000], [29.36, 81.03, 2000],                 [28.29, 83.73, 4000], [27.42, 87.01, 5000], [28.85, 82.18, 2000], [28.8, 81.92, 1000], [28.4, 83.99, 6000], 

[28.24, 84.75, 5000], [28.41, 85.8, 8000], [28.28, 84.72, 2000], [28.13, 85.65, 10000], [28.2, 85.75, 500], [27.99,     85.71, 400], [27.78, 85.84, 200], [27.9, 84.86, 600], [28.18, 84.95, 200], [27.65, 85.63, 100], [27.91, 85.33, 500], 

[28, 85.6, 4000], [28.29, 85.16, 2000], [27.87, 85.8, 1000], [27.86, 85.85, 3000], [27.91, 85.5, 4000], [28.14,     85.28, 6000], [28, 85.4, 1000], [27.82, 86.05, 200], [28.16, 84.71, 100], [28.1, 85.2, 6000], [27.69, 86.02, 4000], [27.79, 

85.16, 200], [27.68, 85.32, 200], [27.73, 85.9, 200], [28.05, 85.25, 4000], [27.6, 86.09, 3000], [27.73, 85.9, 2000],     [28.14, 85.16, 1000], [27.95, 85.56, 2000], [27.92, 85.64, 5000], [27.8, 85.29, 6000], [27.77, 85.83, 7000], [27.9, 

85.53, 1000], [27.78, 85.17, 300], [28.34, 85.91, 200], [28.1, 85.27, 400], [27.78, 85.98, 900], [27.94,     85.55, 5000], [27.71, 85.43, 4000], [27.93, 85.56, 200], [28.05, 85.35, 300], [28.14, 84.71, 4000], [27.93, 85.56, 5000],     [28.25, 

85.83, 7000], [28.24, 84.82, 9000], [27.6, 85.96, 1000], [27.98, 84.99, 100], [27.82, 85.8, 200], [27.99, 85.02, 4000], [27.69, 85.25, 3000], [27.67, 86.07, 2000], [28.05, 85.34, 8000], [27.67, 85.28, 2000]] };

 var hitSequence = L.marker([26, 80]).addTo(map);
 var t = 0;
 myInterval = 0;
 window.setInterval(function() {
      hitSequence.setLatLng(L.latLng(
      geojson.coordinates[t][0],
      geojson.coordinates[t][1]));
      myInterval = geojson.coordinates[t][2];
   t += 1;
 }, myInterval);
 }
</script>
<script>    
var map = L.map('map', {zoomControl: false, maxZoom: 12}).setView([28.1,84.1], 7);

L.control.scale({position: 'topleft'}).addTo(map);
new L.Control.Zoom({ position: 'topleft' }).addTo(map);

function voidDist(feature) {
    return {
        fillColor: 'transparent',
        weight: 1,
        opacity: 1,
        color: '#000000',
        dashArray: '1 7',
        fillOpacity: 0.7
    };
}

var plainDist = new L.geoJson(districtar, {
    style: voidDist,
      onEachFeature: function (feature, layer) {
        layer.bindPopup("District:  " + feature.properties.DNAME);
    }
    });

map.addLayer(plainDist);
</script>
</body>
</html>
  • Are you trying to get it so that each time the loop runs, the value of t that looks up the geojson coordinate increases by one and the time interval between calls also goes up? – John Powell Jun 25 '15 at 8:25
1

The standard way to do this is to use setTimeout inside a function and call that function recursively, incrementing any values you need inside the function, rather than using setInterval. This allows you to pass variables into the function being called recursively, to either vary the calling interval or some other value, such as a lookup into an array, a position for animation, etc.

//create first marker
var hitSequence = L.marker([26, 80]).addTo(map);
//initial call to loop
loop(0,0);


function loop(t){
  //remove previous marker   
  map.removeLayer(hitSequence);
  //add next marker
  hitSequence = L.marker([geojson.coordinates[t][0], geojson.coordinates[t][1]]).addTo(map);
  //if t is greater than size of coordinates array, reset to 0
  if (t>geojson.coordinates.length){t=0;}
  //recursively call loop, incrementing t, and waiting by the 3rd element in coordinates array
  setTimeout(function() {loop(++t);}, geojson.coordinates[t][2]);
  }   
}

This will cause t to go up by one on each call, and the time each marker shows, is based on the 3rd element of geojson coordinates array.

Here is a working jsFiddle. I took out some code that wasn't relevant to the question, such as districtar, which is throwing an error.

Here is a similar Stack Overflow question that you might find useful. Also, another post on the evil's of setInterval, which I found helpful and amusing.

  • I want to display each marker for the time specified in "myInterval = geojson.coordinates[t][2]" milliseconds. – Suresh Man Shrestha Jun 25 '15 at 11:26
  • So you want to add them, all at once, and then remove them again after x milliseconds, the 3rd entry in geojson array? – John Powell Jun 25 '15 at 11:43
  • Dear John, No not that way. The first marker is displayed. After say, 1 second (geojson.coordinates[x][2] = 1000), it clears away and next marker will be displayed for say 3 seconds (geojson.coordinates[x][2] = 3000), and so on. – Suresh Man Shrestha Jun 25 '15 at 14:53
  • Suresh, updated answer with jsFiddle that does what you want. – John Powell Jun 26 '15 at 7:35
  • John, Thank you. That is what I was looking for. I will try to modify the codes to suit my requirement. – Suresh Man Shrestha Jun 26 '15 at 11:11

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.