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>
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/

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.