durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 23:02:54 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
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
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
library/modules/mapbox/nodes/v1/mapbox-map.md Normal file
View File

@@ -0,0 +1,70 @@
---
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">
![](/library/modules/mapbox/mapbox-map.png)
</div>
Markers can be placed on the map by sending an <span className="ndl-data">array</span> of marker <span className="ndl-data">objects</span> containing `Lat`, `Lon` and `Color` to the <span className="ndl-data">Markers</span> input. `Color` can be specified as a string, (e.g. "White") or as a hex string (e.g. "#ffffff").
<div className="ndl-image-with-background l">
![](/library/modules/mapbox/marker-data.png)
</div>
<##head##>
## Inputs
| 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 zoom level of the map. |
| <span className="ndl-data">Markers</span> | An array of markers on the map. Every marker is defined as an object containing the properties `Lat`, `Lon `, and `Color`. |
| <span className="ndl-data">Type</span> | Specifies the Marker type. Can be either `Default` or `Image` |
| <span className="ndl-data">Source</span> | Specifies the source of the Marker image. Only available if the Marker is om `Image` type. |
| <span className="ndl-data">Width</span> | Specifies the width of the Marker image (in pixels). Only available if the Marker is om `Image` type. |
| <span className="ndl-data">Height</span> | Specifies the height of the Marker image (in pixels). Only available if the Marker is om `Image` type. |
| <span className="ndl-data">Anchor</span> | Specifies the the anchor point of the Marker image in relation to the location on the map. Only available if the Marker is om `Image` type. |
| <span className="ndl-data">Interactive</span> | Sets if users can interact with the map or not. |
| <span className="ndl-data">Style</span> | A path to a [Mapbox Style](https://docs.mapbox.com/api/maps/styles/). |
| Signal | Description |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Center on user</span> | Send a signal to this port to center the map to the current active latitude and longitude. |
## Outputs
| 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">Zoom</span> | The current zoom level of the map. |
| <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">Marker Id</span> | If you have clicked a marker on the map, this port will send the `Id` of the clicked marker. |
| <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. |
| Signal | Description |
| ------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Click</span> | Sends a signal when the map is clicked. |
| <span className="ndl-signal">Marker Click</span> | Sends a signal when a marker is cliked. |
| <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. |