TravelTime-Frontend/Full_radius_request.html

## Full_radius_request.html
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>

<body>
  <div id="map" style="height: 100%;"></div>
  <script>
    // Map setup
    function setupMap(center) {
      var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
      var osmTileLayer = L.tileLayer(osmUrl, { minZoom: 8, maxZoom: 15 });
      var map = L.map("map").addLayer(osmTileLayer).setView(center, 12);
      return map;
    };
    // Drawing the Radius
    function drawRadius(map, center, radiusMeters) {
      L.circle(center, radiusMeters).addTo(map);
      L.marker(center).addTo(map);
    };

    var startingLocation = "The White House, DC";
    var geocodingRequest = { "query": startingLocation };
    var authHeaders = {
      "X-Application-Id": "<your app id>",
      "X-Api-Key": "<your app key>",
      "Accept-Language": "en-US"
    };
    var radiusMiles = 10.0;
    var radiusMeters = radiusMiles * 1609.344;

    $.ajax({
      // The URL for our geocoding api
      url: "https://api.traveltimeapp.com/v4/geocoding/search",
      type: "get",
      headers: authHeaders,
      data: geocodingRequest,
      contentType: "application/json; charset=UTF-8",
      success: function (data) {
        var coords = data.features[0].geometry.coordinates;
        var latLng = L.latLng(coords[1], coords[0]);
        var map = setupMap(latLng);
        drawRadius(map, latLng, radiusMeters);
      }
    });


  </script>
  <style>
    html,
    body,
    #mapid {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    #error {
      position: absolute;
      width: 80%;
      margin: 0px;
      z-index: 2000;
      width: 270px;
      border-radius: 5px;
      max-width: 500px;
      font-family: sans-serif;
      font-size: 12px;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 10px;
      display: none;
      text-align: center;
    }
  </style>
</body>

</html>
	<html>

	<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
	integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
	integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
	</head>

	<body>
	<div id="map" style="height: 100%;"></div>
	<script>
	// Map setup
	function setupMap(center) {
	var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
	var osmTileLayer = L.tileLayer(osmUrl, { minZoom: 8, maxZoom: 15 });
	var map = L.map("map").addLayer(osmTileLayer).setView(center, 12);
	return map;
	};
	// Drawing the Radius
	function drawRadius(map, center, radiusMeters) {
	L.circle(center, radiusMeters).addTo(map);
	L.marker(center).addTo(map);
	};

	var startingLocation = "The White House, DC";
	var geocodingRequest = { "query": startingLocation };
	var authHeaders = {
	"X-Application-Id": "<your app id>",
	"X-Api-Key": "<your app key>",
	"Accept-Language": "en-US"
	};
	var radiusMiles = 10.0;
	var radiusMeters = radiusMiles * 1609.344;

	$.ajax({
	// The URL for our geocoding api
	url: "https://api.traveltimeapp.com/v4/geocoding/search",
	type: "get",
	headers: authHeaders,
	data: geocodingRequest,
	contentType: "application/json; charset=UTF-8",
	success: function (data) {
	var coords = data.features[0].geometry.coordinates;
	var latLng = L.latLng(coords[1], coords[0]);
	var map = setupMap(latLng);
	drawRadius(map, latLng, radiusMeters);
	}
	});


	</script>
	<style>
	html,
	body,
	#mapid {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	}

	#error {
	position: absolute;
	width: 80%;
	margin: 0px;
	z-index: 2000;
	width: 270px;
	border-radius: 5px;
	max-width: 500px;
	font-family: sans-serif;
	font-size: 12px;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 10px;
	display: none;
	text-align: center;
	}
	</style>
	</body>

	</html>