JSFiddle - React, Tailwind, and code Playground

by k_sav

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.5/esri-leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="http://blueandthegreen.com/gefs/js/yAxis.js"></script>
<script src="http://blueandthegreen.com/gefs/jquery-csv.js"></script>
<div id ="wrapper">
<div id="map">
</div>
<div id = "container" style="position: absolute; width:100%; height: 80%; margin: 0 auto; z-index 9999">
</div>
</div>

CSS

#wrapper {width: 100%; height: 100%;}

JavaScript

var plotlines;
var yAxis;



//start example wind rose plot



	

//alert("plainlanguage_lat:"+plainlanguage_lat);


//alert(netcdf_lng);
//alert(plainlanguage_lat);
//var map = L.map("map", {zoomControl: false, attributionControl: false}).setView([plainlanguage_lat,plainlanguage_lng], 8);
//var background1 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
//var grayscale = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png');
//var map = L.map('map', {center: [plainlanguage_lat,plainlanguage_lng], zoom: 8, layers: [grayscale]});
//L.circleMarker([plainlanguage_lat,plainlanguage_lng], {color: 'blue', radius: 4, fillOpacity: 0.6}).addTo(map);

//L.esri.basemapLayer("Gray").addTo(map);
//L.tileLayer.wms("https://iris.ncep.noaa.gov/cgi-bin/mapserver.fcgi", { map: //"/common/data/web/iris/ops/www/resource/iris/web/mapfiles/boundary.map", layers: "county", format: //"image/png", transparent: true }).addTo(map);


//define plotlines for different lat lons





pcpn_full_array = [];
h8_mean_array = [];
h8_low_array = [];
h8_high_array = [];
h8_range_array = [];
pcpn_low_array = [];
pcpn_mean_array = [];
pcpn_high_array = [];
wind_array1 = [];

var hour_date;

  	$.get('https://cors-escape.herokuapp.com/https://www.wrh.noaa.gov/media/mfr/GEFS/42.0_230.0-850_temp.csv', function(csv) {

	$.get('https://cors-escape.herokuapp.com/https://www.wrh.noaa.gov/media/mfr/GEFS/42.0_230.0-precp.csv', function(csv2) {

$.get('https://cors-escape.herokuapp.com/https://www.wrh.noaa.gov/media/mfr/GEFS/42.0_230.0-700_windSpeed.csv', function(csv3) {

$.get('https://cors-escape.herokuapp.com/https://www.wrh.noaa.gov/media/mfr/GEFS/42.0_230.0-700_windDirec.csv', function(csv4) {
    	

var lines = csv.split('\n');
	var lines2 = csv2.split('\n');
	var lines3 = csv3.split('\n');
	var lines4 = csv4.split('\n');
//parse first line with model initialization time
	var splitdate =lines[0].split('/');
	var splittime = splitdate[2].split(' ');

	var splithours =...