s:CMS

API Documentation

MapLibre

The MapLibre component is used to create maps using MapLibre and it is a wrapper around @vis.gl/react-maplibre module. It aims to be a full replacement of the MapLeaflet, by maintaining the same API and possibly providing enhanced functionality, mainly related to the native support for vector tiles.

height

Height (with units) of the map element.

• string,
• optional,
• default: "800px"

center

Center of the map, as a string with long, lat and zoom separated by commas.

• string
• optional
• default: "0,0,2"

mapStyle

URL of the JSON mapstyle file to use.

• string
• optional
• default: null

baseLayers

Array with default baselayers to show. One, or many of the following values: "CAWM" "OSM", "EsriSatellite", "EsriStreets", "EsriTopo", "GoogleSatellite", "GoogleRoadmap", "GoogleTerrain", "GoogleAlteredRoadmap", "GoogleTerrainOnly", "GoogleHybrid", "CartoDb", "StamenTerrain", "OSMMapnick", "OSMCycle".

• array
• optional
• default: null

layersControlPosition

Position of the layers control, one of the following values: "topright", "topleft", "bottomright" "bottomleft".

• string
• optional
• default: "topright"

geolocateControl

Position in the map frame of the Geolocate Control. If not provided, the Geolocate Controle will not be shown. Can be one of the following: "top-right", "top-left", "bottom-right", "bottom-left"

• string
• optional
• default: null

fullscreenControl

Position in the map frame of the Fullscreen Control. If not provided, the Fullscreen Controle will not be shown. Can be one of the following: "top-right", "top-left", "bottom-right", "bottom-left"

• string
• optional
• default: null

navigationControl

Position in the map frame of the Navigation Control. If not provided, the Navigation Controle will not be shown. Can be one of the following: "top-right", "top-left", "bottom-right", "bottom-left"

• string
• optional
• default: null

scaleControl

Position in the map frame of the Scale Control. If not provided, the Scale Controle will not be shown. Can be one of the following: "top-right", "top-left", "bottom-right", "bottom-left"

• string
• optional
• default: null

sprite

URL of the sprite file to use.

• string
• optional
• default: null

MapLeaflet accepts none, one or more VectorLayer and/or RasterLayer instances as child components

VectorLayerLibre

The VectorLayerLibre component is a React component that renders a vector layer on a map using GeoJSON data. It manages the layer's style, visibility, and data fetching.

source

An object containing information to source data. This should include the necessary properties for querying the data source. Data can be sourced from a static file (typically a CSV file stored locally or available on the web), a Directus API, or a custom API.

• Object
• Required
• Default: null

If a static file is used, the source object should implement the path2data property, structued as a key: value object with a single path key poniting to the static file path, eg.:

{
  path2data: {
    path: "path/to/data.csv"
  }
}

If a Directus API is used, the source object should implement the directus property, structured as a key: value object with the following keys:

• endpoint: Optional Directus endpoint. It can be omitted if env variable GATSBY_DIRECTUS_ENDPOINT is set.
• table: Required Directus table name.
• queryString: Optional Directus filters and other, provided as querystring compatible to Directus API.
• token: Optional Directus access token. It can be omitted if env variable GATSBY_DIRECTUS_TOKEN is set.
• id: Optional Id of a specific record to retrieve. Required for record data displaying.
• geoField: Field that contains geographical data to display on map.

Example:

{
  directus: {
    endPoint: "https://example.com/directus",
    table: "my_table",
    queryString: "filter[my_field][_eq]=something&limit=-1",
    token: "my-random-string-access-token",
    id: "id-oth-the-record-to-display",
    geoField:"coordinates",
  }
}

Finally, if a custom API is used, the source object should implement the customApi property, structured as an object with the following keys:

• formatUrl: Required function to format the URL. It accepts a string as a parameter and should return a string rappresenting the URL to get data from
• parseResponse: Required function to parse the response. it accepts the response object and should return the data to display on the map.

Example:

{
  customApi: {
    formatUrl: (searchString) => {
      return `https://api.example.com/search?q=${searchString}`;
    },    
    parseResponse: (response) => {
      return response.data;
    }
  }
}

name

Layer name to use in the Layer control

• string
• required
• default: null

popupTemplate

A string containing the HTML to render in the popup. Variable properties can be used using ${field_name} syntax.

• string
• optional
• default: null

checked

Boolean property to control the layer's default visibility on the map and control panel.

• boolean
• optional
• default: false

fitToContent

Boolean property to decide whether to zoom/pan the map to fit the layer extension or not.

• boolean
• optional
• default: false

style

Style configuration for the layer. For the complete documentation see: https://maplibre.org/maplibre-style-spec/layers/

• object
• optional
• default: null

searchInFields

It can be a flat key:value object, the fieldname being the key and the shown label the value ("Site_Name": "Site name"). Or a more complex object with fieldname as the key and an object as the value; label holds the shown lavel and values is an array of predefined values used to populate a select input ("Item_Label": { label: "Label", values: ["KM 50", "KM 40", "KM 55"] },).

• object
• optional
• default: null

filter

Filter configuration for the layer. For the complete documentation see: https://maplibre.org/maplibre-style-spec/expressions/

• array
• optional
• default: null

RasterLayerLibre

The RasterLayerLibre component is designed to render a raster layer on a MapLibre map. This documentation provides an overview of the component and its props.

name

Layer name to use in the Layer control

• string
• required
• default: null

url

String with URL of tiles or array with multiple URLs

• string|array
• required
• default: null

checked

Boolean property to control the layer's default visibility on the map and control panel.

• boolean
• optional
• default: false

attribution

Attribution or credits for the layer.

• string
• optional
• default: null