Last active
February 21, 2023 08:51
-
-
Save TravelTime-Frontend/c5432043d3f8e8f614c215826878a63a to your computer and use it in GitHub Desktop.
Calculate Polygon Area
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<style> | |
body { | |
background-color: gray; | |
} | |
html, | |
body, | |
#map { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE&libraries=geometry&callback=initMap" async | |
defer></script> | |
<script> | |
var map; | |
function initMap() { | |
var mapOpts = { | |
center: { lat: 51.5031653, lng: -0.1123051 }, | |
zoom: 13, | |
}; | |
map = new google.maps.Map(document.getElementById('map'), mapOpts); | |
var marker0 = new google.maps.Marker({ | |
position: { lat: 51.5031653, lng: -0.1123051 }, | |
map: map, | |
title: 'London Waterloo train station', | |
animation: google.maps.Animation.DROP | |
}); | |
if (!google.maps.Polygon.prototype.getBounds) { | |
google.maps.Polygon.prototype.getBounds = function () { | |
var bounds = new google.maps.LatLngBounds(); | |
var paths = this.getPaths(); | |
var path; | |
for (var i = 0; i < paths.getLength(); i++) { | |
path = paths.getAt(i); | |
for (var ii = 0; ii < path.getLength(); ii++) { | |
bounds.extend(path.getAt(ii)); | |
} | |
} | |
return bounds; | |
} | |
} | |
sendGeocodingRequest(startingLocation); | |
} | |
// The name of the starting location. We will have to geocode this to coordinates. | |
var startingLocation = "London"; | |
// The departure time in an ISO format. | |
var departureTime = new Date().toJSON(); | |
// Travel time in seconds. We want 15 minutes travel time so it is 15 minutes x 60 seconds. | |
var travelTime = 60 * 15; | |
// These secret variables are needed to authenticate the request. Get them from http://docs.traveltimeplatform.com/overview/getting-keys/ and replace | |
var YOUR_APP_ID = "YOUR_APP_ID"; | |
var YOUR_APP_KEY = "YOUR_APP_KEY"; | |
// Sends the geocoding request. | |
function sendGeocodingRequest(location) { | |
// The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/ | |
var request = { | |
query: location | |
}; | |
var xhr = new XMLHttpRequest(); | |
xhr.responseType = "json"; | |
xhr.open("GET", "https://api.traveltimeapp.com/v4/geocoding/search?query=" + location) | |
xhr.setRequestHeader("X-Application-Id", YOUR_APP_ID); | |
xhr.setRequestHeader("X-Api-Key", YOUR_APP_KEY); | |
xhr.setRequestHeader("Accept-Language", " en-US"); | |
xhr.onreadystatechange = function () { | |
if (xhr.status >= 200 && xhr.status < 300) { | |
if (xhr.readyState === 4) { | |
sendTimeMapRequest(xhr.response) | |
} | |
} else { | |
console.error("Check your login") | |
} | |
}; | |
xhr.send(); | |
}; | |
// Sends the request of the Time Map multipolygon. | |
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, | |
transportation: { | |
type: "public_transport" | |
}, | |
departure_time: departureTime, | |
travel_time: travelTime | |
}], | |
arrival_searches: [] | |
}; | |
var xhr = new XMLHttpRequest() | |
xhr.addEventListener("readystatechange", function () { | |
if (this.readyState === 4) { | |
drawTimeMap(this.response); | |
} | |
}); | |
xhr.open("POST", "https://api.traveltimeapp.com/v4/time-map") | |
xhr.setRequestHeader("X-Application-Id", YOUR_APP_ID); | |
xhr.setRequestHeader("X-Api-Key", YOUR_APP_KEY); | |
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); | |
xhr.responseType = "json"; | |
xhr.send(JSON.stringify(request)); | |
// Draws the resulting multipolygon from the response on the map. | |
function drawTimeMap(response) { | |
// Reference for the response: http://docs.traveltimeplatform.com/reference/time-map/#response-body-json-attributes | |
var paths = response.results[0].shapes.map(function (polygon) { | |
var shell = polygon.shell | |
var holes = polygon.holes | |
return [shell].concat(holes); | |
}).map(x => x[0]); | |
var polygon = new google.maps.Polygon({ | |
paths, | |
strokeColor: "#F5A623", | |
strokeOpacity: 1, | |
strokeWeight: 5, | |
fillColor: "#46461F", | |
fillOpacity: 0.25 | |
}); | |
polygon.setMap(map); | |
map.fitBounds(polygon.getBounds()) | |
var computedArea = google.maps.geometry.spherical.computeArea(polygon.getPath()) | |
console.log('The area size is ' + computedArea.toFixed(1)); | |
}; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment