OK Earthquakes VII

now includes fracking site data from http://www.fracfocus.org/

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

</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(),
    faultLayer = new L.LayerGroup(),
    frackingLayer = new L.LayerGroup(),
    attribution = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>',
    mapboxURL = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
    minZoom = 6,
    maxZoom = 14,
    grayscale = L.tileLayer(mapboxURL, {
        attribution: attribution,
        minZoom: minZoom,
        maxZoom: maxZoom,
        id: mapboxProjectID,
        accessToken: accessToken
    }),
    outdoor = L.tileLayer(mapboxURL, {
        attribution: attribution,
        minZoom: minZoom,
        maxZoom: maxZoom,
        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:
  //   https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
  var earthquake30 = document.createElement('script'),
    disposalwells = document.createElement('script'),
    earthquakeLastYears = document.createElement('script'),
    faults = document.createElement('script'),
    fracking = 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',
  'https://bl.ocks.org/darrenjaworski/raw/2faa0284c6af4d2d1ce3/dw.geojsonp');
  document.getElementsByTagName('head')[0].appendChild(disposalwells);

faults.setAttribute('src',
  'https://bl.ocks.org/darrenjaworski/raw/1ae926dd0251e53f4d4b/faults.geojsonp');
  document.getElementsByTagName('head')[0].appendChild(faults);

fracking.setAttribute('src',
  'frack.geojsonp');
  document.getElementsByTagName('head')[0].appendChild(fracking);

earthquakeLastYears.setAttribute('src',
  'https://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 pastMonth = new L.layerGroup(),
    pastYear = new L.layerGroup(),
    past10Years = new L.layerGroup(),
    options = {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit"
    },
    ul = $('#eq-list');

function onEachFeature(feature, layer) {

var quakeTime = new Date(feature.properties.time),
      formatTime = String(quakeTime.toLocaleTimeString("en-us", options)),
      content = formatTime + "<br>Magnitude: "+ String(feature.properties.mag),
      rightContentPopup = " – <a href='"+ feature.properties.url +"'>more info</a>",
      rightContentLI = " – <a href='"+ feature.properties.url +"'>"+ feature.properties.place + "</a>";

if (feature.properties && feature.properties.mag) {
      layer.bindPopup(content + rightContentPopup);
    }
    if (feature.properties && quakeTime > new Date(ago30)) {
      ul.append('<li>'+ content + rightContentLI +'</li>')
      pastMonth.addLayer(layer);
    }
    if (feature.properties && quakeTime > new Date(agoYear)) {
      pastYear.addLayer(layer);
    }
    past10Years.addLayer(layer);

}

var re = new RegExp('Oklahoma');

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
    },
    lineStyle = {
      "color": "#000000",
      "weight": 1,
      "opacity": 0.65
    },
    frackMarker = {
      radius: 1,
      fillColor: "#2ca25f",
      color: "#2ca25f",
      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);

};

function frack_callback(data) {

var frack = L.geoJson(data, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, frackMarker);
        }
    }).addTo(frackingLayer);

};

function fault_callback(data) {

var fault = L.geoJson(data, {
        style: lineStyle
    }).addTo(faultLayer);

};

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

function eqfeed_callback(data) {

};

var base = {
      "Grayscale": grayscale,
      "Outdoor": outdoor,
    },
    overlays = {
      "Quakes since 2001": past10Years,
      "Quakes in last year": pastYear,
      "Quakes in last month": pastMonth,
      "Wells": wellsLayer,
      "Fault lines": faultLayer,
      "Fracking Site": frackingLayer
    };

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

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

</script>

Modified http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js

https://code.jquery.com/jquery-2.1.4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js