D3 Examples - OK Earthquakes geojson feed

xxxxxxxxxx
 
<!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="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
  <script src="https://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>
​
  <style>
  html {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: rgba(0,0,0, .75);
    line-height: 1.5;
  }
  a {
    color: #3182bd;
  }
  body {
    margin: 0;
  }
  ul {
    padding: 0 1.5em;
  }
  #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',
    accessToken = 'pk.eyJ1IjoiZGFycmVuamF3b3Jza2kiLCJhIjoiZmQ4OTYyNzJjYzc0OThiZTFjMmViMDE3ZmI0NTJmOTgifQ.3XwMxZz97E3nuPEZLoxohw';
​
  var map = L.map('map').setView([35.467560, -97.516428], 7);
​
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      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>',
      minZoom: 5,
      maxZoom: 12,
      id: mapboxProjectID,
      accessToken: accessToken
  }).addTo(map);
​
  // 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 script = document.createElement('script');
  script.setAttribute('src',
    'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojsonp');
  document.getElementsByTagName('head')[0].appendChild(script);
​
  var re = new RegExp('Oklahoma');
​
  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);
      }
​
      if (feature.properties && re.test(feature.properties.place)) {
        $('#eq-list').append('<li><a href="'+ feature.properties.url +'">Magnitude: '+ feature.properties.mag +", "+ feature.properties.place +'</a></li>')
      }
  }
​
  function eqfeed_callback(data) {
    L.geoJson(data, {
      onEachFeature: onEachFeature
    }).addTo(map);
  }
  </script>
​
    