darrenjaworski/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
past month, year and since 2001 now restricted


## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
  <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

  <style>
  html {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: rgba(0,0,0, .75);
    line-height: 1.5;
  }
  a {
    color: #0570b0;
  }
  body {
    margin: 0;
  }
  ul {
    padding: 0 1.5em;
  }
  h1 {
    line-height: 1;
  }
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  #info {
    position: absolute;
    bottom: 0;
    width: 35%;
    height: 35%;
    overflow: scroll;
    background: rgba(255,255,255, .9);
    padding: 1em;
    box-sizing: border-box;
  }
  @media (max-width: 750px) {
    #info {
      width: 100%;
    }
  }

  </style>
</head>
<body>
  <div id="map">

  </div>
  <div id="info">
    <h1>Last 30 days of 2.5+ Magnitude Oklahoma Earthquakes</h1>
    <ul id="eq-list">

    </ul>
  </div>
  <script>
  var mapboxProjectID = 'darrenjaworski.n120ogj4',
    mapboxProjectID2 = 'darrenjaworski.n184ei60',
    accessToken = 'pk.eyJ1IjoiZGFycmVuamF3b3Jza2kiLCJhIjoiZmQ4OTYyNzJjYzc0OThiZTFjMmViMDE3ZmI0NTJmOTgifQ.3XwMxZz97E3nuPEZLoxohw',
    quakesLayer = new L.LayerGroup(),
    wellsLayer = new L.LayerGroup(),
    attribution = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    mapboxURL = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';

  var grayscale = L.tileLayer(mapboxURL, {
      attribution: attribution,
      minZoom: 6,
      maxZoom: 12,
      id: mapboxProjectID,
      accessToken: accessToken
  });

  var outdoor = L.tileLayer(mapboxURL, {
      attribution: attribution,
      minZoom: 6,
      maxZoom: 12,
      id: mapboxProjectID2,
      accessToken: accessToken
  });

  // Get the earthquake data (JSONP format)
  // This feed is a copy from the USGS feed, you can find the originals here:
  //   http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
  var earthquake30 = document.createElement('script'),
    disposalwells = document.createElement('script'),
    earthquakeLastYears = document.createElement('script');

  var today = new Date(),
    ago30 = new Date().setDate(today.getDate()-30),
    agoYear = new Date().setFullYear(today.getFullYear()-1);
    todayString = today.getFullYear() + "-" + ("0" + (today.getMonth() + 1)).slice(-2) + "-" + today.getDate();

  disposalwells.setAttribute('src',
  'http://bl.ocks.org/darrenjaworski/raw/2faa0284c6af4d2d1ce3/dw.geojsonp');
  document.getElementsByTagName('head')[0].appendChild(disposalwells);

  earthquakeLastYears.setAttribute('src',
  'http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&callback=eqfeed_callback&minmagnitude=2.5&minlongitude=-103&maxlongitude=-94&maxlatitude=37&minlatitude=33&starttime=2001-01-01&endtime='+ todayString +'');
  document.getElementsByTagName('head')[0].appendChild(earthquakeLastYears);

  var re = new RegExp('Oklahoma');

  var pastMonth = new L.layerGroup(),
    pastYear = new L.layerGroup(),
    past10Years = new L.layerGroup();

  function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.mag) {
      var popupContent = "Magnitude: "+ String(feature.properties.mag)+ " – <a href='"+ feature.properties.url +"'>more info</a>";
      layer.bindPopup(popupContent);
    }

    var Time = new Date(feature.properties.time);

    if (feature.properties && Time > new Date(ago30)) {
      $('#eq-list').append('<li><a href="'+ feature.properties.url +'">Magnitude: '+ feature.properties.mag +", "+ feature.properties.place +'</a></li>')
      pastMonth.addLayer(layer);
    }

    if (feature.properties && Time > new Date(agoYear)) {
      pastYear.addLayer(layer);
    }
    past10Years.addLayer(layer);
  }

  function filter(feature, layer) {
    return re.test(feature.properties.place);
  }

  var dwMarker = {
      radius: 1,
      fillColor: "#0570b0",
      color: "#0570b0",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.75
    };

  function dw_callback(data) {

    var wells = L.geoJson(data, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, dwMarker);
        }
    }).addTo(wellsLayer);

  };

  var scale = d3.scale.log().range([2,10]).domain([2.5, 6]);

  function eqfeed_callback(data) {

    var quakes = L.geoJson(data, {
      filter: filter,
      onEachFeature: onEachFeature,
      pointToLayer: function (feature, latlng) {
        var eqMarker = {
            radius: scale(feature.properties.mag),
            fillColor: "#ef6548",
            color: "#fff",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        };
        return L.circleMarker(latlng, eqMarker);
      }
    });

  };

  var base = {
    "Grayscale": grayscale,
    "Outdoor": outdoor
  };

  var overlays = {
    "Quakes since 2001": past10Years,
    "Quakes in last year": pastYear,
    "Quakes in last month": pastMonth,
    "Wells": wellsLayer,
  };

  var map = L.map('map', {
    center: [35.467560, -97.516428],
    zoom: 8,
    layers: [grayscale, pastMonth, wellsLayer]
  });

  L.control.layers(base,overlays).addTo(map);

  </script>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

	<style>
	html {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: rgba(0,0,0, .75);
	line-height: 1.5;
	}
	a {
	color: #0570b0;
	}
	body {
	margin: 0;
	}
	ul {
	padding: 0 1.5em;
	}
	h1 {
	line-height: 1;
	}
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}
	#info {
	position: absolute;
	bottom: 0;
	width: 35%;
	height: 35%;
	overflow: scroll;
	background: rgba(255,255,255, .9);
	padding: 1em;
	box-sizing: border-box;
	}
	@media (max-width: 750px) {
	#info {
	width: 100%;
	}
	}

	</style>
	</head>
	<body>
	<div id="map">

	</div>
	<div id="info">
	<h1>Last 30 days of 2.5+ Magnitude Oklahoma Earthquakes</h1>
	<ul id="eq-list">

	</ul>
	</div>
	<script>
	var mapboxProjectID = 'darrenjaworski.n120ogj4',
	mapboxProjectID2 = 'darrenjaworski.n184ei60',
	accessToken = 'pk.eyJ1IjoiZGFycmVuamF3b3Jza2kiLCJhIjoiZmQ4OTYyNzJjYzc0OThiZTFjMmViMDE3ZmI0NTJmOTgifQ.3XwMxZz97E3nuPEZLoxohw',
	quakesLayer = new L.LayerGroup(),
	wellsLayer = new L.LayerGroup(),
	attribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
	mapboxURL = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';

	var grayscale = L.tileLayer(mapboxURL, {
	attribution: attribution,
	minZoom: 6,
	maxZoom: 12,
	id: mapboxProjectID,
	accessToken: accessToken
	});

	var outdoor = L.tileLayer(mapboxURL, {
	attribution: attribution,
	minZoom: 6,
	maxZoom: 12,
	id: mapboxProjectID2,
	accessToken: accessToken
	});

	// Get the earthquake data (JSONP format)
	// This feed is a copy from the USGS feed, you can find the originals here:
	// http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
	var earthquake30 = document.createElement('script'),
	disposalwells = document.createElement('script'),
	earthquakeLastYears = document.createElement('script');

	var today = new Date(),
	ago30 = new Date().setDate(today.getDate()-30),
	agoYear = new Date().setFullYear(today.getFullYear()-1);
	todayString = today.getFullYear() + "-" + ("0" + (today.getMonth() + 1)).slice(-2) + "-" + today.getDate();

	disposalwells.setAttribute('src',
	'http://bl.ocks.org/darrenjaworski/raw/2faa0284c6af4d2d1ce3/dw.geojsonp');
	document.getElementsByTagName('head')[0].appendChild(disposalwells);

	earthquakeLastYears.setAttribute('src',
	'http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&callback=eqfeed_callback&minmagnitude=2.5&minlongitude=-103&maxlongitude=-94&maxlatitude=37&minlatitude=33&starttime=2001-01-01&endtime='+ todayString +'');
	document.getElementsByTagName('head')[0].appendChild(earthquakeLastYears);

	var re = new RegExp('Oklahoma');

	var pastMonth = new L.layerGroup(),
	pastYear = new L.layerGroup(),
	past10Years = new L.layerGroup();

	function onEachFeature(feature, layer) {
	if (feature.properties && feature.properties.mag) {
	var popupContent = "Magnitude: "+ String(feature.properties.mag)+ " – <a href='"+ feature.properties.url +"'>more info</a>";
	layer.bindPopup(popupContent);
	}

	var Time = new Date(feature.properties.time);

	if (feature.properties && Time > new Date(ago30)) {
	$('#eq-list').append('<li><a href="'+ feature.properties.url +'">Magnitude: '+ feature.properties.mag +", "+ feature.properties.place +'</a></li>')
	pastMonth.addLayer(layer);
	}

	if (feature.properties && Time > new Date(agoYear)) {
	pastYear.addLayer(layer);
	}
	past10Years.addLayer(layer);
	}

	function filter(feature, layer) {
	return re.test(feature.properties.place);
	}

	var dwMarker = {
	radius: 1,
	fillColor: "#0570b0",
	color: "#0570b0",
	weight: 1,
	opacity: 1,
	fillOpacity: 0.75
	};

	function dw_callback(data) {

	var wells = L.geoJson(data, {
	pointToLayer: function (feature, latlng) {
	return L.circleMarker(latlng, dwMarker);
	}
	}).addTo(wellsLayer);

	};

	var scale = d3.scale.log().range([2,10]).domain([2.5, 6]);

	function eqfeed_callback(data) {

	var quakes = L.geoJson(data, {
	filter: filter,
	onEachFeature: onEachFeature,
	pointToLayer: function (feature, latlng) {
	var eqMarker = {
	radius: scale(feature.properties.mag),
	fillColor: "#ef6548",
	color: "#fff",
	weight: 1,
	opacity: 1,
	fillOpacity: 0.8
	};
	return L.circleMarker(latlng, eqMarker);
	}
	});

	};

	var base = {
	"Grayscale": grayscale,
	"Outdoor": outdoor
	};

	var overlays = {
	"Quakes since 2001": past10Years,
	"Quakes in last year": pastYear,
	"Quakes in last month": pastMonth,
	"Wells": wellsLayer,
	};

	var map = L.map('map', {
	center: [35.467560, -97.516428],
	zoom: 8,
	layers: [grayscale, pastMonth, wellsLayer]
	});

	L.control.layers(base,overlays).addTo(map);

	</script>