<html>
	<head>
		<meta charset="utf-8">
		<title>{{  title }}</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
		<style media="screen">
			html, body {
			 height: 100%;
			 margin:0;
			}
			.leaflet-left {
				width:100%;
			}
		</style>

        <style> .leaflet-control.leaflet-timeline-control{width:96%;box-sizing:border-box;margin:2%;margin-bottom:20px;text-align:center}.leaflet-control.leaflet-timeline-control *{vertical-align:middle}.leaflet-control.leaflet-timeline-control input[type=range]{width:80%}.leaflet-control.leaflet-timeline-control .sldr-ctrl-container{float:left;width:15%;box-sizing:border-box}.leaflet-control.leaflet-timeline-control .button-container button{position:relative;width:20%;height:20px}.leaflet-control.leaflet-timeline-control .button-container button:after,.leaflet-control.leaflet-timeline-control .button-container button:before{content:'';position:absolute}.leaflet-control.leaflet-timeline-control .button-container button.play:before{border:7px solid transparent;border-width:7px 0 7px 10px;border-left-color:#000;margin-top:-7px;background:transparent;margin-left:-5px}.leaflet-control.leaflet-timeline-control .button-container button.pause{display:none}.leaflet-control.leaflet-timeline-control .button-container button.pause:before{width:4px;height:14px;border:4px solid #000;border-width:0 4px;margin-top:-7px;margin-left:-6px;background:transparent}.leaflet-control.leaflet-timeline-control .button-container button.prev:after,.leaflet-control.leaflet-timeline-control .button-container button.prev:before{margin:-8px 0 0;background:#000}.leaflet-control.leaflet-timeline-control .button-container button.prev:before{width:2px;height:14px;margin-top:-7px;margin-left:-7px}.leaflet-control.leaflet-timeline-control .button-container button.prev:after{border:7px solid transparent;border-width:7px 10px 7px 0;border-right-color:#000;margin-top:-7px;margin-left:-5px;background:transparent}.leaflet-control.leaflet-timeline-control .button-container button.next:after,.leaflet-control.leaflet-timeline-control .button-container button.next:before{margin:-8px 0 0;background:#000}.leaflet-control.leaflet-timeline-control .button-container button.next:before{width:2px;height:14px;margin-top:-7px;margin-left:5px}.leaflet-control.leaflet-timeline-control .button-container button.next:after{border:7px solid transparent;border-width:7px 0 7px 10px;border-left-color:#000;margin-top:-7px;margin-left:-5px;background:transparent}.leaflet-control.leaflet-timeline-control.playing button.pause{display:inline-block}.leaflet-control.leaflet-timeline-control.playing button.play{display:none}</style>

	</head>
	<body>
		<div id="map" style="height:100%; min-height:400px;"></div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
		<script type="text/javascript" >
            !function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";L.TimelineVersion="1.0.0-beta",i(1),i(3),i(4)},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}var s=function(){function t(t,e){var i=[],n=!0,s=!1,r=void 0;try{for(var a,o=t[Symbol.iterator]();!(n=(a=o.next()).done)&&(i.push(a.value),!e||i.length!==e);n=!0);}catch(u){s=!0,r=u}finally{try{!n&&o["return"]&&o["return"]()}finally{if(s)throw r}}return i}return function(e,i){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r=i(2),a=n(r);L.Timeline=L.GeoJSON.extend({times:[],displayedLayers:[],ranges:null,initialize:function(t){var e=this,i=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];this.ranges=new a["default"];var n=/^(\d+)(\.(\d+))?(\.(\d+))?(-(.*))?(\+(.*))?$/,r=n.exec(L.version),o=s(r,4),u=o[1],l=o[3];this.isOldVersion=0===parseInt(u,10)&&parseInt(l,10)<=7;var h={drawOnSetTime:!0};L.GeoJSON.prototype.initialize.call(this,null,i),L.Util.setOptions(this,h),L.Util.setOptions(this,i),this.options.getInterval&&(this._getInterval=function(){var t;return(t=e.options).getInterval.apply(t,arguments)}),t&&this._process(t)},_getInterval:function(t){return{start:new Date(t.properties.start).getTime(),end:new Date(t.properties.end).getTime()}},_process:function(t){var e=this,i=1/0,n=-(1/0);t.features.forEach(function(t){var s=e._getInterval(t);e.ranges.insert(s.start,s.end,t),e.times.push(s.start),e.times.push(s.end),i=Math.min(i,s.start),n=Math.max(n,s.end)}),this.start=this.options.start||i,this.end=this.options.end||n,this.time=this.start,0!==this.times.length&&(this.times.sort(function(t,e){return t-e}),this.times=this.times.reduce(function(t,e,i){if(0===i)return t;var n=t[t.length-1];return n!==e&&t.push(e),t},[this.times[0]]))},addData:function(t){var e=this,i=L.Util.isArray(t)?t:t.features;if(i)return i.filter(function(t){return t.geometries||t.geometry||t.features||t.coordinates}).forEach(function(t){return e.addData(t)}),this;if(this.options.filter&&!this.options.filter(t))return this;var n=L.GeoJSON.geometryToLayer(t,this.isOldVersion?this.options.pointToLayer:this.options);return n?(this.displayedLayers.push({layer:n,geoJSON:t}),n.feature=L.GeoJSON.asFeature(t),n.defaultOptions=n.options,this.resetStyle(n),this.options.onEachFeature&&this.options.onEachFeature(t,n),void this.addLayer(n)):this},removeLayer:function(t){var e=arguments.length<=1||void 0===arguments[1]?!0:arguments[1];L.GeoJSON.prototype.removeLayer.call(this,t),e&&(this.displayedLayers=this.displayedLayers.filter(function(e){return e.layer!==t}))},setTime:function(t){this.time="number"==typeof t?t:new Date(t).getTime(),this.options.drawOnSetTime&&this.updateDisplayedLayers(),this.fire("change")},updateDisplayedLayers:function(){for(var t=this,e=this.ranges.lookup(this.time),i=0;i<this.displayedLayers.length;i++){for(var n=!1,s=0;s<e.length;s++)if(this.displayedLayers[i].geoJSON===e[s]){n=!0,e.splice(s,1);break}if(!n){var r=this.displayedLayers.splice(i--,1);this.removeLayer(r[0].layer,!1)}}e.forEach(function(e){return t.addData(e)})},getDisplayed:function(){return this.displayedLayers.map(function(t){return t.geoJSON})}}),L.timeline=function(t,e){return new L.Timeline(t,e)}},function(t,e){"use strict";function i(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var s=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var r=function o(t,e,i,s){n(this,o),this.low=t,this.high=e,this.max=e,this.data=i,this.left=null,this.right=null,this.parent=s},a=function(){function t(){n(this,t),this._root=null,this.size=0}return s(t,[{key:"_insert",value:function(t,e,i,n,s,a){var o=void 0;if(null===n)o=new r(t,e,i,s),null===s?this._root=o:s[a]=o;else{var u=t<n.low||t===n.low&&e<n.high?"left":"right";o=this._insert(t,e,i,n[u],n,u),n.max=Math.max(n.max,o.max)}return o}},{key:"insert",value:function(t,e,i){this._insert(t,e,i,this._root,this._root),this.size++}},{key:"lookup",value:function(t){var e=[],n=this._root;return 2===arguments.length&&(n=arguments[1]),null===n||n.max<t?e:(e.push.apply(e,i(this.lookup(t,n.left))),n.low<=t&&(n.high>=t&&e.push(n.data),e.push.apply(e,i(this.lookup(t,n.right)))),e)}}]),t}();e["default"]=a},function(t,e){"use strict";function i(t){return t&&"undefined"!=typeof Symbol&&t.constructor===Symbol?"symbol":typeof t}function n(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}L.TimelineSliderControl=L.Control.extend({initialize:function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e={duration:1e4,enableKeyboardControls:!1,enablePlayback:!0,formatOutput:function(t){return""+(t||"")},showTicks:!0,waitToUpdateMap:!1,position:"bottomleft",steps:1e3};this.timelines=[],L.Util.setOptions(this,e),L.Util.setOptions(this,t),"undefined"!=typeof t.start&&(this.start=t.start),"undefined"!=typeof t.end&&(this.end=t.end)},_getTimes:function(){var t=this,e=[];if(this.timelines.forEach(function(i){var s=i.times.filter(function(e){return e>=t.start&&e<=t.end});e.push.apply(e,n(s))}),e.length){var s=function(){e.sort(function(t,e){return t-e});var t=[e[0]];return e.reduce(function(e,i){return e!==i&&t.push(i),i}),{v:t}}();if("object"===("undefined"==typeof s?"undefined":i(s)))return s.v}return e},_recalculate:function(){var t="undefined"!=typeof this.options.start,e="undefined"!=typeof this.options.end,i=this.options.duration,n=1/0,s=-(1/0);this.timelines.forEach(function(t){t.start<n&&(n=t.start),t.end>s&&(s=t.end)}),t||(this.start=n,this._timeSlider.min=n===1/0?0:n,this._timeSlider.value=this._timeSlider.min),e||(this.end=s,this._timeSlider.max=s===-(1/0)?0:s),this._stepSize=Math.max(1,(this.end-this.start)/this.options.steps),this._stepDuration=Math.max(1,i/this.options.steps)},_nearestEventTime:function(t){for(var e=arguments.length<=1||void 0===arguments[1]?0:arguments[1],i=this._getTimes(),n=!1,s=i[0],r=1;r<i.length;r++){var a=i[r];if(n)return a;if(a>=t){if(-1===e)return s;if(1!==e){var o=Math.abs(t-s),u=Math.abs(t-a);return u>o?s:a}if(a!==t)return a;n=!0}s=a}return s},_createDOM:function(){var t=["leaflet-control-layers","leaflet-control-layers-expanded","leaflet-timeline-control"],e=L.DomUtil.create("div",t.join(" "));if(this.container=e,this.options.enablePlayback){var i=L.DomUtil.create("div","sldr-ctrl-container",e),n=L.DomUtil.create("div","button-container",i);this._makeButtons(n),this.options.enableKeyboardControls&&this._addKeyListeners(),this._makeOutput(i)}this._makeSlider(e),this.options.showTicks&&this._buildDataList(e)},_addKeyListeners:function(){var t=this;this._listener=function(){return t._onKeydown.apply(t,arguments)},document.addEventListener("keydown",this._listener)},_removeKeyListeners:function(){document.removeEventListener("keydown",this._listener)},_buildDataList:function(t){this._datalist=L.DomUtil.create("datalist","",t);var e=Math.floor(1e6*Math.random());this._datalist.id="timeline-datalist-"+e,this._timeSlider.setAttribute("list",this._datalist.id),this._rebuildDataList()},_rebuildDataList:function(){for(var t=this._datalist;t.firstChild;)t.removeChild(t.firstChild);var e=L.DomUtil.create("select","",this._datalist);this._getTimes().forEach(function(t){L.DomUtil.create("option","",e).value=t})},_makeButton:function(t,e){var i=this,n=L.DomUtil.create("button",e,t);n.addEventListener("click",function(){return i[e]()}),L.DomEvent.disableClickPropagation(n)},_makeButtons:function(t){this._makeButton(t,"prev"),this._makeButton(t,"play"),this._makeButton(t,"pause"),this._makeButton(t,"next")},_makeSlider:function(t){var e=this,i=L.DomUtil.create("input","time-slider",t);i.type="range",i.min=this.start||0,i.max=this.end||0,i.value=this.start||0,i.addEventListener("change",function(t){return e._sliderChanged(t)}),i.addEventListener("input",function(t){return e._sliderChanged(t)}),i.addEventListener("mousedown",function(){return e.map.dragging.disable()}),document.addEventListener("mouseup",function(){return e.map.dragging.enable()}),this._timeSlider=i},_makeOutput:function(t){this._output=L.DomUtil.create("output","time-text",t),this._output.innerHTML=this.options.formatOutput(this.start)},_onKeydown:function(t){switch(t.keyCode||t.which){case 37:this.prev();break;case 39:this.next();break;case 32:this.toggle();break;default:return}t.preventDefault()},_sliderChanged:function(t){var e=parseFloat(t.target.value,10);this.time=e,this.options.waitToUpdateMap&&"change"!==t.type||this.timelines.forEach(function(t){return t.setTime(e)}),this._output&&(this._output.innerHTML=this.options.formatOutput(e))},addTimelines:function(){var t=this;this.pause();for(var e=this.timelines.length,i=arguments.length,n=Array(i),s=0;i>s;s++)n[s]=arguments[s];n.forEach(function(e){-1===t.timelines.indexOf(e)&&t.timelines.push(e)}),this.timelines.length!==e&&(this._recalculate(),this.options.showTicks&&this._rebuildDataList(),this.setTime(this.start))},removeTimelines:function(){var t=this;this.pause();for(var e=this.timelines.length,i=arguments.length,n=Array(i),s=0;i>s;s++)n[s]=arguments[s];n.forEach(function(e){var i=t.timelines.indexOf(e);-1!==i&&t.timelines.splice(i,1)}),this.timelines.length!==e&&(this._recalculate(),this.options.showTicks&&this._rebuildDataList(),this.setTime(this.start))},toggle:function(){this._playing?this.pause():this.play()},prev:function(){this.pause();var t=this._nearestEventTime(this.time,-1);this._timeSlider.value=t,this.setTime(t)},pause:function(){clearTimeout(this._timer),this._playing=!1,this.container.classList.remove("playing")},play:function(){var t=this;clearTimeout(this._timer),parseFloat(this._timeSlider.value,10)===this.end&&(this._timeSlider.value=this.start),this._timeSlider.value=parseFloat(this._timeSlider.value,10)+this._stepSize,this.setTime(this._timeSlider.value),parseFloat(this._timeSlider.value,10)===this.end?(this._playing=!1,this.container.classList.remove("playing")):(this._playing=!0,this.container.classList.add("playing"),this._timer=setTimeout(function(){return t.play()},this._stepDuration))},next:function(){this.pause();var t=this._nearestEventTime(this.time,1);this._timeSlider.value=t,this.setTime(t)},setTime:function(t){this._sliderChanged({type:"change",target:{value:t}})},onAdd:function(t){return this.map=t,this._createDOM(),this.setTime(this.start),this.container},onRemove:function(){this.options.enableKeyboardControls&&this._removeKeyListeners()}}),L.timelineSliderControl=function(t,e,i,n){return new L.TimelineSliderControl(t,e,i,n)}},function(t,e){}]);
        </script>

		<script type="text/javascript">

		 var dark_layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',{
				attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
				});
		 var Esri_OceanBasemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
			 attribution: 'Tiles &copy; Esri &mdash; Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
			 maxZoom: 13
		 	});
			var CartoDB_Positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
				attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
				subdomains: 'abcd',
				maxZoom: 19
			});
			var Stamen_Toner = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
				attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
				subdomains: 'abcd',
				minZoom: 0,
				maxZoom: 20,
				ext: 'png'
			});


			var map = L.map('map', {
				center: [{{ center_y }} , {{ center_x }}],
				zoom: {{ zoom }}
			});

			map.addLayer({{layer}});

			var timelineControl = L.timelineSliderControl({
				formatOutput: function(date) {
					return new Date(date).toString();
				},
				steps: {{ steps }},
				waitToUpdateMap: true,
			});

			timelineControl.addTo(map);

			function eqfeed_callback(data, timelineControl){
				var getInterval = function(detection) {
					return {
						start: detection.starttime,
						end:   detection.endtime+30000000,
					};
				};

				var timeline = L.timeline(data, {
					getInterval: getInterval,
					pointToLayer: function(data, latlng){
						var hue = data.hue;
						return L.circleMarker(latlng, {
							radius: 5,
							color: "hsl("+hue+", 100%, 50%)",
							fillColor: "hsl("+hue+", 100%, 50%)"
						}).bindPopup(data.catalognumber);
					}
				});

				timelineControl.addTimelines(timeline);
				timeline.addTo(map);
			}
			$.getJSON("{{ json_file }}", function(data) {
					eqfeed_callback(data[0], timelineControl);
				console.log("Success!");
			}).fail( function(d, textStatus, error) {
					console.error("getJSON failed, status: " + textStatus + ", error: "+error);
			});
			</script>
	</body>
</html>
