{
    "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": {
                            "merge": {
                                "soureCodePorts": [
                                    "functionScript"
                                ]
                            }
                        }
                    }
                ]
            },
            "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
                }
            }
        }
    ]
}