jonlambert/gist:02242d6c077b2df22402 Secret

## gistfile1.js
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>GeoJSON Marker from URL</title>

  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src='//api.tiles.mapbox.com/mapbox.js/v1.4.2/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.2/mapbox.css' rel='stylesheet' />
  <script type="text/javascript" src="/t/jquery.min.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'jonlambert.g99a0gi8')

    .setView([54.978252, -1.61778], 7);

var marker = L.mapbox.markerLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [-77, 37.9]
    },
    properties: {
        title: 'A Single Marker',
        description: 'Just one of me',
        // one can customize markers by adding simplestyle properties
        // http://mapbox.com/developers/simplestyle/
        'marker-size': 'large',
        'marker-color': '#f0a'
    }
});
marker.addTo(map);


var locations = []
var markers = [];

map.zoomControl.removeFrom(map);


setInterval(function(){

  $.get('/admin/?q=locations', function(results) {


    var newLocations = results;

    for (ni in locations) {
      newLocations.shift();
    }

    console.log(newLocations.length + ' new locations.')


    for (i in newLocations) {

      var result = results[i];

      var marker = L.mapbox.markerLayer({
        // this feature is in the GeoJSON format: see geojson.org
        // for the full specification
        type: 'Feature',
        geometry: {
            type: 'Point',
            // coordinates here are in longitude, latitude order because
            // x, y is the standard for GeoJSON and many formats
            coordinates: [result.longitude, result.latitude]
        },
        properties: {
            title: result.school_name,
            description: result.body,
            // one can customize markers by adding simplestyle properties
            // http://mapbox.com/developers/simplestyle/
            'marker-size': 'small',
            'marker-color': '#C12B00'
        }
      });

      marker.bindPopup('Hello')

      marker.addTo(map.markerLayer);

      markers.push(marker)
    }

    locations = locations.concat(newLocations)

  });
}, 1000);


cycle();

function cycle() {
    var i = 0;
    function run() {
      setTimeout(run, 3000);

        if (markers.length == 0) {
          return;
        }
        if (++i > markers.length - 1) i = 0;

        console.log(locations[i]);

        clickButton(markers[i], locations[i]);
    }
    run();

    function clickButton(markerIncoming, location) {
      console.log('clicking button')
      console.log(L.mapbox.markerLayer.eachLayer)

      var ll = L.latLng(Math.round(location.longitude * 10) / 10, Math.round(location.latitude * 10) / 10);

      console.log(ll)
      markerIncoming.openPopup();
    }
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>GeoJSON Marker from URL</title>

	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script src='//api.tiles.mapbox.com/mapbox.js/v1.4.2/mapbox.js'></script>
	<link href='//api.tiles.mapbox.com/mapbox.js/v1.4.2/mapbox.css' rel='stylesheet' />
	<script type="text/javascript" src="/t/jquery.min.js"></script>

	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<div id='map'></div>
	<script>
	var map = L.mapbox.map('map', 'jonlambert.g99a0gi8')

	.setView([54.978252, -1.61778], 7);

	var marker = L.mapbox.markerLayer({
	// this feature is in the GeoJSON format: see geojson.org
	// for the full specification
	type: 'Feature',
	geometry: {
	type: 'Point',
	// coordinates here are in longitude, latitude order because
	// x, y is the standard for GeoJSON and many formats
	coordinates: [-77, 37.9]
	},
	properties: {
	title: 'A Single Marker',
	description: 'Just one of me',
	// one can customize markers by adding simplestyle properties
	// http://mapbox.com/developers/simplestyle/
	'marker-size': 'large',
	'marker-color': '#f0a'
	}
	});
	marker.addTo(map);



	var locations = []
	var markers = [];

	map.zoomControl.removeFrom(map);


	setInterval(function(){

	$.get('/admin/?q=locations', function(results) {


	var newLocations = results;

	for (ni in locations) {
	newLocations.shift();
	}

	console.log(newLocations.length + ' new locations.')




	for (i in newLocations) {

	var result = results[i];

	var marker = L.mapbox.markerLayer({
	// this feature is in the GeoJSON format: see geojson.org
	// for the full specification
	type: 'Feature',
	geometry: {
	type: 'Point',
	// coordinates here are in longitude, latitude order because
	// x, y is the standard for GeoJSON and many formats
	coordinates: [result.longitude, result.latitude]
	},
	properties: {
	title: result.school_name,
	description: result.body,
	// one can customize markers by adding simplestyle properties
	// http://mapbox.com/developers/simplestyle/
	'marker-size': 'small',
	'marker-color': '#C12B00'
	}
	});

	marker.bindPopup('Hello')

	marker.addTo(map.markerLayer);

	markers.push(marker)
	}

	locations = locations.concat(newLocations)

	});
	}, 1000);



	cycle();

	function cycle() {
	var i = 0;
	function run() {
	setTimeout(run, 3000);

	if (markers.length == 0) {
	return;
	}
	if (++i > markers.length - 1) i = 0;

	console.log(locations[i]);

	clickButton(markers[i], locations[i]);
	}
	run();

	function clickButton(markerIncoming, location) {
	console.log('clicking button')
	console.log(L.mapbox.markerLayer.eachLayer)

	var ll = L.latLng(Math.round(location.longitude * 10) / 10, Math.round(location.latitude * 10) / 10);

	console.log(ll)
	markerIncoming.openPopup();
	}
	}
	</script>
	</body>
	</html>