{ "name": "Mapbox_Directions_API", "components": [ { "name": "/App", "graph": { "connections": [ { "fromId": "5888a1a4-10b7-c0dd-a5c4-10a31654434c", "fromProperty": "map", "toId": "649ac2e4-0aeb-4978-7d35-8283ba0b5715", "toProperty": "in-Map" }, { "fromId": "5888a1a4-10b7-c0dd-a5c4-10a31654434c", "fromProperty": "mapLoaded", "toId": "649ac2e4-0aeb-4978-7d35-8283ba0b5715", "toProperty": "run" } ], "roots": [ { "id": "246f9453-a119-ac78-171e-3806cf596ecc", "type": "Group", "x": -111.4681915301291, "y": 311.4376377651178, "parameters": { "backgroundColor": "#FFFFFF" }, "ports": [], "dynamicports": [], "children": [ { "id": "5888a1a4-10b7-c0dd-a5c4-10a31654434c", "type": "Mapbox Map", "parameters": {}, "ports": [], "dynamicports": [], "children": [] } ] }, { "id": "649ac2e4-0aeb-4978-7d35-8283ba0b5715", "type": "JavaScriptFunction", "x": 202.53180846987084, "y": 361.4376377651178, "parameters": { "scriptInputs": [ { "id": "hajy", "label": "Map" } ], "intype-Map": "object", "functionScript": "const accessToken = Noodl.getProjectSettings().mapboxAccessToken;\r\nconst map = Inputs.Map\r\nconst start = [-122.662323, 45.523751];\r\n\r\n// create a function to make a directions request\r\nasync function getRoute(end) {\r\n // make a directions request using cycling profile\r\n // an arbitrary start will always be the same\r\n // only the end or destination will change\r\n const query = await fetch(\r\n `https://api.mapbox.com/directions/v5/mapbox/cycling/${start[0]},${start[1]};${end[0]},${end[1]}?steps=true&geometries=geojson&access_token=${accessToken}`,\r\n { method: 'GET' }\r\n );\r\n const json = await query.json();\r\n const data = json.routes[0];\r\n const route = data.geometry.coordinates;\r\n const geojson = {\r\n type: 'Feature',\r\n properties: {},\r\n geometry: {\r\n type: 'LineString',\r\n coordinates: route\r\n }\r\n };\r\n // if the route already exists on the map, we'll reset it using setData\r\n if (map.getSource('route')) {\r\n map.getSource('route').setData(geojson);\r\n }\r\n // otherwise, we'll make a new request\r\n else {\r\n map.addLayer({\r\n id: 'route',\r\n type: 'line',\r\n source: {\r\n type: 'geojson',\r\n data: geojson\r\n },\r\n layout: {\r\n 'line-join': 'round',\r\n 'line-cap': 'round'\r\n },\r\n paint: {\r\n 'line-color': '#3887be',\r\n 'line-width': 5,\r\n 'line-opacity': 0.75\r\n }\r\n });\r\n }\r\n // add turn instructions here at the end\r\n}\r\n\r\n// make an initial directions request that\r\n// starts and ends at the same location\r\ngetRoute(start);\r\n\r\n// Add starting point to the map\r\nmap.addLayer({\r\n id: 'point',\r\n type: 'circle',\r\n source: {\r\n type: 'geojson',\r\n data: {\r\n type: 'FeatureCollection',\r\n features: [\r\n {\r\n type: 'Feature',\r\n properties: {},\r\n geometry: {\r\n type: 'Point',\r\n coordinates: start\r\n }\r\n }\r\n ]\r\n }\r\n },\r\n paint: {\r\n 'circle-radius': 10,\r\n 'circle-color': '#3887be'\r\n }\r\n});\r\n // this is where the code from the next step will go\r\n\r\n\r\nmap.on('click', (event) => {\r\n const coords = Object.keys(event.lngLat).map((key) => event.lngLat[key]);\r\n const end = {\r\n type: 'FeatureCollection',\r\n features: [\r\n {\r\n type: 'Feature',\r\n properties: {},\r\n geometry: {\r\n type: 'Point',\r\n coordinates: coords\r\n }\r\n }\r\n ]\r\n };\r\n if (map.getLayer('end')) {\r\n map.getSource('end').setData(end);\r\n } else {\r\n map.addLayer({\r\n id: 'end',\r\n type: 'circle',\r\n source: {\r\n type: 'geojson',\r\n data: {\r\n type: 'FeatureCollection',\r\n features: [\r\n {\r\n type: 'Feature',\r\n properties: {},\r\n geometry: {\r\n type: 'Point',\r\n coordinates: coords\r\n }\r\n }\r\n ]\r\n }\r\n },\r\n paint: {\r\n 'circle-radius': 10,\r\n 'circle-color': '#f30'\r\n }\r\n });\r\n }\r\n getRoute(coords);\r\n});" }, "ports": [], "dynamicports": [ { "name": "intype-Map", "displayName": "Type", "editorName": "Map | Type", "plug": "input", "type": { "name": "enum", "enums": [ { "value": "string", "label": "String" }, { "value": "boolean", "label": "Boolean" }, { "value": "number", "label": "Number" }, { "value": "object", "label": "Object" }, { "value": "date", "label": "Date" }, { "value": "array", "label": "Array" }, { "value": "color", "label": "Color" } ], "allowEditOnly": true }, "default": "string", "parent": "scriptInputs", "parentItemId": "hajy", "index": 4 }, { "name": "in-Map", "displayName": "Map", "plug": "input", "type": "object", "group": "Inputs", "index": 5 } ], "children": [] } ] }, "metadata": { "canvasSize": { "width": "1039px", "height": "751px" }, "canvasPos": { "x": 0, "y": 0 } } } ], "settings": { "mapboxAccessToken": "pk.eyJ1IjoiZXJ0dXYiLCJhIjoiY2w0N2ZubWdpMDVhYTNkbzh6NTJlbm0xaCJ9.Rt2gRXVrbFeEc8aanZclSw" }, "rootNodeId": "246f9453-a119-ac78-171e-3806cf596ecc", "version": "3", "metadata": { "dbCollections": [], "styles": { "colors": { "Primary": "#5836F5", "Light Gray": "#C6C6C6", "Dark Gray": "#434B53", "Primary Dark": "#3F22B8", "Dark": "#1F1F1F", "Primary Light": "#C9BFFC" }, "text": { "Body Text": { "fontFamily": "fonts/Roboto/Roboto-Regular.ttf", "fontSize": { "value": "18", "unit": "px" }, "color": "#000000" }, "Button Label": { "fontFamily": "fonts/Roboto/Roboto-Regular.ttf", "fontSize": { "value": "16", "unit": "px" }, "color": "#000000" }, "Label Text": { "fontFamily": "fonts/Roboto/Roboto-Regular.ttf", "fontSize": { "value": "14", "unit": "px" }, "color": "#000000" } } } }, "variants": [ { "typename": "net.noodl.controls.button", "parameters": { "height": { "value": 40, "unit": "px" }, "sizeMode": "contentWidth", "backgroundColor": "Primary", "iconIconSource": { "class": "material-icons", "code": "home" }, "iconSize": { "value": 22, "unit": "px" }, "iconSpacing": { "value": 6, "unit": "px" }, "borderRadius": { "value": 4, "unit": "px" }, "textStyle": "Button Label", "paddingTop": { "value": 5, "unit": "px" }, "paddingLeft": { "value": 24, "unit": "px" }, "paddingRight": { "value": 24, "unit": "px" }, "paddingBottom": { "value": 4, "unit": "px" }, "color": "#FFFFFF", "fontFamily": "fonts/Roboto/Roboto-Medium.ttf" }, "stateParamaters": { "hover": { "backgroundColor": "Primary Dark" }, "pressed": { "backgroundColor": "Primary Light", "color": "Primary Dark" }, "disabled": { "backgroundColor": "Light Gray" } }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "hover": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "pressed": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } }, { "typename": "net.noodl.controls.radiobutton", "parameters": { "width": { "value": 24, "unit": "px" }, "height": { "value": 24, "unit": "px" }, "useLabel": true, "labeltextStyle": "Label Text", "borderWidth": { "value": 2, "unit": "px" }, "value": "0", "useIcon": false, "fillColor": "transparent", "borderColor": "#1F1F1F7F", "labelfontSize": { "value": 16, "unit": "px" } }, "stateParamaters": { "checked": { "fillColor": "Primary", "borderColor": "Primary", "borderWidth": { "value": 2, "unit": "px" }, "backgroundColor": "#FFFFFF", "width": { "value": 24, "unit": "px" }, "height": { "value": 24, "unit": "px" } }, "hover": { "backgroundColor": "transparent", "borderColor": "Primary", "width": { "value": 24, "unit": "px" }, "height": { "value": 24, "unit": "px" } } }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "hover": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "checked": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } }, { "typename": "Text", "parameters": { "textStyle": "Body Text" }, "stateParamaters": {}, "stateTransitions": {} }, { "typename": "net.noodl.controls.range", "parameters": { "thumbColor": "Primary", "thumbBorderRadius": { "value": 100, "unit": "%" }, "trackHeight": { "value": 4, "unit": "px" }, "trackActiveColor": "Primary", "trackColor": "Primary Light", "width": { "value": 100, "unit": "%" } }, "stateParamaters": {}, "stateTransitions": {} }, { "typename": "net.noodl.controls.checkbox", "parameters": { "width": { "value": 24, "unit": "px" }, "height": { "value": 24, "unit": "px" }, "useIcon": false, "borderWidth": { "value": 2, "unit": "px" }, "useLabel": true, "labeltextStyle": "Label Text", "borderRadius": { "value": 2, "unit": "px" }, "borderColor": "#0000007F", "labelfontSize": { "value": 16, "unit": "px" }, "labelcolor": "Dark" }, "stateParamaters": { "checked": { "useIcon": true, "iconIconSource": { "class": "material-icons", "code": "check" }, "backgroundColor": "Primary", "borderColor": "Primary", "iconSize": { "value": 16, "unit": "px" } }, "disabled": { "opacity": 0.5 }, "hover": { "borderColor": "Primary" }, "pressed": {} }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "hover": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "checked": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } }, { "typename": "net.noodl.controls.textinput", "parameters": { "useLabel": true, "sizeMode": "explicit", "height": { "value": 40, "unit": "px" }, "textStyle": "Body Text", "borderStyle": "solid", "borderRadius": { "value": 4, "unit": "px" }, "borderWidth": { "value": 2, "unit": "px" }, "borderColor": "#1F1F1F7F", "labeltextStyle": "Label Text", "paddingLeft": { "value": 8, "unit": "px" }, "paddingRight": { "value": 8, "unit": "px" }, "labelSpacing": { "value": 4, "unit": "px" }, "placeholder": "Type here", "labelcolor": "#1F1F1F7F", "labeltextTransform": "uppercase", "labelfontSize": { "value": 12, "unit": "px" }, "labelfontFamily": "fonts/Roboto/Roboto-Medium.ttf" }, "stateParamaters": { "hover": { "labelcolor": "#000000", "borderColor": "Dark", "borderStyle": "solid" }, "focused": { "borderColor": "Primary", "labelcolor": "Primary", "borderWidth": { "value": 2, "unit": "px" }, "boxShadowEnabled": false, "boxShadowColor": "Primary", "borderStyle": "solid" }, "disabled": { "labelcolor": "Light Gray", "backgroundColor": "Light Gray", "borderWidth": { "value": 1, "unit": "px" }, "borderColor": "Light Gray" } }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "focused": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } }, { "typename": "net.noodl.controls.options", "parameters": { "sizeMode": "explicit", "height": { "value": 40, "unit": "px" }, "borderWidth": { "value": 2, "unit": "px" }, "borderRadius": { "value": 4, "unit": "px" }, "borderColor": "#1F1F1F7F", "boxShadowColor": "Dark Gray", "useIcon": true, "iconIconSource": { "class": "material-icons", "code": "expand_more" }, "iconPlacement": "right", "iconSize": { "value": 24, "unit": "px" }, "paddingRight": { "value": 8, "unit": "px" }, "textStyle": "Body Text", "paddingLeft": { "value": 8, "unit": "px" }, "marginTop": { "value": 24, "unit": "px" }, "width": { "value": 75, "unit": "%" }, "iconColor": "#1F1F1F7F" }, "stateParamaters": { "hover": { "borderColor": "Dark", "borderRadius": { "value": 4, "unit": "px" }, "iconColor": "Dark", "iconSize": { "value": 24, "unit": "px" }, "iconPlacement": "right" }, "focused": { "borderColor": "Primary", "boxShadowColor": "Primary", "borderRadius": { "value": 4, "unit": "px" }, "useIcon": true, "iconColor": "Primary", "iconIconSource": { "class": "material-icons", "code": "keyboard_arrow_up" }, "iconSize": { "value": 24, "unit": "px" }, "iconPlacement": "right" }, "pressed": { "borderRadius": { "value": 4, "unit": "px" } } }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "focused": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } } ] }