Created
March 29, 2021 20:42
-
-
Save jennynottingham/ac4f2573ffe3492a84fb99175c09e21b to your computer and use it in GitHub Desktop.
Forest Health Watch
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>Add multiple geometries from one GeoJSON source</title> | |
| <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/nprogress.css" /> | |
| <script src="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/index.js"></script> | |
| <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script> | |
| <style> | |
| body { margin: 0; padding: 0; } | |
| #map { position: absolute; top: 0; bottom: 0; width: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiamVubnlub3R0aW5naGFtIiwiYSI6ImNqY2F3dnU0djB3YmkycW81ZWdvNnF6cjcifQ.L3oEWYqpIwkjelfsH8LY_Q'; | |
| var dataResponse; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/jennynottingham/ckmmhiz8007xb17qpqfyfo181', | |
| center: [-121.403732, 40.492392], | |
| zoom: 6 | |
| }); | |
| var dataGeoJSON = { | |
| 'type': 'geojson', | |
| 'data': { | |
| 'type': 'FeatureCollection', | |
| 'features': [ | |
| { | |
| 'type': 'Feature', | |
| 'geometry': { | |
| 'type': 'Point', | |
| 'coordinates': [-121.415061, 40.506229] | |
| } | |
| }, | |
| { | |
| 'type': 'Feature', | |
| 'geometry': { | |
| 'type': 'Point', | |
| 'coordinates': [-121.505184, 40.488084] | |
| } | |
| }, | |
| { | |
| 'type': 'Feature', | |
| 'geometry': { | |
| 'type': 'Point', | |
| 'coordinates': [-121.354465, 40.488737] | |
| } | |
| } | |
| ] | |
| } | |
| } | |
| map.on('load', function () { | |
| map.addSource('national-park', dataGeoJSON); | |
| map.addLayer({ | |
| 'id': 'park-volcanoes', | |
| 'type': 'circle', | |
| 'source': 'national-park', | |
| 'paint': { | |
| 'circle-radius': 6, | |
| 'circle-color': '#B42222' | |
| }, | |
| 'filter': ['==', '$type', 'Point'] | |
| }); | |
| getData() | |
| }); | |
| function getData() { // TODO: add parameters | |
| let dataURL = 'https://api.inaturalist.org/v1/observations?taxon_id=48252&nelat=48.922499263758255&nelng=-116.71874999999999&swlat=%2031.87755764334002&swlng=-124.76074218749999&order=desc&order_by=created_at' | |
| // This fetches the lookup table to go with our Boundary lines from the boundary tileset. We will then match the FIPS codes here | |
| // with the codes from your data | |
| fetch(dataURL) | |
| .then(res => res.json()) | |
| .then((out) => { | |
| dataResponse = out; | |
| createGeoJSON(dataResponse) | |
| }) | |
| .catch(err => { throw err }); | |
| } | |
| function createGeoJSON(dataResponse) { | |
| console.log(dataResponse) | |
| var index = 0 | |
| for (each in dataResponse.results) { | |
| // var pointCoordinates = rawCoordinates.features[0].geometry.coordinates[coordinatesIndex] | |
| // //console.log(data.features[0].geometry.coordinates[coordinatesIndex]) | |
| // stringCoordinates += pointCoordinates + ';' | |
| console.log(dataResponse.results[index].geojson) | |
| dataGeoJSON.data.features.push({type: "Feature", properties: {}, geometry: dataResponse.results[index].geojson}) | |
| index++ | |
| } | |
| console.log(JSON.stringify(dataGeoJSON)) | |
| map.getSource('national-park').setData(dataGeoJSON.data) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment