ajzeigert/index.html

## 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="http://cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js"></script>
		<script src="http://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 = 'http://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>
	<!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="http://cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js"></script>
	<script src="http://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 = 'http://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>