Mapbox GL map that displays a vector tile layer of taxlots, then queries a REST api to return sales info when a taxlot is clicked by ajzeigert

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></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' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
			
			#features {
        position: absolute;
        top: 0;
        right: 10px;
				padding: 10px;
				text-align: left;
        overflow: auto;
        background: rgba(255, 255, 255, 0.8);
    }

			
    </style>
</head>
<body>

<div id='map'></div>
	<pre id='features'></pre>
<!--	<pre id='featuresWindow'></pre>-->
<script>
	mapboxgl.accessToken = 'pk.eyJ1Ijoic21hcnRtaW5lIiwiYSI6Imt6TUp0cEEifQ.9MrwD6GRlEGj9OTNN-bsRw';
	
	var smartmineTaxlots = 'mapbox://smartmine.5tf8jd3t'; // Vector tile service
	
	var deschutesTaxlots = '//data.deschutes.org/datasets/28019431cced49849cb4b1793b075bf1_2.geojson' // GeoJSON service
			
	var deschutesSales = '//data.deschutes.org/datasets/0e5089bd9f814b798ed26c077c24f6c7_9.geojson'; // GeoJSON service
	
	var deschutesSalesQuery = "https://maps.deschutes.org/arcgis/rest/services/OpenData/TablesFD/MapServer/9/" // Map service URL
	
	// Basic check for GL support
	if ( !mapboxgl.supported() ) {
		alert('Your browser does not support Mapbox GL');
		// Should add a regular leaflet map here just in case
	} else {
	
		var map = new mapboxgl.Map({
				container: 'map', // container id
				style: 'mapbox://styles/mapbox/light-v8', //stylesheet location
				center: [-121.3, 44.05], // starting position
				zoom: 11, // starting zoom
				minzoom: 11,
				hash: true
		});

		map.on('style.load', function() {
			map.addSource('terrain-data', {
				type: 'vector',
				url: 'mapbox://mapbox.mapbox-terrain-v2'
			});
			map.addLayer({
				"id": "terrain-data",
				"type": "line",
				"source": "terrain-data",
				"source-layer": "contour",
				"layout": {
					"line-join": "round",
					"line-cap": "round"
				},
				"paint": {
					"line-color": "#ff69b4",
					"line-width": 1
				}
			});
			
			// Load the taxlots from the raw geojson source
			var taxlotsJson = new mapboxgl.GeoJSONSource({
				data: deschutesTaxlots
			});
			
//			var salesJson = new mapboxgl.GeoJSONSource({
//				data: salesJson
//			});
			
//			console.log(salesJson);
			
//			map.addSource('taxlotsJson', taxlotsJson);
//			
//			map.addLayer({
//				"id": "taxlots",
//				"type": "fill",
//				"source": "taxlotsJson",
//				"paint": {
//					"fill-color": "rgb(122, 160, 180)",
//					"fill-opacity": 0.5,
//					"fill-line-width": 1.5,
//					"fill-outline-color": "#fff"
//				},
//				"interactive": true
//			});
			
			// Load the taxlots from a vector tile service
			map.addSource('taxlots', {
				type: 'vector',
				url: smartmineTaxlots
			});
			
			map.addLayer({
				"id": "taxlots",
				"source": "taxlots",
				"source-layer": "Taxlots",
				"type": "fill",
				"paint": {
					"fill-color": "rgb(122, 160, 180)",
					"fill-opacity": 0.5,
					"fill-line-width": 1.5,
					"fill-outline-color": "#fff"
				},
				"interactive": true
			});
			
			// When the mouse moves...
			map.on('click', function (e) {
				
				// Get features within radius 1 of mousepoint
        map.featuresAt(e.point, {radius: 1, layer: 'taxlots'}, function (err, features) {
          if (err) throw err;
//						console.log(features);
					// Get the taxlot of the feature
					var taxlotID = features[0].properties.TAXLOT;
										
					// Write the feature info to the features div
          var infoBox = document.getElementById('features') 
					
					var newRequest = "";
					
					newRequest = deschutesSalesQuery + "query?where=Taxlot=%27" + taxlotID + "%27&f=json&outFields=Total_Sales_Price_1,Sales_Date_1,Total_Sales_Price_2,Sales_Date_2";
				
					// Creating a call to the mapserver API
					aClient = new HttpClient();
					aClient.get(newRequest, function(response){
						
						var data = JSON.parse(response);
												
						var saleDate1 = new Date(data.features[0].attributes.Sales_Date_1).toLocaleDateString('en-US');
						var saleDate2 = new Date(data.features[0].attributes.Sales_Date_2).toLocaleDateString('en-US');
						
						var salesPrice1 = data.features[0].attributes.Total_Sales_Price_1;
						var salesPrice2 = data.features[0].attributes.Total_Sales_Price_2;
												
						// Populate the little thing with the info
						infoBox.innerHTML = "<h3>Taxlot ID: " + taxlotID + "</h3><p>Most recent sale date: " + saleDate1 + "</p><p>Most recent sale price: $" + salesPrice1 + "</p><p>Second most recent sale date: " + saleDate2 + "</p><p>Second most recent sale price: $" + salesPrice2 + "</p>" ;
					});
				
        });

    	});
			
			map.addControl(new mapboxgl.Navigation({position: 'top-left'}));

		});
	 // End mapbox GL section
	}
	
	// Basic GET setup for mapserver API
	var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() { 
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }

        anHttpRequest.open( "GET", aUrl, true );            
        anHttpRequest.send( null );
    }
}
</script>

</body>
</html>