samgehret/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a geocoder</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.50.0/mapbox-gl.js'></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqZWExcDdwNTAxYnEyeG1tZnQ4MTNsODkifQ.68r_UjBeRkubf5eUs4uw-g';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-79.4512, 43.6568],
    zoom: 13
});

var geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
});

map.addControl(geocoder);

geocoder.on('result', function(ev) {
        // Try console logging the ev variable to see the entire resposne from the geocoder.
        // console.log(ev.result.center[0]);
        // console.log(ev.result.center[1]);

        //Use our tile query api to take the lat/long response from geocoder and retrieve information about the polygon
        axios.get(`https://api.mapbox.com/v4/samgehret.8x4l49xj/tilequery/${ev.result.center[0]},${ev.result.center[1]}.json?limit=5&access_token=pk.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqZWExcDdwNTAxYnEyeG1tZnQ4MTNsODkifQ.68r_UjBeRkubf5eUs4uw-g`)
            .then(response => {
                //log the response from the tile query api.
                //Your coverage area identifier should be an attribute of the polygon within the shape file.
                console.log(response.data.features[0].properties)
            })
    });
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Add a geocoder</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.50.0/mapbox-gl.js'></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
	<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
	<div id='map'></div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqZWExcDdwNTAxYnEyeG1tZnQ4MTNsODkifQ.68r_UjBeRkubf5eUs4uw-g';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v9',
	center: [-79.4512, 43.6568],
	zoom: 13
	});

	var geocoder = new MapboxGeocoder({
	accessToken: mapboxgl.accessToken
	});

	map.addControl(geocoder);

	geocoder.on('result', function(ev) {
	// Try console logging the ev variable to see the entire resposne from the geocoder.
	// console.log(ev.result.center[0]);
	// console.log(ev.result.center[1]);

	//Use our tile query api to take the lat/long response from geocoder and retrieve information about the polygon
	axios.get(`https://api.mapbox.com/v4/samgehret.8x4l49xj/tilequery/${ev.result.center[0]},${ev.result.center[1]}.json?limit=5&access_token=pk.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqZWExcDdwNTAxYnEyeG1tZnQ4MTNsODkifQ.68r_UjBeRkubf5eUs4uw-g`)
	.then(response => {
	//log the response from the tile query api.
	//Your coverage area identifier should be an attribute of the polygon within the shape file.
	console.log(response.data.features[0].properties)
	})
	});
	</script>

	</body>
	</html>