jennynottingham/index.html

## index.html
<!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>
	<!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>