Geomap: Add a MapLibre style base layer (#109841)

* GeoMap: Add maplibre style basemap

* Docs: Add maplibre GeoMap base map

* GeoMap: Add test dashboard to devenv

* Add support for opacity

* Simplify layer name and description

* Add no repeat support

* Update docs/sources/panels-visualizations/visualizations/geomap/index.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Update docs/sources/panels-visualizations/visualizations/geomap/index.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Update docs/sources/panels-visualizations/visualizations/geomap/index.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Update docs/sources/panels-visualizations/visualizations/geomap/index.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Update docs/sources/panels-visualizations/visualizations/geomap/index.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Update docs/sources/panels-visualizations/visualizations/geomap/index.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Update docs/sources/panels-visualizations/visualizations/geomap/index.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Fix vale issues

* Move to consistent async await approach

* Increment ol-ext

* Remove mapbox temporarily

* Add mapbox back

* Add access token url to docs

* Highlight access token as public

* Make capitalization consistent

* Update yarn lock

* Grab yarn lock from main

* Add missing line to yarn lock

* Fix last line again

* Remove gdev dashboard for now

---------

Co-authored-by: Remo Geissbühler <37411349+remogeissbuehler@users.noreply.github.com>
Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
This commit is contained in:
Drew Slobodnjak
2025-10-30 17:56:30 -07:00
committed by GitHub
co-authored by Isabel Matwawana Remo Geissbühler
parent 3965761168
commit f61578a50f
3 changed files with 164 additions and 3 deletions
@@ -212,7 +212,7 @@ You can add multiple layers of data to a single geomap in order to create rich,
#### Layer type
There are seven map layer types to choose from in a geomap.
There are eight map layer types to choose from in a geomap.
- [Markers](#markers-layer) renders a marker at each data point.
- [Heatmap](#heatmap-layer) visualizes a heatmap of the data.
@@ -225,6 +225,7 @@ There are seven map layer types to choose from in a geomap.
- [CARTO basemap](#carto-basemap-layer) adds a layer from CARTO Raster basemaps.
- [ArcGIS MapServer](#arcgis-mapserver-layer) adds a layer from an ESRI ArcGIS MapServer.
- [XYZ Tile layer](#xyz-tile-layer) adds a map from a generic tile layer.
- [MapLibre Style layer](#maplibre-style-layer) adds a map from a MapLibre/Mapbox style URL.
There are also two experimental (or alpha) layer types.
@@ -518,6 +519,13 @@ The XYZ Tile layer is a map from a generic tile layer.
- [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)
#### MapLibre Style layer
The MapLibre Style Layer is a map defined using a MapLibre/Mapbox `style.json` URL. The style contains the URL to the tiles, layer definitions, and more. Typically, they're based on vector tiles as opposed to raster tiles.
- **URL template** - Set a valid style URL. For example: `https://demotiles.maplibre.org/style.json`
- **Access Token** - An API token for mapbox maps. Only works for `mapbox://` URLs. Refer to [mapbox access tokens documentation](https://docs.mapbox.com/help/dive-deeper/access-tokens/) for more information. In other cases, you might have to include the token in the URL. For example: `https://example.com/map/style.json?key=XXX`.
### Basemap layer options
A basemap layer provides the visual foundation for a mapping application. It typically contains data with global coverage. Several base layer options
@@ -525,12 +533,13 @@ are available each with specific configuration options to style the base map.
Basemap layer types can also be added as layers. You can specify an opacity.
There are four basemap layer types to choose from in a geomap.
There are five basemap layer types to choose from in a geomap.
- [Open Street Map](#open-street-map-layer) adds a map from a collaborative free geographic world database.
- [CARTO basemap](#carto-basemap-layer) adds a layer from CARTO Raster basemaps.
- [ArcGIS MapServer](#arcgis-mapserver-layer) adds a layer from an ESRI ArcGIS MapServer.
- [XYZ Tile layer](#xyz-tile-layer) adds a map from a generic tile layer.
- [MapLibre Style layer](#maplibre-style-layer) adds a map from a MapLibre/Mapbox style URL.
The default basemap layer uses the CARTO map. You can define custom default base layers in the `.ini` configuration file.
@@ -540,7 +549,7 @@ The default basemap layer uses the CARTO map. You can define custom default base
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](ref:provisioning-docs-page).
Use the JSON configuration option `default_baselayer_config` to define the default base map. There are currently four base map options to choose from: `carto`, `esri-xyz`, `osm-standard`, `xyz`. Here are some provisioning examples for each base map option.
Use the JSON configuration option `default_baselayer_config` to define the default base map. There are currently five base map options to choose from: `carto`, `esri-xyz`, `osm-standard`, `xyz`, `maplibre`. Here are some provisioning examples for each base map option.
- **carto** loads the CartoDB tile server. You can choose from `auto`, `dark`, and `light` theme for the base map and can be set as shown below. The `showLabels` tag determines whether or not Grafana shows the Country details on top of the map. Here is an example:
@@ -606,6 +615,17 @@ default_baselayer_config = `{
}`
```
- **maplibre** loads a custom tile server defined by the user. Set a valid style `url` for this option to properly load a default base map. Here's an example:
```ini
default_baselayer_config = `{
"type": "maplibre",
"config": {
"url": "https://demotiles.maplibre.org/style.json"
}
}`
```
`enable_custom_baselayers` allows you to enable or disable custom open source base maps that are already implemented. The default is `true`.
### Map controls options