Skip to content

Instantly share code, notes, and snippets.

View TravelTime-Frontend's full-sized avatar

TravelTime-Frontend

View GitHub Profile
var locationName = "Tour Eiffel, Paris, France";
var APPLICATION_ID = "place your app id here";
var API_KEY = "place your api key here";
function sendGeocodingRequest(location) {
return fetch(`https://api.traveltimeapp.com/v4/geocoding/search?query=` + location, {
method: "GET",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
"X-Application-Id": APPLICATION_ID,
"X-Api-Key": API_KEY
}
function drawMarker(response) { // We need to extract the coordinates from the response.
var coordinates = response.features[0].geometry.coordinates; // The coordintaes are in a [<lng>, <lat>] format/
var latLng = L.latLng([coordinates[1], coordinates[0]]) // 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geocoding for Leaflet</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body>
<div id='map'></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE&callback=initMap" async
defer></script>
<script>
var map;
function initMap() {
var mapOpts = {
center: { lat: 51.5031653, lng: -0.1123051 },
zoom: 13,
<body>
<div id='map'></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE&callback=initMap" async
defer></script>
<script>
var map;
function initMap() {
var mapOpts = {
center: { lat: 51.5031653, lng: -0.1123051 },
zoom: 13,
<body>
<div id='map'></div>
<div id="error" class="tippy-tooltip honeybee-theme">
<p><b>No API and APPLICATION_ID key inserted </b></p>
<p><a href="http://docs.traveltimeplatform.com/overview/getting-keys/">Sign up for an API key</a>
<p>Place it in API and APPLICATION_ID variables</p>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE&callback=initMap" async defer></script>
<script>
var map;
var startingLocation = "London Waterloo Train Station";
var departureTime = new Date().toJSON();
var travelTime = 60 * 15;
var APPLICATION_ID = "place your app id here";
var API_KEY = "place your api key here";
function sendGeocodingRequest(location) {
// The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
var request = {
query: location
};
document.getElementById("error").style.display = "none";
var xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open("GET", "https://api.traveltimeapp.com/v4/geocoding/search?query=" + location)
xhr.setRequestHeader("X-Application-Id", APPLICATION_ID);
function sendTimeMapRequest(geocodingResponse) {
// The request for Time Map. Reference: http://docs.traveltimeplatform.com/reference/time-map/
var coords = geocodingResponse.features[0].geometry.coordinates;
var latLng = { lat: coords[1], lng: coords[0] };
var request = {
departure_searches: [{
id: "first_location",
coords: latLng,