christineywang/Coordinates Tester

## Coordinates Tester
<!DOCTYPE html>
<html>
   <head>
      <meta charset='utf-8' />
      <title>Display a map</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.53.1/mapbox-gl.js'></script>
      <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
      <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
      <style>
         body { margin:0; padding:0; }
         html { font-family: 'Montserrat', sans-serif; }
         #map { position:absolute; top:140px; bottom:0; width:100%; }
         .input-form { height: 100%; }
         .marker {
         background-image: url('mapbox-icon.png');
         background-size: cover;
         width: 50px;
         height: 50px;
         border-radius: 50%;
         cursor: pointer;
         }
         .input-section {
         padding: 20px;
         }
         .lon-input {
         margin-left: 10px;
         }
      </style>
   </head>
   <body>
      <div class='input-section'>
         <div>
            <span class='lat-input'>Latitude: <input type='number' id='lat'></span>
            <span class='lon-input'>Longitude: <input type='number' id='lon'></span>
         </div>
         <p>Click the button to test a new user location.</p>
         <button onclick="myFunction()">Test Coordinate</button>
      </div>
      <div id='map'></div>
      <script>
         mapboxgl.accessToken = '<access_token>';
         var map = new mapboxgl.Map({
         container: 'map', // container id
         style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
         center: [-118.2437, 34.0522], // starting position [lng, lat]
         zoom: 9 // starting zoom
         });
         function myFunction() {
         var newLat = document.getElementById('lat').value;
         var newLon = document.getElementById('lon').value;
         var url = `https://api.foursquare.com/v2/venues/nearby_<partner_name>?client_id=<client_id>&client_secret=<client_secret>&v=20180922&limit=10&chainIds=<chain_ID>&ll=${newLat}%2C${newLon}`;
         var json = fetch(url, {
            method: 'POST'
         })
         .then(function(response) {
            return response.json();
         })
         .then(function(myJson) {
            console.log(JSON.stringify(myJson));
            var coordinates = myJson.response.venues[0].location.lat;
            console.log(coordinates);
            console.log(newLat, newLon);
            var newMap = new mapboxgl.Map({
                container: 'map', // container id
                style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
                center: [newLon, newLat], // starting position [lng, lat]
                zoom: 11 // starting zoom
            });

            var startingMarker = new mapboxgl.Marker()
                .setLngLat([newLon, newLat])
                .addTo(newMap);
            myJson.response.venues.map(function(marker, index) {
                var latCoor = marker.location.lat;
                var lonCoor = marker.location.lng;
                var venueNumber = index + 1;

              // make a marker for each feature and add to the map
              new mapboxgl.Popup({closeOnClick: true})
                    .setLngLat([lonCoor, latCoor])
                    .setHTML(venueNumber)
                    .addTo(newMap);
            });
         });

         }
      </script>
   </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Display a map</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.53.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	<style>
	body { margin:0; padding:0; }
	html { font-family: 'Montserrat', sans-serif; }
	#map { position:absolute; top:140px; bottom:0; width:100%; }
	.input-form { height: 100%; }
	.marker {
	background-image: url('mapbox-icon.png');
	background-size: cover;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	}
	.input-section {
	padding: 20px;
	}
	.lon-input {
	margin-left: 10px;
	}
	</style>
	</head>
	<body>
	<div class='input-section'>
	<div>
	<span class='lat-input'>Latitude: <input type='number' id='lat'></span>
	<span class='lon-input'>Longitude: <input type='number' id='lon'></span>
	</div>
	<p>Click the button to test a new user location.</p>
	<button onclick="myFunction()">Test Coordinate</button>
	</div>
	<div id='map'></div>
	<script>
	mapboxgl.accessToken = '<access_token>';
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
	center: [-118.2437, 34.0522], // starting position [lng, lat]
	zoom: 9 // starting zoom
	});
	function myFunction() {
	var newLat = document.getElementById('lat').value;
	var newLon = document.getElementById('lon').value;
	var url = `https://api.foursquare.com/v2/venues/nearby_<partner_name>?client_id=<client_id>&client_secret=<client_secret>&v=20180922&limit=10&chainIds=<chain_ID>&ll=${newLat}%2C${newLon}`;
	var json = fetch(url, {
	method: 'POST'
	})
	.then(function(response) {
	return response.json();
	})
	.then(function(myJson) {
	console.log(JSON.stringify(myJson));
	var coordinates = myJson.response.venues[0].location.lat;
	console.log(coordinates);
	console.log(newLat, newLon);
	var newMap = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
	center: [newLon, newLat], // starting position [lng, lat]
	zoom: 11 // starting zoom
	});

	var startingMarker = new mapboxgl.Marker()
	.setLngLat([newLon, newLat])
	.addTo(newMap);
	myJson.response.venues.map(function(marker, index) {
	var latCoor = marker.location.lat;
	var lonCoor = marker.location.lng;
	var venueNumber = index + 1;

	// make a marker for each feature and add to the map
	new mapboxgl.Popup({closeOnClick: true})
	.setLngLat([lonCoor, latCoor])
	.setHTML(venueNumber)
	.addTo(newMap);
	});
	});

	}
	</script>
	</body>
	</html>