Skip to content

Instantly share code, notes, and snippets.

View TravelTime-Frontend's full-sized avatar

TravelTime-Frontend

View GitHub Profile
@TravelTime-Frontend
TravelTime-Frontend / TravelTime_data_on_Mapbox_maps_Full.html
Last active February 21, 2023 08:24
Full code for how to use TravelTime data and draw Polygons on Mapbox maps
<html>
<head>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
background-color: gray;
}
@TravelTime-Frontend
TravelTime-Frontend / TravelTime_TimeMap_Intersection_On_Google_maps.html
Last active March 19, 2024 20:01
Full code for how to use TravelTime data and draw Polygons and make intersections on Google maps
<html>
<head>
<style>
body {
background-color: gray;
}
html,
body,
@TravelTime-Frontend
TravelTime-Frontend / TravelTime_TimeMap_JSON_to_GeoJSON.js
Created February 20, 2023 14:12
In this given example we use responso from TravelTime TimeMap JSON to convert it to GeoJSON that you can use it elsewhere. Code written in JavaScript. Full tutorial https://traveltime.com/blog/how-to-create-a-geojson-isochrone
function remapLinearRing(linearRing) {
return linearRing.map(c => [c['lng'], c['lat']]);
}
function shapesToMultiPolygon(shapes) {
var allRings = shapes.map(function (shape) {
var shell = remapLinearRing(shape['shell']);
var holes = shape['holes'].map(h => remapLinearRing(h));
return [shell].concat(holes);
});
@TravelTime-Frontend
TravelTime-Frontend / TravelTime_TimeMap_JSON_to_GeoJSON.py
Last active February 21, 2023 08:25
In this given example we use responso from TravelTime TimeMap JSON to convert it to GeoJSON that you can use it elsewhere. Code written in Python.
import json
def remap_linear_ring(linear_ring):
return list(map(lambda c: [c['lng'], c['lat']], linear_ring))
def shapes_to_multipolygon(shapes):
allRings = []
for shape in shapes:
@TravelTime-Frontend
TravelTime-Frontend / shapesToMultiPolygon.js
Created February 20, 2023 14:13
In this given example we use array of shapes and convert it into a MultiPolygon. JavaScript.
function shapesToMultiPolygon(shapes) {
var allRings = shapes.map(function (shape) {
// The shell of the polygon is in a separate property 'shell'.
var shell = remapLinearRing(shape['shell']);
// The 'holes' property is an array of linear rings for holes.
var holes = shape['holes'].map(h => remapLinearRing(h));
// Combine the shell and holes so that the shell is the first element in the resulting array.
return [shell].concat(holes);
});
@TravelTime-Frontend
TravelTime-Frontend / toGeoJSON.js
Created February 20, 2023 14:16
In this given example we use response of not parsed JSON and convert it to MultiPolygons and features and add them to GeoJSON . JavaScript.
function toGeojson(timeMapResponse) {
// Parses the response json. This is needed if the parameter is a raw string. You don't need this if the response has already been parsed.
var responseData = JSON.parse(timeMapResponse);
// Converts each result in the response into a MultiPolygon object.
var multiPolygons = responseData['results'].map(r => shapesToMultiPolygon(r['shapes']));
// Transforms each feature into feature object
var features = multiPolygons.map(mp => {
return {
'geometry': mp,
'type': "Feature",
@TravelTime-Frontend
TravelTime-Frontend / TravelTime_TimeMap_Heatmap_On_Google_maps.html
Last active February 21, 2023 08:25
Full code for how to use TravelTime data and draw Polygons multiple polygons on Google maps
<html>
<head>
<style>
body {
background-color: gray;
}
html,
body,
{
"coords": {
"lat": 40.750580,
"lng": -73.993584
},
"resolution": {
"height": "",
"width": ""
},
"zoom": 11,
var properties = Object.values(location.properties);
var travelTime = properties[0].travel_time;
var travelTime = parseInt(travelTime);
listItem.innerHTML = location.id + ' - ETA: ' + Math.round(travelTime / 60) + ' mins';
var properties = Object.values(location.properties);
var travelTime = properties[0].travel_time;
var travelTime = parseInt(travelTime);
listItem.innerHTML = location.id + ' - ETA: ' + Math.round(travelTime / 60) + ' mins';
createLocationList(locationsInRange);