0

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.

How can I put the list 'geojson' as geojson.txt file in my hard disk and access that file in the following code? This way I can save so many lines in my code.

<!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;

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]*3000);
    }
    else{map.removeLayer(hitSequence);}
   }   
}
  </script>
</body>
</html>
1

The easy way is to put everything from var geojson = { down to the closing }; into a new file and loading that as JavaScript file in the head of your HTML.

For example:

geojson_data.js:

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.14, 85.16, 4.4, .43, '04/25/2015', '20:36', 'Rasuwa']

 ]

};

And in your section add:

<script src="geojson_data.js"></script>

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.