METARmap

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>METAR map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
		<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
		<script src="https://cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js"></script>
		<script src="https://cdn-geoweb.s3.amazonaws.com/terraformer-arcgis-parser/1.0.4/terraformer-arcgis-parser.min.js"></script>

	<style>
		
		html, body {
			font-family: sans-serif;
			padding: 0;
			margin: 0;
		}
		
		#map {
			width: 100vw;
			height: 100vh;
		}

</style>
</head>
<body>
	<div id="map"></div>
	<script>
		
		// Smartmine mapbox token
		mapboxgl.accessToken = 'pk.eyJ1Ijoic21hcnRtaW5lIiwiYSI6Imt6TUp0cEEifQ.9MrwD6GRlEGj9OTNN-bsRw';
		
		// Smartmine map style
		var geodark = 'mapbox://styles/smartmine/cigdv27lk00029hkt6leqc9yz';
		
		// Fire up the map
		var map = new mapboxgl.Map({
				container: 'map', // container id
				style: geodark, //stylesheet location
				center: [-97, 37], // starting position
				zoom: 3, // starting zoom
				hash: true
		});
		
		// Add a new basic controller
		map.addControl(new mapboxgl.Navigation({position: 'top-left'}));
				
		// After the map style loads, do this stuff
		map.on('style.load', function() {

// This is the big one, grabs the ESRI data, converts to geojson, loads a layer for each feature, styled to order
				$.ajax({
					url: 'https://tmservices1.esri.com/arcgis/rest/services/LiveFeeds/NOAA_METAR_current_wind_speed_direction/MapServer/0/query?where=objectId%3E%3D0&text=&objectIds=&time=&geometry=-130%2C20%2C-58%2C52&geometryType=esriGeometryEnvelope&inSR=4326&spatialRel=esriSpatialRelEnvelopeIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=4326&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&f=json',
					dataType: 'json'})
				.done(function(windresponse){

var FeatureCollection = {
						type: "FeatureCollection",
						features: []
					}

for(var i = 0; i < windresponse.features.length; i++){
						var feature = Terraformer.ArcGIS.parse(windresponse.features[i]);
						feature.id = i;
						FeatureCollection.features.push(feature);
					}
					var source = new mapboxgl.GeoJSONSource({
						data: FeatureCollection
					})
	//				 Add the newly created geojson as a source	
					map.addSource('wind', source);

// Function to translate wind speed to proper text size
					var windSize = function(feature){
						var a = feature.properties.WIND_SPEED
						if (a > 0 && a <= 11 ) {
							return 16;
						}
						else if (a > 11 && a <= 20) {
							return 18;
						}
						else if (a > 20 && a <= 28) {
							return 20;
						}
						else if (a > 28 && a <= 39) {
							return 22;
						}
						else if (a > 39 && a <= 94) {
							return 24;
						}
						else {
							return 0;
						}
					}

// Function to translate wind speed to proper text color
					var windColor = function(feature){
						var a = feature.properties.WIND_SPEED
						if (a > 0 && a <= 11 ) {
							return 'rgb(191, 184, 64)';
						}
						else if (a > 11 && a <= 20) {
							return 'rgb(242, 203, 103)';
						}
						else if (a > 20 && a <= 28) {
							return 'rgb(237, 162, 62)';
						}
						else if (a > 28 && a <= 39) {
							return 'rgb(219, 94, 49)';
						}
						else if (a > 39 && a <= 94) {
							return 'rgb(168, 0, 0)';
						}
						else {
							return 'rgb(255,255,255)';
						}
					}

// Build an array of layers for each features
					var windLayers = [];

// Build a layer for each feature and push it into the empty array
					var i;

for (i = 0; i < FeatureCollection.features.length; i++) {
						var layer = {
							"id": 'wind' + i,
							"type": 'symbol',
							"source": 'wind',
							"layout": {
								"text-field": FeatureCollection.features[i].properties.WIND_SPEED > 0 ? 'E' : '5',
								"text-font": ['ESRI Dimensioning Regular'],
								"text-rotate": FeatureCollection.features[i].properties.WIND_DIRECT,
								"text-rotation-alignment": 'map',
								"text-size": windSize(FeatureCollection.features[i])
							},
							"paint": {
								"text-color": windColor(FeatureCollection.features[i])
							},
							"filter": ['==', 'OBJECTID', FeatureCollection.features[i].properties.OBJECTID]
						};

windLayers.push(layer);
					}

map.batch(function(batch){
						var i;
						for (i = 0; i < windLayers.length; i++) {
							batch.addLayer(windLayers[i])
						}
					})
					
					console.log(windLayers.length)

}); // End of esri call
			
			}); // End mapbox on load function

</script>
</body>
</html>

Modified http://cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js to a secure url

Modified http://cdn-geoweb.s3.amazonaws.com/terraformer-arcgis-parser/1.0.4/terraformer-arcgis-parser.min.js to a secure url

https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.js

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

https://cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js

https://cdn-geoweb.s3.amazonaws.com/terraformer-arcgis-parser/1.0.4/terraformer-arcgis-parser.min.js