LouisaKB

## returned.js
function displayTimes(points) {
         var container = document.getElementById("listContainer");
         var list = points.map(function (point) {
            return timedElementTemplate(point.name, secondsToHHMMSS(point.time));
         }).join("");
         container.innerHTML = list;
      }

## template.js
function timedElementTemplate(name, time) {
         return `<li class="list-group-item">Name: ${name}<br>Time: ${time}</li>`;
      }

## styles.css
<style type="text/css">
    .map-marker {
      font-size: 2em;
      top: -0.75em;
      left: -0.20em;
      position: absolute;
    }
    .red { color: red; }
    .green { color: green; }
    .blue { color: blue; }

## Boilerplate code
<html>
   <head>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
   <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></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>
 	/*

## Display map on page
function setupMap(center) {
    //Map set up
  // The url template for OpenStreetMap tiles.
  var osmUrl="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

  // Creates the tile layer
  var osmTileLayer = L.tileLayer(osmUrl, {minZoom: 8, maxZoom: 15});

  // Adds the tile layer to the map and centers the view to the provided LatLng coordinates.
  var map = L.map("map").addLayer(osmTileLayer).setView(center, 12);

## Define geocoding request
// We will be querying for the White House of the United States
var startingLocation = "The White House, DC";
// This will be the data format used for the jQuery AJAX request.
var geocodingRequest = { “query”: startingLocation };

## Authentication
var authHeaders = {
  "X-Application-Id": "<your app id>",
  "X-Api-Key": "<your app key>"
};

## Geocoding request
$.ajax({
  // The URL for our geocoding api
  url : "http://api.traveltimeapp.com/v4/geocoding/search",
  type: "get",
  headers: authHeaders,
  data: geocodingRequest,
  contentType: "application/json; charset=UTF-8",
  success: function(data) {
    // Documentation for the response format: http://docs.traveltimeplatform.com/reference/geocoding-search/
    var coords = data.features[0].geometry.coordinates;

## Draw radius
var radiusMiles = 10.0;
// Since Leaflet accepts meters we want to convert miles to meters
var radiusMeters = radiusMiles * 1609.344;

function drawRadius(map, center, radiusMeters) {
  // Creates the radius circle and displays it on the map
  L.circle(center, radiusMeters).addTo(map);
  // Marks the location from which the radius is created
  L.marker(center).addTo(map);
};

## Full radius request
<html>
   <head>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
   <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></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 displayTimes(points) {
	var container = document.getElementById("listContainer");
	var list = points.map(function (point) {
	return timedElementTemplate(point.name, secondsToHHMMSS(point.time));
	}).join("");
	container.innerHTML = list;
	}
	function timedElementTemplate(name, time) {
	return `<li class="list-group-item">Name: ${name}<br>Time: ${time}</li>`;
	}
	<style type="text/css">
	.map-marker {
	font-size: 2em;
	top: -0.75em;
	left: -0.20em;
	position: absolute;
	}
	.red { color: red; }
	.green { color: green; }
	.blue { color: blue; }
	<html>
	<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></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>
	/*
	function setupMap(center) {
	//Map set up
	// The url template for OpenStreetMap tiles.
	var osmUrl="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

	// Creates the tile layer
	var osmTileLayer = L.tileLayer(osmUrl, {minZoom: 8, maxZoom: 15});

	// Adds the tile layer to the map and centers the view to the provided LatLng coordinates.
	var map = L.map("map").addLayer(osmTileLayer).setView(center, 12);
	// We will be querying for the White House of the United States
	var startingLocation = "The White House, DC";
	// This will be the data format used for the jQuery AJAX request.
	var geocodingRequest = { “query”: startingLocation };
	var authHeaders = {
	"X-Application-Id": "<your app id>",
	"X-Api-Key": "<your app key>"
	};
	$.ajax({
	// The URL for our geocoding api
	url : "http://api.traveltimeapp.com/v4/geocoding/search",
	type: "get",
	headers: authHeaders,
	data: geocodingRequest,
	contentType: "application/json; charset=UTF-8",
	success: function(data) {
	// Documentation for the response format: http://docs.traveltimeplatform.com/reference/geocoding-search/
	var coords = data.features[0].geometry.coordinates;
	var radiusMiles = 10.0;
	// Since Leaflet accepts meters we want to convert miles to meters
	var radiusMeters = radiusMiles * 1609.344;

	function drawRadius(map, center, radiusMeters) {
	// Creates the radius circle and displays it on the map
	L.circle(center, radiusMeters).addTo(map);
	// Marks the location from which the radius is created
	L.marker(center).addTo(map);
	};