1

The following leaflet codes draws a series of markers one by one. I don't want to wait until all points are drawn. How to break the drawing process before it ends and clear the screen?

<!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], [29.36, 81.03],     [28.29, 83.73], [27.42, 87.01], [28.85, 82.18], [28.8, 81.92], [28.4, 83.99], 

[28.24, 84.75], [28.41, 85.8], [28.28, 84.72], [28.13, 85.65], [28.2, 85.75], [27.99,     85.71], [27.78, 85.84], [27.9, 84.86], [28.18, 84.95], [27.65, 85.63], [27.91, 85.33], 

[28, 85.6], [28.29, 85.16], [27.87, 85.8], [27.86, 85.85], [27.91, 85.5], [28.14, 85.28], [28, 85.4], [27.82, 86.05], [28.16, 84.71], [28.1, 85.2], [27.69, 86.02], [27.79, 

85.16], [27.68, 85.32], [27.73, 85.9], [28.05, 85.25], [27.6, 86.09], [27.73, 85.9],     [28.14, 85.16], [27.95, 85.56], [27.92, 85.64], [27.8, 85.29], [27.77, 85.83], [27.9, 

85.53], [27.78, 85.17], [28.34, 85.91], [28.1, 85.27], [27.78, 85.98], [27.94, 85.55], [27.71, 85.43], [27.93, 85.56], [28.05, 85.35], [28.14, 84.71], [27.93, 85.56], [28.25, 

85.83], [28.24, 84.82], [27.6, 85.96], [27.98, 84.99], [27.82, 85.8], [27.99, 85.02], [27.69, 85.25], [27.67, 86.07], [28.05, 85.34], [27.67, 85.28]] };

     var hitSequence = L.marker([26, 80]).addTo(map);
     var t = 0;
     window.setInterval(function() {
          hitSequence.setLatLng(L.latLng(
          geojson.coordinates[t][0],
          geojson.coordinates[t][1]));
       t += 1;
     }, 100);
     }
</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>
Improve this question

1 Answer 1

Reset to default
1

The answer is simple javascript to cancel the setInterval you created:

var handle = setInterval(function() {
    // do something
}, 100);

function onCancel() {
    if (handle) clearInterval(handle);
}

Here's a working example using your code: http://jsfiddle.net/umwo0rn1/25/

Improve this answer

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.