diff --git a/docs/sources/visualizations/geomap.md b/docs/sources/visualizations/geomap/_index.md similarity index 55% rename from docs/sources/visualizations/geomap.md rename to docs/sources/visualizations/geomap/_index.md index 5793862ade2..3b7cc61aad0 100644 --- a/docs/sources/visualizations/geomap.md +++ b/docs/sources/visualizations/geomap/_index.md @@ -32,17 +32,23 @@ The initial view configures how the GeoMap panel renders when the panel is first - **Longitude** (available when the **View** mode is _Coordinates_) - **Zoom** sets the initial zoom level for the GeoMap panel, or the initial maximum zoom level in case the _Fit data layers_ view is selected. -## Data layer +## Map layers -The Geomap visualization supports multiple Data Layers. Each data layer determines how you visualize geospatial data on top of the base map. +The Geomap visualization supports showing multiple layers. Each layer determines how you visualize geospatial data on top of the base map. -### Layer Types +### Types -There are four-layer types to choose from in the Geomap visualization. +There are three map layer types to choose from in the Geomap visualization. -- **Marker** renders a marker at each data point. -- **Heatmap** visualizes a heatmap of the data. -- **GeoJSON** renders static data from a geojson file. +- [Markers]({{< relref "markers/" >}}) renders static data from a GeoJSON file. +- [Heatmap]({{< relref "heatmap/" >}}) visualizes a heatmap of the data. +- [GeoJSON]({{< relref "geojson/" >}}) renders a marker at each data point.

+- [Night / Day (alpha)]({{< relref "daynight/" >}}) renders a night / day region. +- **Icon at last point (alpha)** renders an icon at the last data point. +- **Dynamic GeoJSON (alpha)** styles a GeoJSON file based on query results. +- **Route (alpha)** render data points as a route. + +> **Note:** [Basemap layer types]({{< relref "#types-1" >}}) can also be added as layers. You can specify an opacity. ### Layer Controls @@ -66,60 +72,30 @@ The Geomap panel needs a source of geographical data. This data comes from a dat - longitude: “longitude”, “lng”, “lon” - lookup: “lookup” - **Coords** specifies that your query holds coordinate data. You will get prompted to select numeric data fields for latitude and longitude from your database query. -- **Geohash** specifies that your query holds geohash data. You will get prompted to select a string data field for the geohash from your database query. -- **Lookup** specifies that your query holds location name data that needs to be mapped to a value. You will get prompted to select the lookup field from your database query and a gazetteer. The gazetteer is the directory that is used to map your queried data to a geographical point. - -### Markers layer - -The markers layer allows you to display data points as different marker shapes such as circles, squares, triangles, stars, and more. - -![Markers Layer](/static/img/docs/geomap-panel/geomap-markers-8-1-0.png) - -![Markers Layer Options](/static/img/docs/geomap-panel/geomap-markers-options-8-1-0.png) - -- **Marker Color** configures the color of the marker. The default `Single color` keeps all points a single color. There is an alternate option to have multiple colors depending on the data point values and the threshold set at the `Thresholds` section. -- **Marker Size** configures the size of the marker. Default is `Fixed size`, making all marker size the same regardless of the data points. However, there is also an option to scale the circles to the corresponding data points. `Min` and `Max` marker size has to be set such that the Marker layer can scale within this range. -- **Marker Shape** allows you to choose the shape, icon, or graphic to aid in providing additional visual context to your data. Choose from assets that are included with Grafana such as simple shapes or the Unicon library. You can also specify a URL containing an image asset. The image must be a scalable vector graphic (SVG). -- **Fill opacity** configures the transparency of each marker. - -### Heatmap layer - -The heatmap layer clusters various data points to visualize locations with different densities. -To add a heatmap layer: - -Click on the drop-down menu under Data Layer and choose `Heatmap`. - -Similar to `Markers`, you are prompted with various options to determine which data points to visualize and how. - -![Heatmap Layer](/static/img/docs/geomap-panel/geomap-heatmap-8-1-0.png) +- **Geohash** specifies that your query holds geohash data. You will be prompted to select a string data field for the geohash from your database query. +- **Lookup** specifies that your query holds location name data that needs to be mapped to a value. You will be prompted to select the lookup field from your database query and a gazetteer. The gazetteer is the directory that is used to map your queried data to a geographical point. -![Heatmap Layer Options](/static/img/docs/geomap-panel/geomap-heatmap-options-8-1-0.png) +## Basemap layer -- **Weight values** configure the intensity of the heatmap clusters. `Fixed value` keeps a constant weight value throughout all data points. This value should be in the range of 0~1. Similar to Markers, there is an alternate option in the drop-down to automatically scale the weight values depending on data values. -- **Radius** configures the size of the heatmap clusters. -- **Blur** configures the amount of blur on each cluster. +A basemap layer provides the visual foundation for a mapping application. It typically contains data with global coverage. Several base layer options +are available each with specific configuration options to style the base map. -### GeoJSON layer +### Types -The GeoJSON layer allows you to select and load a static GeoJSON file from the filesystem. +There are four basemap layer types to choose from in the Geomap visualization. -- **GeoJSON URL** provides a choice of GeoJSON files that ship with Grafana. -- **Default Style** controls which styles to apply when no rules above match. - - **Color** configures the color of the default style - - **Opacity** configures the default opacity -- **Style Rules** apply styles based on feature properties - - **Rule** allows you to select a _feature_, _condition_, and _value_ from the GeoJSON file in order to define a rule. The trash bin icon can be used to delete the current rule. - - **Color** configures the color of the style for the current rule - - **Opacity** configures the transparency level for the current rule -- **Add style rule** creates additional style rules. +- [Open Street Map]({{< relref "osm/" >}}) adds a map from a collaborative free geographic world database. +- [CARTO]({{< relref "carto/" >}}) adds a layer from CARTO Raster basemaps. +- [ArcGIS]({{< relref "arcgis/" >}}) adds a layer from an ESRI ArcGIS MapServer. +- [XYZ]({{< relref "xyz/" >}}) adds a map from a generic tile layer. -## Base layer +### Default -The base layer loads in a blank world map from the tile server to the Grafana panel. Several base layer options are available each with specific configuration options to style the base map. The default base layer is CartoDB base map. Custom default base layers can be defined in the `.ini` configuration file. +The default base layer uses the [CARTO]({{< relref "carto/" >}}) map. You can define custom default base layers in the `.ini` configuration file. -![Base layer options](/static/img/docs/geomap-panel/geomap-baselayer-8-1-0.png) +![Basemap layer options](/static/img/docs/geomap-panel/geomap-baselayer-8-1-0.png) -### Configure the default base layer with provisioning +#### Configure the default base layer with provisioning You can configure the default base map using config files with Grafana’s provisioning system. For more information on all the settings, refer to the [provisioning docs page]({{< relref "../administration/provisioning/" >}}). diff --git a/docs/sources/visualizations/geomap/arcgis.md b/docs/sources/visualizations/geomap/arcgis.md new file mode 100644 index 00000000000..8ddf6efa46d --- /dev/null +++ b/docs/sources/visualizations/geomap/arcgis.md @@ -0,0 +1,44 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/geomap/arcgis/ + - /docs/grafana/latest/panels/visualizations/geomap/arcgis/ +description: ArcGIS layer +keywords: + - grafana + - Geomap + - panel + - documentation +title: ArcGIS layer +weight: 400 +--- + +# ArcGIS layer + +An ArcGIS layer is a layer from an ESRI ArcGIS MapServer. + +## Options + +- **Server Instance** to select the map type. + - World Street Map + {{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-wsm-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS World Street Map" >}} + - World Imagery + {{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-wi-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS World Imagery" >}} + - World Physical + {{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-wp-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS World Physical" >}} + - Topographic + {{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-topographic-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS Topographic" >}} + - USA Topographic + {{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-usa-topographic-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS USA Topographic" >}} + - World Ocean + {{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-ocean-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS World Ocean" >}} + - Custom MapServer (see [XYZ]({{< relref "xyz/" >}}) for formatting) + - URL template + - Attribution +- **Opacity** from 0 (transparent) to 1 (opaque) + + {{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-options-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS options" >}} + +## More Information + +- [**ArcGIS Services**](https://services.arcgisonline.com/arcgis/rest/services) +- [**About ESRI**](https://www.esri.com/en-us/about/about-esri/overview) diff --git a/docs/sources/visualizations/geomap/carto.md b/docs/sources/visualizations/geomap/carto.md new file mode 100644 index 00000000000..4b41ebf343c --- /dev/null +++ b/docs/sources/visualizations/geomap/carto.md @@ -0,0 +1,34 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/geomap/carto/ + - /docs/grafana/latest/panels/visualizations/geomap/carto/ +description: CARTO layer +keywords: + - grafana + - Geomap + - panel + - documentation +title: CARTO layer +weight: 400 +--- + +# CARTO layer + +A CARTO layer is from CARTO Raster basemaps. + +## Options + +- **Theme** + - Auto + - Light + {{< figure src="/static/img/docs/geomap-panel/geomap-carto-light-9-1-0.png" max-width="1200px" caption="Geomap panel CARTO light example" >}} + - Dark + {{< figure src="/static/img/docs/geomap-panel/geomap-carto-dark-9-1-0.png" max-width="1200px" caption="Geomap panel CARTO dark example" >}} +- **Show labels** shows the Country details on top of the map. +- **Opacity** from 0 (transparent) to 1 (opaque) + +{{< figure src="/static/img/docs/geomap-panel/geomap-carto-options-9-1-0.png" max-width="1200px" caption="Geomap panel CARTO options" >}} + +## More Information + +- [**About CARTO**](https://carto.com/about-us/) diff --git a/docs/sources/visualizations/geomap/controls.md b/docs/sources/visualizations/geomap/controls.md new file mode 100644 index 00000000000..07a5bad4f75 --- /dev/null +++ b/docs/sources/visualizations/geomap/controls.md @@ -0,0 +1,96 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/geomap/controls/ + - /docs/grafana/latest/panels/visualizations/geomap/controls/ +description: Map Controls +keywords: + - grafana + - Geomap + - panel + - documentation +title: Map controls +weight: 500 +--- + +# Map Controls + +The map controls section contains various options for map information and tool overlays. +{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-9-1-0.png" max-width="1200px" caption="Geomap panel map controls" >}} + +## Zoom + +This section describes each of the zoom controls. + +### Show zoom control + +Displays zoom controls in the upper left corner. This control can be useful when using systems that don't have a mouse. + +{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-zoom-9-1-0.png" max-width="1200px" caption="Geomap panel zoom" >}} + +### Mouse wheel zoom + +Enables the mouse wheel to be used for zooming in or out. + +## Show attribution + +Displays attribution for basemap layers. + +{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-attribution-9-1-0.png" max-width="1200px" caption="Geomap panel attribution" >}} + +## Show scale + +Displays scale information in the bottom left corner. + +{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-scale-9-1-0.png" max-width="1200px" caption="Geomap panel scale" >}} + +> **Note:** Currently only displays units in [m]/[km]. + +## Show measure tools + +Displays measure tools in the upper right corner. Measurements appear only when this control is open. + +{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-measure-9-1-0.png" max-width="1200px" caption="Geomap panel measure" >}} + +- **Click** to start measuring +- **Continue clicking** to continue measurement +- **Double-click** to end measurement + +> **Note:**
- When you change measurement type or units, the previous measurement is removed from the map.
- If the control is closed and then re-opened, the most recent measurement is displayed.
- A measurement can be modified by clicking and dragging on it. + +### Length + +Get the spherical length of a geometry. This length is the sum of the great circle distances between coordinates. For multi-part geometries, the length is the sum of the length of each part. Geometries are assumed to be in 'EPSG:3857'. + +- **Metric (m/km)** +- **Feet (ft)** +- **Miles (mi)** +- **Nautical miles (nmi)** + +{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-measure-length-9-1-0.png" max-width="1200px" caption="Geomap panel measure length" >}} + +### Area + +Get the spherical area of a geometry. This area is calculated assuming that polygon edges are segments of great circles on a sphere. Geometries are assumed to be in 'EPSG:3857'. + +- **Square Meters (m²)** +- **Square Kilometers (km²)** +- **Square Feet (ft²)** +- **Square Miles (mi²)** +- **Acres (acre)** +- **Hectare (ha)** + +{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-measure-area-9-1-0.png" max-width="1200px" caption="Geomap panel measure area" >}} + +## Show debug + +Displays debug information in the upper right corner. This can be useful for debugging or validating a data source. + +- **Zoom** displays current zoom level of the map. +- **Center** displays the current **longitude**, **latitude** of the map center. + +{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-debug-9-1-0.png" max-width="1200px" caption="Geomap panel debug" >}} + +## Tooltip + +- **None** displays tooltips only when a data point is clicked. +- **Details** displays tooltips when a mouse pointer hovers over a data point. diff --git a/docs/sources/visualizations/geomap/daynight.md b/docs/sources/visualizations/geomap/daynight.md new file mode 100644 index 00000000000..de812007e13 --- /dev/null +++ b/docs/sources/visualizations/geomap/daynight.md @@ -0,0 +1,32 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/geomap/daynight/ + - /docs/grafana/latest/panels/visualizations/geomap/daynight/ +description: Night / Day layer +keywords: + - grafana + - Geomap + - panel + - documentation +title: Night / Day layer +weight: 400 +--- + +# Night / Day layer + +The Night / Day layer displays night and day regions based on the current time range. + +{{< figure src="/static/img/docs/geomap-panel/geomap-day-night-9-1-0.png" max-width="1200px" caption="Geomap panel Night / Day" >}} + +## Options + +- **Show** toggles time source from panel time range +- **Night region color** picks color for night region +- **Display sun** toggles sun icon +- **Opacity** from 0 (transparent) to 1 (opaque) + +{{< figure src="/static/img/docs/geomap-panel/geomap-day-night-options-9-1-0.png" max-width="1200px" caption="Geomap panel Night / Day options" >}} + +## More information + +- [**Extensions for OpenLayers - DayNight**](https://viglino.github.io/ol-ext/examples/layer/map.daynight.html) diff --git a/docs/sources/visualizations/geomap/geojson.md b/docs/sources/visualizations/geomap/geojson.md new file mode 100644 index 00000000000..35fb8109b6d --- /dev/null +++ b/docs/sources/visualizations/geomap/geojson.md @@ -0,0 +1,27 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/geomap/geojson/ + - /docs/grafana/latest/panels/visualizations/geomap/geojson/ +description: GeoJSON layer +keywords: + - grafana + - Geomap + - panel + - documentation +title: GeoJSON layer +weight: 400 +--- + +# GeoJSON layer + +The GeoJSON layer allows you to select and load a static GeoJSON file from the filesystem. + +- **GeoJSON URL** provides a choice of GeoJSON files that ship with Grafana. +- **Default Style** controls which styles to apply when no rules above match. + - **Color** configures the color of the default style + - **Opacity** configures the default opacity +- **Style Rules** apply styles based on feature properties + - **Rule** allows you to select a _feature_, _condition_, and _value_ from the GeoJSON file in order to define a rule. The trash bin icon can be used to delete the current rule. + - **Color** configures the color of the style for the current rule + - **Opacity** configures the transparency level for the current rule +- **Add style rule** creates additional style rules. diff --git a/docs/sources/visualizations/geomap/heatmap.md b/docs/sources/visualizations/geomap/heatmap.md new file mode 100644 index 00000000000..c6ef88f5c43 --- /dev/null +++ b/docs/sources/visualizations/geomap/heatmap.md @@ -0,0 +1,30 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/geomap/heatmap/ + - /docs/grafana/latest/panels/visualizations/geomap/heatmap/ +description: Heatmap layer +keywords: + - grafana + - Geomap + - panel + - documentation +title: Heatmap layer +weight: 500 +--- + +# Heatmap layer + +The heatmap layer clusters various data points to visualize locations with different densities. +To add a heatmap layer: + +Click on the drop-down menu under Data Layer and choose `Heatmap`. + +Similar to `Markers`, you are prompted with various options to determine which data points to visualize and how you want to visualize them. + +![Heatmap Layer](/static/img/docs/geomap-panel/geomap-heatmap-8-1-0.png) + +![Heatmap Layer Options](/static/img/docs/geomap-panel/geomap-heatmap-options-8-1-0.png) + +- **Weight values** configure the intensity of the heatmap clusters. `Fixed value` keeps a constant weight value throughout all data points. This value should be in the range of 0~1. Similar to Markers, there is an alternate option in the drop-down to automatically scale the weight values depending on data values. +- **Radius** configures the size of the heatmap clusters. +- **Blur** configures the amount of blur on each cluster. diff --git a/docs/sources/visualizations/geomap/markers.md b/docs/sources/visualizations/geomap/markers.md new file mode 100644 index 00000000000..ad0631ccc45 --- /dev/null +++ b/docs/sources/visualizations/geomap/markers.md @@ -0,0 +1,26 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/geomap/markers/ + - /docs/grafana/latest/panels/visualizations/geomap/markers/ +description: Markers layer +keywords: + - grafana + - Geomap + - panel + - documentation +title: Markers layer +weight: 600 +--- + +# Markers layer + +The markers layer allows you to display data points as different marker shapes such as circles, squares, triangles, stars, and more. + +![Markers Layer](/static/img/docs/geomap-panel/geomap-markers-8-1-0.png) + +![Markers Layer Options](/static/img/docs/geomap-panel/geomap-markers-options-8-1-0.png) + +- **Marker Color** configures the color of the marker. The default `Single color` keeps all points a single color. There is an alternate option to have multiple colors depending on the data point values and the threshold set at the `Thresholds` section. +- **Marker Size** configures the size of the marker. The default is `Fixed size`, which makes all marker sizes the same regardless of the data points. However, there is also an option to scale the circles to the corresponding data points. `Min` and `Max` marker size has to be set such that the Marker layer can scale within this range. +- **Marker Shape** allows you to choose the shape, icon, or graphic to aid in providing additional visual context to your data. Choose from assets that are included with Grafana such as simple shapes or the Unicon library. You can also specify a URL containing an image asset. The image must be a scalable vector graphic (SVG). +- **Fill opacity** configures the transparency of each marker. diff --git a/docs/sources/visualizations/geomap/osm.md b/docs/sources/visualizations/geomap/osm.md new file mode 100644 index 00000000000..e0eee8e72be --- /dev/null +++ b/docs/sources/visualizations/geomap/osm.md @@ -0,0 +1,29 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/geomap/osm/ + - /docs/grafana/latest/panels/visualizations/geomap/osm/ +description: Open street map layer +keywords: + - grafana + - Geomap + - panel + - documentation +title: Open street map layer +weight: 400 +--- + +# Open Street Map layer + +A map from a collaborative free geographic world database. + +{{< figure src="/static/img/docs/geomap-panel/geomap-osm-9-1-0.png" max-width="1200px" caption="Geomap panel Open Street Map" >}} + +## Options + +- **Opacity** from 0 (transparent) to 1 (opaque) + +{{< figure src="/static/img/docs/geomap-panel/geomap-osm-options-9-1-0.png" max-width="1200px" caption="Geomap panel Open Street Map options" >}} + +## More Information + +- [**About Open Street Map**](https://www.openstreetmap.org/about) diff --git a/docs/sources/visualizations/geomap/xyz.md b/docs/sources/visualizations/geomap/xyz.md new file mode 100644 index 00000000000..6104f612ae3 --- /dev/null +++ b/docs/sources/visualizations/geomap/xyz.md @@ -0,0 +1,35 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/geomap/zyx/ + - /docs/grafana/latest/panels/visualizations/geomap/zyx/ +description: ArcGIS layer +keywords: + - grafana + - Geomap + - panel + - documentation +title: XYZ tile layer +weight: 400 +--- + +# XYZ tile layer + +The XYZ tile layer is a map from a generic tile layer. + +{{< figure src="/static/img/docs/geomap-panel/geomap-xyz-9-1-0.png" max-width="1200px" caption="Geomap panel xyz example" >}} + +## Options + +- **URL template** + + > **Note:** Set a valid tile server url, with {z}/{x}/{y} for example: https://tile.openstreetmap.org/{z}/{x}/{y}.png + +- **Attribution** sets the reference string for the layer if displayed in [map controls]({{< relref "controls/#show-attribution" >}}) +- **Opacity** from 0 (transparent) to 1 (opaque) + +{{< figure src="/static/img/docs/geomap-panel/geomap-xyz-options-9-1-0.png" max-width="1200px" caption="Geomap panel xyz options" >}} + +## More information + +- [**Tiled Web Map Wikipedia**](https://en.wikipedia.org/wiki/Tiled_web_map) +- [**List of Open Street Map Tile Servers**](https://wiki.openstreetmap.org/wiki/Tile_servers)