mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 14:52:54 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
149
library/modules/mapbox/nodes/v2/mapbox-map.md
Normal file
149
library/modules/mapbox/nodes/v2/mapbox-map.md
Normal file
@@ -0,0 +1,149 @@
|
||||
---
|
||||
title: Mapbox Map
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Mapbox Map
|
||||
|
||||
This node adds a map to the visual tree, using [Mapbox](https://www.mapbox.com/). The map can be both interactive and static.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
#### Options
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | --------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Style</span> | A path to a [Mapbox Style](https://docs.mapbox.com/api/maps/styles/). |
|
||||
|
||||
#### Other
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | --------------------------------- |
|
||||
| <span className="ndl-data">Interactive</span> | Enable / Disable any interactions |
|
||||
| <span className="ndl-data">Anti-alias</span> | Enable anti-alias |
|
||||
|
||||
#### Coordinates
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------- | ---------------------------------- |
|
||||
| <span className="ndl-data">Longitude</span> | Sets the current active longitude. |
|
||||
| <span className="ndl-data">Latitude</span> | Sets the current active latitude. |
|
||||
| <span className="ndl-data">Zoom</span> | Sets the current active zoom. |
|
||||
| <span className="ndl-data">Bearing</span> | Sets the current active bearing. |
|
||||
|
||||
#### Geolocate
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------------- | ---------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Center on user</span> | Center the map on the user location, this only works with Geolocate enabled. |
|
||||
|
||||
#### Controls - Fullscreen
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------------- | ------------------------------ |
|
||||
| <span className="ndl-data">Enable Fullscreen</span> | Enable the fullscreen control. |
|
||||
| <span className="ndl-data">Fullscreen Position</span> | Change the control position. |
|
||||
|
||||
#### Controls - Geocoder
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | -------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Geocoder</span> | Enable the Geocoder control. |
|
||||
| <span className="ndl-data">Geocoder Position</span> | Change the control position. |
|
||||
| <span className="ndl-data">Placeholder</span> | Sets the placeholder in the search field. |
|
||||
| <span className="ndl-data">Show Marker</span> | Show a marker of the search result location. |
|
||||
|
||||
#### Controls - Geolocate
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------------ | ---------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Geolocate</span> | Enable the Geolocate control. |
|
||||
| <span className="ndl-data">Geolocate Position</span> | Change the control position. |
|
||||
| <span className="ndl-data">Show Accuracy Circle</span> | Show the accuracy circle of the user position. |
|
||||
| <span className="ndl-data">Show User Heading</span> | Show the user heading. |
|
||||
| <span className="ndl-data">Show User Location</span> | Show user location. |
|
||||
| <span className="ndl-data">Track User Location</span> | Track the user location. |
|
||||
|
||||
#### Controls - Navigation
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------------- | ----------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Navigation</span> | Enable the Navigation control. |
|
||||
| <span className="ndl-data">Navigation Position</span> | Change the control position. |
|
||||
| <span className="ndl-data">Show Compass</span> | Show the compass button in the control. |
|
||||
| <span className="ndl-data">Show Zoom</span> | Show the plus and minus buttons in the control. |
|
||||
| <span className="ndl-data">Visualize Pitch</span> | Visualize the pitch in the compass. |
|
||||
|
||||
#### Controls - Scale
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------ | ----------------------------------------- |
|
||||
| <span className="ndl-data">Enable Scale</span> | Enable the Scale control. |
|
||||
| <span className="ndl-data">Scale Position</span> | Change the control position. |
|
||||
| <span className="ndl-data">Max Width</span> | Sets the max width of the control. |
|
||||
| <span className="ndl-data">Unit</span> | Sets the unit the control should display. |
|
||||
|
||||
#### Controls - Mapbox Draw
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------------- | ------------------------------- |
|
||||
| <span className="ndl-data">Enable Mapbox Draw</span> | Enable the Mapbox Draw control. |
|
||||
| <span className="ndl-data">Mapbox Draw Position</span> | Change the control position. |
|
||||
| <span className="ndl-data">Enable Draw Keybindings</span> | Enable Keybindings. |
|
||||
| <span className="ndl-data">Enable Draw Touch</span> | Enable Touch inputs. |
|
||||
| <span className="ndl-data">Enable Draw Box Select</span> | Enable Box Select. |
|
||||
| <span className="ndl-data">Display Draw Controls</span> | Show the Mapbox Draw controls. |
|
||||
|
||||
#### Controls - Mapbox Draw - Controls
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------- | ----------------------------------- |
|
||||
| <span className="ndl-data">Points</span> | Show the point button. |
|
||||
| <span className="ndl-data">Line String</span> | Show the line string button. |
|
||||
| <span className="ndl-data">Polygon</span> | Show the polygon button. |
|
||||
| <span className="ndl-data">Trash</span> | Show the trash button. |
|
||||
| <span className="ndl-data">Combine Features</span> | Show the combine features button. |
|
||||
| <span className="ndl-data">Uncombine Features</span> | Show the uncombine features button. |
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">(Coordinates) Longitude</span> | The current active longitude. |
|
||||
| <span className="ndl-data">(Coordinates) Latitude</span> | The current active latitude. |
|
||||
| <span className="ndl-data">(Coordinates) Zoom</span> | The current zoom level of the map |
|
||||
| <span className="ndl-data">(Coordinates) Bearing</span> | The current active bearing. |
|
||||
| <span className="ndl-data">(Map Clicked) Longitude</span> | The longitude that where the user clicked last. To be used with the Click signal. |
|
||||
| <span className="ndl-data">(Map Clicked) Latitude</span> | The latitude that where the user clicked last. o be used with the Click signal. |
|
||||
| <span className="ndl-data">Width</span> | The with of the map container. |
|
||||
| <span className="ndl-data">Height</span> | The height of the map container. |
|
||||
| <span className="ndl-data">Screen Position X</span> | The amount of pixels between the left side of the window and the left side of the map container. |
|
||||
| <span className="ndl-data">Screen Position Y</span> | The amount of pixels between the top of the window and the top side of the map container. |
|
||||
| <span className="ndl-data">Mapbox Object</span> | Get the Mapbox object. |
|
||||
| <span className="ndl-data">Mapbox Draw Object</span> | Get the Mapbox Draw object. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------ | ----------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Click</span> | Sends a signal when the map is clicked. |
|
||||
| <span className="ndl-signal">Map Loaded</span> | Sends a signal when the map has finished loading, after it has been mounted in the app. |
|
||||
| <span className="ndl-signal">Map Moved</span> | Sends a signal after the map in view has been moved. |
|
||||
| <span className="ndl-signal">Did Mount</span> | Sends a signal when the map has been rendered in the app, before the map has been loaded. |
|
||||
| <span className="ndl-signal">Will Unmount</span> | Sends a signal before the map will be removed from the visual tree. |
|
||||
|
||||
</div>
|
||||
62
library/modules/mapbox/nodes/v2/mapbox-marker.md
Normal file
62
library/modules/mapbox/nodes/v2/mapbox-marker.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: Mapbox Marker
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Mapbox Marker
|
||||
|
||||
This node should be placed as a child in the Mapbox Map node, it can be used in a repeater.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------- | -------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Color</span> | Sets the color of the marker. |
|
||||
| <span className="ndl-data">z-Index</span> | Sets the z-Index of the marker. |
|
||||
| <span className="ndl-data">Draggable</span> | Make the marker draggable. |
|
||||
| <span className="ndl-data">Rotation</span> | Sets the rotation of the marker. |
|
||||
| <span className="ndl-data">Rotation Alignment</span> | Sets the rotation alignment marker. |
|
||||
| <span className="ndl-data">Pitch Alignment</span> | Sets the pitch alignment marker. |
|
||||
| <span className="ndl-data">Offset X</span> | Sets the marker x offset. |
|
||||
| <span className="ndl-data">Offset Y</span> | Sets the marker y offset. |
|
||||
| <span className="ndl-data">Longitude</span> | Sets the current active longitude. |
|
||||
| <span className="ndl-data">Latitude</span> | Sets the current active latitude. |
|
||||
| <span className="ndl-data">Tooltip</span> | Add a custom tooltip using the Mapbox tooltips, this will oonly work on the default markers. |
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Longitude</span> | The current active longitude. |
|
||||
| <span className="ndl-data">Latitude</span> | The current active latitude. |
|
||||
| <span className="ndl-data">Width</span> | The width of the marker container. |
|
||||
| <span className="ndl-data">Height</span> | The height of the marker container. |
|
||||
| <span className="ndl-data">Screen Position X</span> | The amount of pixels between the left side of the window and the left side of the map container. |
|
||||
| <span className="ndl-data">Screen Position Y</span> | The amount of pixels between the top of the window and the top side of the map container. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------ | ----------------------------------------------------- |
|
||||
| <span className="ndl-signal">Click</span> | Sends a signal when the user clicks on the marker. |
|
||||
| <span className="ndl-signal">Drag Start</span> | Sends a signal when marker is starting to be dragged. |
|
||||
| <span className="ndl-signal">Drag</span> | Sends a signal when marker is being dragged. |
|
||||
| <span className="ndl-signal">Drag End</span> | Sends a signal when marker is dragged ended. |
|
||||
| <span className="ndl-signal">Did Mount</span> | Sends a signal when the marker have been loaded. |
|
||||
| <span className="ndl-signal">Will Unmount</span> | Sends a signal when the marker is unloaded. |
|
||||
|
||||
</div>
|
||||
68
library/modules/mapbox/nodes/v2/mapbox-polygon.md
Normal file
68
library/modules/mapbox/nodes/v2/mapbox-polygon.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Mapbox Polygon
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Mapbox Polygon
|
||||
|
||||
This node should be placed as a child in the Mapbox Map node, it can be used in a repeater.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Here is the code that is inside the "Get Polygon" Function node:
|
||||
|
||||
```js
|
||||
Outputs.Coordinates = [
|
||||
[
|
||||
[-118.446802, 34.061877],
|
||||
[-118.456802, 34.061877],
|
||||
[-118.456802, 34.051877],
|
||||
[-118.446802, 34.051877],
|
||||
[-118.446802, 34.061877],
|
||||
],
|
||||
];
|
||||
```
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | ---------------------------------- |
|
||||
| <span className="ndl-data">Coordinates</span> | Sets the current coordinates. |
|
||||
| <span className="ndl-data">Enabled</span> | Enable / Disable user interaction. |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | --------------------------------------- |
|
||||
| <span className="ndl-signal">Edit</span> | Send a signal to start polygon editing. |
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------- | ------------------------------- |
|
||||
| <span className="ndl-data">Mapbox Object</span> | The mapbox object. |
|
||||
| <span className="ndl-data">Mapbox Draw Object</span> | The mapbox draw object. |
|
||||
| <span className="ndl-data">Feature Id</span> | The feature id. |
|
||||
| <span className="ndl-data">Coordinates</span> | The coordinates of the polygon. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------ | ---------------------------------------------------- |
|
||||
| <span className="ndl-signal">Updated</span> | Sends a signal when the polygon is getting updated. |
|
||||
| <span className="ndl-signal">Selected</span> | Sends a signal when the polygon is getting selected. |
|
||||
| <span className="ndl-signal">Unselected</span> | Sends a signal when the polygon is unselected. |
|
||||
| <span className="ndl-signal">Did Mount</span> | Sends a signal when the polygon is loaded. |
|
||||
| <span className="ndl-signal">Will Unmount</span> | Sends a signal when the polygon is unloaded. |
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user