mirror of
https://github.com/fluxscape/fluxscape.git
synced 2026-01-12 15:22:54 +01:00
b9c60b07dc
Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com> Co-Authored-By: Johan <4934465+joolsus@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>
683 lines
26 KiB
JSON
683 lines
26 KiB
JSON
{
|
|
"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
|
|
}
|
|
}
|
|
}
|
|
]
|
|
} |