Created
October 29, 2015 22:56
-
-
Save ajzeigert/ce27589e0d4f6b40fa21 to your computer and use it in GitHub Desktop.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 = 'http://data.deschutes.org/datasets/28019431cced49849cb4b1793b075bf1_2.geojson' // GeoJSON service | |
| var deschutesSales = 'http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment