Data-driven wind bouy markers in Mapbox GL JS by ajzeigert

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>METAR stations</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="//cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js"></script>
		<script src="//cdn-geoweb.s3.amazonaws.com/terraformer-arcgis-parser/1.0.4/terraformer-arcgis-parser.min.js"></script>
<!--		<script src="featureservice-master/dist/featureservice.min.js"></script>-->
<!--		<script src='colorbrewer.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: [-93, 41], // 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() {
			
			var envelope = map.getBounds();
			
			var sw = envelope.getSouthWest();
			
			var ne = envelope.getNorthEast();
			
			var requestUrl = '//tmservices1.esri.com/arcgis/rest/services/LiveFeeds/NOAA_METAR_current_wind_speed_direction/MapServer/1/query?where=objectId%3E%3D0&text=&objectIds=&time=&geometry=' + sw.lng + ',' + sw.lat + ',' + ne.lng + ',' + ne.lat + '&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';
			
			console.log(requestUrl);

			// This is the big one, grabs the ESRI data, converts to geojson, loads a layer for each feature, styled to order
				$.ajax({
					url: requestUrl,
					dataType: 'json'})
				.done(function(windresponse){
					
					console.log(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);
					}
					
					console.log(FeatureCollection);
					
					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>