JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.0/rx.all.js"></script>
<div id="map"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#map {
  height: 100%;
}

JavaScript

var quanke = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp';

function loadJSONP(url) {
  var script = document.createElement('script');
  script.src = url;
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(script);
}
var map = L.map('map').setView([33.858631, -118.279602], 7);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

var quakes = Rx.Observable.create(function(observer) {
  window.eqfeed_callback = function(response) {
    var quakes = response.features;
    quakes.forEach(function(quake) {
      observer.next(quake);
    });
  }
  loadJSONP(quanke);
});

quakes.subscribe(function(quake) {
  var coords = quake.geometry.coordinates;
  var size = quake.properties.map * 10000;

  L.circle([coords[1], coords[0]], size).addTo(map);
})