jbranigan/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Add a vector tile source</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
  <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css" />
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.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>
    var center = [-98, 39];

    mapboxgl.accessToken = 'pk.eyJ1IjoiYnJhbmlnYW4iLCJhIjoiY2tlMWtmcndiMDA4bzJxbngzbm9zaDg3YyJ9.GvTC2gaBQE4H79yxpPPDCg';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      zoom: 4,
      center: center
    });

    var geocoder = new MapboxGeocoder({
      accessToken: mapboxgl.accessToken,
      mapboxgl: mapboxgl,
      flyTo: false,
      zoom: 8,
      countries: 'us'
    });

    map.addControl(geocoder, 'top-right');

    function applyNearest(bbox, nearest) {
      map.fitBounds(bbox, {
        padding: 20,
      });
      nearest.forEach(point => {
        map.setFeatureState({
          source: 'hospital-data',
          sourceLayer: 'us-hospitals',
          id: point.id
        },
        {
          nearby: true
        });
      });
    }

    function findNearest() {
      var features = map.queryRenderedFeatures({ layers: ['hospitals'] });

      features.forEach(feature => {
        feature.properties.distance = turf.distance(center, feature.geometry);
      });

      var sorted = Array.prototype.slice.call(features).sort((a, b) => {
        return (a.properties.distance > b.properties.distance);
      });

      var nearest = sorted.slice(0, 10);
      var bbox = turf.bbox(turf.featureCollection(nearest));
      applyNearest(bbox, nearest);
    }

    geocoder.on('result', e => {
      center = e.result.geometry.coordinates;
      map.jumpTo({
        center: center,
        zoom: 6
      });
      map.once('idle', findNearest);
    });

    map.on('load', function () {
      map.addSource('hospital-data', {
        type: 'vector',
        url: 'mapbox://branigan.us-hospitals'
      });
      map.addLayer({
        'id': 'hospitals',
        'type': 'circle',
        'source': 'hospital-data',
        'source-layer': 'us-hospitals',
        'layout': {},
        'paint': {
          'circle-color': [
            'case',
              ['!=',
              ['feature-state', 'nearby'], null],
              'red',
            'cornflowerblue'
            ],
          'circle-radius': 3
        }
      });
    });
  </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Add a vector tile source</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
	<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
	<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css" />
	<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.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>
	var center = [-98, 39];

	mapboxgl.accessToken = 'pk.eyJ1IjoiYnJhbmlnYW4iLCJhIjoiY2tlMWtmcndiMDA4bzJxbngzbm9zaDg3YyJ9.GvTC2gaBQE4H79yxpPPDCg';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v10',
	zoom: 4,
	center: center
	});

	var geocoder = new MapboxGeocoder({
	accessToken: mapboxgl.accessToken,
	mapboxgl: mapboxgl,
	flyTo: false,
	zoom: 8,
	countries: 'us'
	});

	map.addControl(geocoder, 'top-right');

	function applyNearest(bbox, nearest) {
	map.fitBounds(bbox, {
	padding: 20,
	});
	nearest.forEach(point => {
	map.setFeatureState({
	source: 'hospital-data',
	sourceLayer: 'us-hospitals',
	id: point.id
	},
	{
	nearby: true
	});
	});
	}

	function findNearest() {
	var features = map.queryRenderedFeatures({ layers: ['hospitals'] });

	features.forEach(feature => {
	feature.properties.distance = turf.distance(center, feature.geometry);
	});

	var sorted = Array.prototype.slice.call(features).sort((a, b) => {
	return (a.properties.distance > b.properties.distance);
	});

	var nearest = sorted.slice(0, 10);
	var bbox = turf.bbox(turf.featureCollection(nearest));
	applyNearest(bbox, nearest);
	}

	geocoder.on('result', e => {
	center = e.result.geometry.coordinates;
	map.jumpTo({
	center: center,
	zoom: 6
	});
	map.once('idle', findNearest);
	});

	map.on('load', function () {
	map.addSource('hospital-data', {
	type: 'vector',
	url: 'mapbox://branigan.us-hospitals'
	});
	map.addLayer({
	'id': 'hospitals',
	'type': 'circle',
	'source': 'hospital-data',
	'source-layer': 'us-hospitals',
	'layout': {},
	'paint': {
	'circle-color': [
	'case',
	['!=',
	['feature-state', 'nearby'], null],
	'red',
	'cornflowerblue'
	],
	'circle-radius': 3
	}
	});
	});
	</script>

	</body>

	</html>