MapStore

https://mapstore.geosolutionsgroup.com/mapstore/docs
Admin
MapStore is a web mapping framework that enables users to create, manage, and share interactive maps...
Tokens:117,729
Snippets:1,010
Trust Score:9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Tutorial Translation File with Actions Example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Example of a translation file for the Tutorial plugin, including custom actions for tutorial steps like 'start', 'next', and 'back'.

```json
{
  "tutorial": {
  "myIntroTranslation": {
  "title": "My intro title",
  "text": "My intro description",
  "action": { "start": { "type": 'MY_START_ACTION' }}
  }
}
}
```

--------------------------------

### Create Plugin Example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Example of creating a custom plugin with a context menu item.

```javascript
createPlugin(
 'MyPlugin',
 {
 containers: {
 TOC: {
 name: "TOOLNAME", // a name for the current tool.
 target: "context-menu", // the target where to insert the component
 Component: MyContextMenuComponent
 }
 }
 });
```

--------------------------------

### Tutorial Plugin Translation File with Actions Example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Example of a translation file for the Tutorial plugin, including custom actions for tour steps.

```json
{
  "tutorial": {
  "myIntroTranslation": {
  "title": "My intro title",
  "text": "My intro description",
  "action": { start: { type: 'MY_START_ACTION' }}
  }
  }
}
```

--------------------------------

### Tutorial translation file example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example of a translation file for the Tutorial plugin, defining titles and text for different tutorial steps. It also shows how to include HTML content in step descriptions and how to define actions for tutorial steps.

```json
// translation file example
...
"tutorial": {
  ...
  "myIntroTranslation": {
  "title": "My intro title",
  "text": "My intro description"
  },
  "myTranslation": {
  "title": "My first step title",
  "text": "My first step description"
  },
  "mySecondStepTranslation": {
  "title": "My second step title",
  "text": "My second step description"
  },
  "myTranslationHTML": {
  "title": "<div style=\"color:blue;\">My html step title</div>",
  "text": "<div style=\"color:red;\">My html step description</div>"
  }
  ...
}
...
// translation file example with actions
// action param could be an object or array of objects
// action type are triggered on tour actions and they could be `start`, `next` and `back`
...
"tutorial": {
  ...
  "myIntroTranslation": {
  "title": "My intro title",
  "text": "My intro description",
  "action": { start: { type: 'MY_START_ACTION' }}
  },

```

--------------------------------

### Tutorial Plugin Translation File Example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Example of a translation file structure for the Tutorial plugin, including HTML content.

```json
{
  "tutorial": {
  "myIntroTranslation": {
  "title": "My intro title",
  "text": "My intro description"
  },
  "myTranslation": {
  "title": "My first step title",
  "text": "My first step description"
  },
  "mySecondStepTranslation": {
  "title": "My second step title",
  "text": "My second step description"
  },
  "myTranslationHTML": {
  "title": "<div style=\"color:blue;\">My html step title</div>",
  "text": "<div style=\"color:red;\">My html step description</div>"
  }
  }
}
```

--------------------------------

### Widget Configuration Example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for the 'Widgets' plugin, specifying column sizes, row height, and default initial widget size.

```json
{
  "name": "Widgets",
  "cfg": {
    "cols": { "md": 48, "xxs": 1 },
    "rowHeight": 10,
    "defaults": {
      "initialSize": {
        "h": 8,
        "w": 8
      }
    }
  }
}
```

--------------------------------

### Tutorial Plugin Preset Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Example of configuring the Tutorial plugin to use a custom preset.

```json
{
"name": "Tutorial",
"cfg": {
  "preset": "home_tutorial"
}
}
```

--------------------------------

### Configure Media Editor Settings for GeoStory

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for mediaEditorSettings, specifically for the geostory service. This setup defines default sources and enables media editing capabilities for images, videos, and maps within a GeoStory.

```json
{
  "name": "GeoStory",
  "cfg": {
    "defaultMarkerStyle": {
      "iconColor": "orange", 
      "iconShape": "square" 
    },
    "highlightedMarkerStyle": {
      "iconColor": "green", 
      "iconShape": "circle" 
    },
    "mediaEditorSettings": {
      "sourceId": "geostory",
      "mediaTypes": {
        "image": {
          "defaultSource": "geostory",
          "sources": ["geostory"]
        },
        "video": {
          "defaultSource": "geostory",
          "sources": ["geostory"]
        },
        "map": {
          "defaultSource": "geostory",
          "sources": ["geostory"]
        }
      },
      "sources": {
        "geostory": {
          "name": "geostory.currentStory",
          "type": "geostory"
          "addMediaEnabled": {
            "image": true,
            "video": true,
            "map": true
          },
          "editMediaEnabled": {
            "image": true,
            "video": true,
            "map": true
          },
          "removeMediaEnabled": {
            "image": true,
            "video": true,
            "map": true
          }
        }
      }
    }
  }
}
```

--------------------------------

### Annotations Plugin Configuration Example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

An example configuration for the Annotations Plugin, showcasing various settings like default point type, shape, colors, size, format, text annotation, geometry editor options, line dash options, symbols path, and custom fields.

```json
{
  "name": "Annotations",
  "cfg": {
      "defaultPointType": "symbol",
      "defaultShape": "traffic-cone",
      "defaultShapeStrokeColor": "#00ffff",
      "defaultShapeFillColor": "rgba(0, 255, 50, 0.5)",
      "defaultShapeSize": 128,
      "format": "aeronautical",
      "defaultTextAnnotation": "New",
      "geometryEditorOptions": {
          "measureOptions": {
              "displayUom": "nm"
          }
      },
      "lineDashOptions": [
          { "value": "0" },
          { "value": "1 4" },
          { "value": "1 12" },
          { "value": "8 8" }
      ],
      "symbolsPath": "product/assets/symbols/",
      "geodesic": true,
      "fields": [
          {
              "name": "title",
              "type": "text",
              "validator": "{(val) => val}",
              "validateError": "annotations.mandatory",
              "showLabel": true,
              "editable": true
          },
          {
              "name": "description",
              "type": "html",
              "showLabel": true,
              "editable": true
          },
          {
              "name": "myattribute",
              "type": "text",
              "editable": true,
              "showLabel": true,
              "validator": "{(value = '') => !value.includes('fake')}",
              "validateError": "annotations.error.fake"
          }
      ]
  }
}
```

--------------------------------

### ThematicLayer Configuration Object Example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

An example of a configuration object for the ThematicLayer plugin, including options for data sources, attributes, and color palettes.

```json
// A configuration object looks like this:
{
  "datatable": "...", // optional external data layer, can be used to retrieve the list of classification attributes (for SQL views),
  "attribute": "...", // name of the (fixed) classification attribute for SQLViews where the thema field is parametric (e.g. thema)
  "fieldAsParam": true/false, // if true the field is a parameter of the SQLView, if not is a real attribute of the layer
      when the field is parametric, you also have to specify attribute (the fixed attribute name in the SQLView and either
      datatable or fields to configure the list of available fields)
  "fields": [...], // optional list of classification fields (use this one or datatable to configure the list of fields)
  "colors": [...], // optional list of custom palettes (will override global ones)
  "additionalColors": [...] // optional list of additional color palettes (will be appended to the default ones),
}
```

--------------------------------

### Configure DrawerMenu Plugin

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for the DrawerMenu plugin, demonstrating how to hide the toggle button.

```json
{
  "name": "DrawerMenu",
  "cfg": {
    "hideButton": true
  }
}
```

--------------------------------

### Tutorial Plugin Preset List Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Example of overriding the default tutorial preset list for the Tutorial plugin.

```json
{
"name": "Tutorial",
"cfg": {
  "presetList": {
  "default_tutorial": [
    {
    "title": "Welcome",
    "text": "my intro text",
    "selector": "#intro-tutorial"
    },
    {
    "translation": "myTranslation" // id from translation file,
    "selector": "#my-first-step-selector"
    },
    {
    "translationHTML": "myTranslationHTML" // id from translation file,
    "selector": "#my-first-step-selector"
    }
  ]
  }
}
}
```

--------------------------------

### Configure Itinerary Plugin

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for the Itinerary plugin, including provider details and search settings.

```json
{
    "name": "Itinerary",
    "cfg": {
        "providerName": "GraphHopper",
        "defaultWaypointsLimit": 5,
        "providerApiConfig": {
            "url": "provider_url",
            "key": "provider_key"
            // other provider specific options
        },
        "searchConfig": {
            "displayName": "properties.display_name",
            "services": [
                {
                    "type": "nominatim",
                    "priority": 5,
                    "options": {
                        "limit": 10,
                        "polygon_geojson": 1,
                        "format": "json"
                    }
                }
            ],
            "maxResults": 10
        }
    }
}
```

--------------------------------

### Configure Identify Plugin

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for the Identify plugin, specifying display options and viewer settings.

```json
{
  "name": "Identify",
  "showIn": ["Settings"],
  "cfg": {
      "draggable": false,
      "dock": true,
      "viewerOptions": {
        "container": "{context.ReactSwipe}",
        "header": "{context.SwipeHeader}"
      }
  }
}
```

--------------------------------

### Configure GeoProcessing Plugin for Buffer Operation

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for the GeoProcessing plugin, setting up the WPS URL and specifying parameters for the buffer operation.

```json
{
  "name": "GeoProcessing",
  "cfg": {
    "wpsUrl": "http://localhost:8080/geoserver/wps",
    "selectedTool": "buffer",
    "buffer": {
      "quadrantSegments": 200,
      "capStyle": "Round"
    }
  }
}
```

--------------------------------

### WFS Search Service Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for a WFS search service. Includes priority and a display name template for search results.

```json
{
 "type": "wfs",
 "priority": 3,
 "displayName": "${properties.propToDisplay}",
```

--------------------------------

### Configure Custom Itinerary Provider in localConfig

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for registering a custom Itinerary provider in localConfig.

```json
{
  {
      "name": "Itinerary",
      "cfg": {
          "providerName": "CustomItineraryProvider",
          "defaultWaypointsLimit": 5,
          "providerApiConfig": {
            "url": "provider_url",
            "key": "provider_key"
          }
      }
  },
  {
      "name": "CustomItineraryProvider",
  }
}
```

--------------------------------

### Itinerary Plugin Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Configuration example for the Itinerary plugin, specifying provider details, default waypoints limit, and search configurations.

```APIDOC
## Itinerary Plugin Configuration

### Description
Configuration for the Itinerary plugin, including provider name, API configuration, and search settings.

### Parameters
- `cfg.providerName` (string) - Required: The name of the routing provider. Defaults to `GraphHopper`.
- `cfg.defaultWaypointsLimit` (number) - Required: The maximum number of waypoints for a route search. Defaults to `5`.
- `cfg.providerApiConfig` (Object) - Required: Configuration for the provider's API.
  - `cfg.providerApiConfig.url` (Object) - Required: The base URL for the provider API.
  - `cfg.providerApiConfig.key` (Object) - Required: The API key for authentication.
- `cfg.searchConfig` (Object) - Required: Configuration for search requests.
  - `cfg.searchConfig.displayName` (Object) - Required: Path to the display name field in search results.
  - `cfg.searchConfig.services` (Object) - Required: An array of services to use for searching.
    - `cfg.searchConfig.services[].type` (Object) - Required: The type of the search service.
    - `cfg.searchConfig.services[].options` (Object) - Required: Options for the search service.
    - `cfg.searchConfig.services[].priority` (Object) - Required: Priority of the service.
  - `cfg.searchConfig.maxResults` (Object) - Required: The maximum number of results to return.

### Request Example
```json
{
    "name": "Itinerary",
    "cfg": {
        "providerName": "GraphHopper",
        "defaultWaypointsLimit": 5,
        "providerApiConfig": {
            "url": "provider_url",
            "key": "provider_key"
            // other provider specific options
        },
        "searchConfig": {
            "displayName": "properties.display_name",
            "services": [
                {
                    "type": "nominatim",
                    "priority": 5,
                    "options": {
                        "limit": 10,
                        "polygon_geojson": 1,
                        "format": "json"
                    }
                }
            ],
            "maxResults": 10
        }
    }
}
```
```

--------------------------------

### Configure Isochrone Provider

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for registering a custom Isochrone provider in localConfig.

```json
{
  {
      "name": "Isochrone",
      "cfg": {
          "providerName": "CustomIsochroneProvider",
          "providerApiConfig": {
            "url": "provider_url",
            "key": "provider_key"
          }
      }
  },
  {
      "name": "CustomIsochroneProvider",
  }
}
```

--------------------------------

### TOCItemsSettings Plugin Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Configuration example for the TOCItemsSettings plugin, specifying panel width.

```json
{
  "name": "TOCItemsSettings",
  "cfg": {
      "width": 300
  }
}
```

--------------------------------

### Configure Map Plugin Tools

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Example of configuring the 'Map' plugin to include a list of standard and custom tools. Custom tools can be defined with specific implementations.

```json
{
"name": "Map",
"cfg": {
    "tools": ["overview", "scalebar", "draw", "highlight"]
  ...
 }
}
```

```json
{
  "name": "Map",
  "cfg": {
    "tools": ["overview", "scalebar", "draw", {
      "leaflet": {
        "name": "test",
        "impl": "{context.TestSupportLeaflet}"
      }
      }],
    "toolsOptions": {
      "test": {
        "label": "Hello"
      }
      ...
    }
  }
}
```

--------------------------------

### Custom Provider Registration (Itinerary)

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Example of how to register a custom API provider for the Itinerary plugin.

```APIDOC
## Custom Provider Registration (Itinerary)

### Description
This section outlines the steps to register a custom API provider for the Itinerary plugin, including the expected response format.

### Method
JavaScript API

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
registerApi(PROVIDER_NAME, {
    getDirections, // API call function to fetch route details
});
```

### Response
#### Success Response (200)
Custom provider response format:
- `routes`: array of routes with instructions
- `features`: array of GeoJSON features generated from the itinerary response
- `style`: style for the features as per the mapstore style format

```json
{
    "routes": [
        [
            {
                "text": "Continue onto Main Street",
                "streetName": "Main Street",
                "sign": "1",
                "distance": 100,
                "time": 100
            }
        ]
    ],
    "features": [],
    "style": {}
}
```

#### Response Example
See Success Response above.
```

--------------------------------

### Configure Map Tools

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Example of configuring standard map tools and their options. Tool options can be specific to mapping libraries like Leaflet or general.

```json
{
"name": "Map",
"cfg": {
    "tools": ["overview", "scalebar", "draw", "highlight"]
  ...
 }
}


```

```json
"toolsOptions": {
       "scalebar": {
           "leaflet": {
               "position": "bottomright"
           }
           ...
       }
       ...
   }


```

```json
"toolsOptions": {
"scalebar": {
       "position": "bottomright"
       ...
   }
   ...
}


```

--------------------------------

### Create Plugin with Component

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Example of creating a MapStore plugin named 'MyPlugin' that includes a component 'MyAddonComponent' targeted at the 'url-addon' container.

```javascript
createPlugin(
 'MyPlugin',
 {
     containers: {
         MetadataExplorer: {
             name: "TOOLNAME", // a name for the current tool.
             target: "url-addon", // the target where to insert the component
             Component: MyAddonComponent
         },
// ...
         }
     }
 });
```

--------------------------------

### Cyclomedia Provider Minimal Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Configure the Cyclomedia provider with a minimal setup including an API key and SRS. Credentials will be prompted from the user upon activation.

```json
{
  "provider": "cyclomedia",
  "apiKey": "<your-api-key>",
  "providerSettings": {
    "srs": "EPSG:7791"
  }
}
```

--------------------------------

### Configure LongitudinalProfileTool Plugin

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Configuration example for the LongitudinalProfileTool plugin, specifying WPS URL, chart titles, default distances, and referential layers.

```json
{
  "name": "LongitudinalProfileTool",
  "cfg": {
    "config": {
      "wpsurl": "/geoserver/wps",
      "chartTitle": "Long profile",
      "defaultDistance": 75,
      "noDataThreshold": 999999,
      "defaultReferentialName": "sfdem",
      "referentials": [{
        "layerName": "sfdem",
        "title": "sfdem"
      }]
    },
    "filterAllowedCRS": ["EPSG:4326", "EPSG:3857"],
    "additionalCRS": {
      "EPSG:3003": { "label": "EPSG:3003" }
      }
  }
}
```

--------------------------------

### Nominatim Search Service Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for a Nominatim search service. Specifies the search text template and options for the search query.

```json
{
 "type": "nominatim",
 "searchTextTemplate": "${properties.display_name}", // text to use as searchText when an item is selected. Gets the result properties.
 "options": {
   "polygon_geojson": 1,
   "limit": 3
 }

}
```

--------------------------------

### Configure Footer Plugin Menu Items

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example configuration for the Footer plugin, specifying various types of menu items like links, logos, buttons, dividers, and messages.

```json
{
"name": "Footer",
"cfg": {
    "menuItems": [
        {
            "type": "link",
            "href": "/my-link",
            "target": "blank",
            "glyph": "heart",
            "labelId": "myMessageId",
            "variant": "default"
        },
        {
            "type": "logo",
            "href": "/my-link",
            "target": "blank",
            "src": "/my-image.jpg",
            "style": {}
        },
        {
            "type": "button",
            "href": "/my-link",
            "target": "blank",
            "glyph": "heart",
            "tooltipId": "myMessageId",
            "variant": "default",
            "square": true
        },
        {
            "type": "divider"
        },
        {
            "type": "message",
            "labelId": "myTranslationMessageId"
        }
    ]
}
}
```

--------------------------------

### Configure Map Constraints

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Example of setting map constraints in `localConfig.json` to limit the map's zoom level and accessible area. It also shows how to set projection-specific constraints.

```json
"mapConstraints": {
 "minZoom": 12, // minimal allowed zoom used by default
 "crs":"EPSG:3857", // crs of the restrictedExtent
 "restrictedExtent":[
   1060334.456371965,5228292.734706056,
   1392988.403469052,5503466.036532691
  ],
  "projectionsConstraints": {
      "EPSG:1234": { "minZoom": 5 } // customization of minZoom for different projections
  }
 }
```

--------------------------------

### Inject Plugins into Manager

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

This example demonstrates how to inject new plugins as tab content into the Manager. The 'containers' option specifies the target ('Manager'), a unique name for the page, its position, priority, and the glyph to be used in the tab.

```javascript
createPlugin( 'MyPlugin', {
 component: MyPlugin,
 containers: {
 Manager: {
 name: 'uniquepagename', // this is used as identifier for the page and label.
 position: 1,
 priority: 1,
 glyph: "1-user-mod" // glyph used in the tab
 }
 // ...
 }
})
```

--------------------------------

### Custom Metadata Template Example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Define a custom HTML template for displaying layer metadata. This allows for flexible presentation of metadata properties within the MapStore interface.

```javascript
{
"name": "TOC",
     "cfg": {
         "metadataTemplate": ["<div id={model.identifier}>",
```

```javascript
"<Bootstrap.Table className='responsive'>",
```

```javascript
"<thead>",
```

```javascript
"<tr>",
```

```javascript
"<th>Campo</th><th>Valore</th>",
```

```javascript
"</tr>",
```

```javascript
"</thead>",
```

```javascript
"<tbody>",
```

```javascript
"<tr>",
```

```javascript
"<td>Identifier</td><td>{model.identifier}</td>",
```

```javascript
"</tr>",
```

```javascript
"<tr>",
```

```javascript
"<td>Title</td><td>{model.title}</td>",
```

```javascript
"</tr>",
```

```javascript
"<tr>",
```

```javascript
"<td>Abstract</td><td>{model.abstract}</td>",
```

```javascript
"</tr>",
```

--------------------------------

### Configure Custom Service with GeomService

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Configure a custom search service that includes a geomService for retrieving geometry data. This example shows how to define the search template, display name, and options for both the primary service and the geomService.

```json
"then" : [
                {
                  "type": "custom Service Name",
                  "searchTextTemplate": "${properties.propToDisplay}",
                  "displayName": "${properties.propToDisplay}",
                  "subTitle": " (a subtitle for the results coming from this service [ can contain expressions like ${properties.propForSubtitle}])",
                  "options": {
                    "pathname": "/path/to/service",
                    "idVia": "${properties.code}"
                  },
                "priority": 2,
                "geomService" : {
                  "type": "wfs",
                  "options": {
                    "url": "/geoserver/wfs",
                    "typeName":  "workspace:layer",
                    "srsName": "EPSG:4326",
                    "staticFilter": "ID = ${properties.code}"
                  }
                }
              }]
```

--------------------------------

### Configure Tutorial plugin with presetList

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Configure the Tutorial plugin by providing a custom 'presetList'. This allows overriding the default tutorial steps and their configurations, including titles, text, selectors, and translations. Setting the first step selector to an empty string enables autostart.

```json
{
"name": "Tutorial",
"cfg": {
  "presetList": {
  "default_tutorial": [
    {
    "title": "Welcome",
    "text": "my intro text",
    "selector": "#intro-tutorial"
    },
    {
    "translation": "myTranslation" // id from translation file,
    "selector": "#my-first-step-selector"
    },
    {
    "translationHTML": "myTranslationHTML" // id from translation file,
    "selector": "#my-first-step-selector"
    }
  ]
  }
}
}

```

--------------------------------

### BackgroundSelector Plugin Item Injection Example

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Example of how to create a custom button component and inject it into the BackgroundSelector plugin's toolbar. The 'target' property specifies the insertion point.

```javascript
const MyButtonComponent = connect(null, {
    onClick: myAction,
    disabled
})(({
   onClick, // custom action callback
   itemComponent // default component that provides a consistent UI
   }) => {
   const Component = itemComponent;
   return (<Component
       disabled={disabled}
       onClick={() => {
           onClick(true);
       }}
       glyph="glyph"
       tooltipId="path"
   />);
});
createPlugin(
 'MyPlugin',
 {
     containers: {
         MetadataExplorer: {
             name: "TOOLNAME", // a name for the current tool.
             target: "background-toolbar", // the target where to insert the component
             Component: MyButtonComponent
         },
// ...

```

--------------------------------

### Configure Tutorial plugin with preset

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Configure the Tutorial plugin to use a custom tutorial preset by specifying the 'preset' property in the configuration. This allows overriding the default tutorial with one defined in the preset folder.

```json
{
"name": "Tutorial",
"cfg": {
  "preset": "home_tutorial"
}
}

```

--------------------------------

### Custom Provider Registration (Isochrone)

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Example of how to register a custom API provider for the Isochrone plugin.

```APIDOC
## Custom Provider Registration (Isochrone)

### Description
This section outlines the steps to register a custom API provider for the Isochrone plugin, including the expected response format.

### Method
JavaScript API

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
registerApi(PROVIDER_NAME, {
    // API call function to fetch isochrone details
});
```

### Response
#### Success Response (200)
Custom provider response format:
- `distanceLimit`: distance limit for the isochrone (in meters).
- `timeLimit`: time limit for the isochrone (in seconds).

```json
{
    "distanceLimit": 100,
    "timeLimit": 100
};
```

#### Response Example
See Success Response above.
```

--------------------------------

### Isochrone Provider Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Configuration example for a custom Isochrone provider in MapStore's localConfig.

```APIDOC
## Isochrone Provider Configuration

### Description
Configuration for registering and setting up a custom Isochrone provider within MapStore.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "name": "Isochrone",
  "cfg": {
    "providerName": "CustomIsochroneProvider",
    "providerApiConfig": {
      "url": "provider_url",
      "key": "provider_key"
    }
  }
},
{
  "name": "CustomIsochroneProvider"
}
```

### Response
None
```

--------------------------------

### Register Custom Itinerary Provider API

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example of how to register a custom itinerary provider API using `registerApi`.

```javascript
registerApi(PROVIDER_NAME, {
    getDirections, // API call function to fetch route details
});
```

--------------------------------

### Configure Quick Date/Time Selectors

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Defines templates for quick selection of predefined date/time placeholders and duration expressions for single and range pickers.

```string
single - `{now}`, `{today}`, `{today}+P1D` - Tomorrow, `{now}-P10M` - 10 months from now
range - `{now}/{now}+P1D` - start date is current date time and end date is tomorrow
```

--------------------------------

### Identify Plugin Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Configuration options for the Identify plugin, which allows users to get information about features on the map.

```APIDOC
## Identify Plugin Configuration

### Description
Configuration options for the Identify plugin.

### Properties
- `cfg.disableAlwaysOn` (boolean): If true, disable always on setup.
- `cfg.configuration.showEmptyMessageGFI` (boolean): Allow or deny the visibility of message when you have no results from identify request.
- `cfg.configuration.infoFormat` (string): Default infoformat value. Other values are `text/html` for text only or `application/json` for properties.
- `cfg.disableCenterToMarker` (boolean): Disable zoom to marker action.
- `cfg.disableCoordinatesRow` (boolean): If true the coordinates row is disabled.
- `cfg.dock` (boolean): True shows dock panel, false shows modal.
- `cfg.draggable` (boolean): Draggable info window, when modal.
- `cfg.enableInfoForSelectedLayers` (boolean): If true, if some layer is selected in the TOC, the feature info is performed only on the selected ones. If false, the info is queried for all the layers, independently from selection. (default is true).
- `cfg.hidePopupIfNoResults` (boolean): Hide/show the identify popup in case of no results.
- `cfg.highlightEnabledFromTheStart` (boolean): The highlight feature button will be activated by default if true.
- `cfg.maxItems` (number): The number of features returned by this tool.
- `cfg.showAllResponses` (boolean): If true it will include invalid/empty responses and it will always select the first request/layer.
- `cfg.showEdit` (boolean): If true, and when the FeatureEditor plugin is present, shows and edit button to edit the current feature(s) clicked in the grid.
- `cfg.showHighlightFeatureButton` (boolean): Show the highlight feature button if the interrogation returned valid features (openlayers only).
- `cfg.showInMapPopup` (boolean): If true show the identify as popup.
- `cfg.showMoreInfo` (boolean): If true shows the more info icon which allow user to show/hide Geocode viewer as popup (true by default).
- `cfg.viewerOptions.container` (expression): The container of the viewer, expression from the context.
- `cfg.viewerOptions.header` (expression): The header of the viewer, expression from the context.
- `cfg.zIndex` (number): Component z index order.
- `showIn` (Array<string>): List of the plugins where to show the plugin.

### Example
```json
{
  "name": "Identify",
  "showIn": ["Settings"],
  "cfg": {
      "draggable": false,
      "dock": true,
      "viewerOptions": {
        "container": "{context.ReactSwipe}",
        "header": "{context.SwipeHeader}"
      }
  }
}
```
```

--------------------------------

### Customize Query Panel UI with Plugins

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Demonstrates how to customize the Query Panel's UI by injecting components or hiding default panels using plugins. This example shows how to hide the attribute filter and add a new panel.

```javascript
// customize the QueryPanels UI via plugin(s)
import {createPlugin} from "../utils/PluginsUtils";
export default createPlugin('QueryPanelCustomizations', {
    component: () => null,
    containers: {
        QueryPanel: [
            // Hide the attribute filter by injecting a `component: () => null` for one of the default panels, e.g. `attributeFilter`.
            {
                id: 'attributeFilter',
                component: () => null,
                target: 'attributes',
                position: 0,
                layerNameRegex: "^gs:us_states__[0-9]*"
            },
            // adds a panel after the attribute panel (if present) at position `0`
            {
                id: 'attributeFilterNew',
                component: () => 'Sample text',
                target: 'attributes',
                position: 0
            },

```

--------------------------------

### Thematic Layer Configuration Object

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Example of a configuration object for thematic layers, including options for data sources, attributes, and custom palettes.

```json
{
  "datatable": "...", // optional external data layer, can be used to retrieve the list of classification attributes (for SQL views),
  "attribute": "...", // name of the (fixed) classification attribute for SQLViews where the thema field is parametric (e.g. thema)
  "fieldAsParam": true/false, // if true the field is a parameter of the SQLView, if not is a real attribute of the layer
      when the field is parametric, you also have to specify attribute (the fixed attribute name in the SQLView and either
      datatable or fields to configure the list of available fields)
  "fields": [...], // optional list of classification fields (use this one or datatable to configure the list of fields)
  "colors": [...], // optional list of custom palettes (will override global ones)
  "additionalColors": [...] // optional list of additional color palettes (will be appended to the default ones),
}
```

--------------------------------

### Configure Tool Options by Map Type

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Demonstrates how to provide specific configuration options for tools, which can be dependent on the mapping library (e.g., Leaflet).

```json
"toolsOptions": {
       "scalebar": {
           "leaflet": {
               "position": "bottomright"
           }
           ...
       }
       ...
   }
```

```json
"toolsOptions": {
"scalebar": {
       "position": "bottomright"
       ...
   }
   ...
}
```

--------------------------------

### Plugin Registration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/index.html

Demonstrates how to register plugins within the MapStore framework.

```APIDOC
## Plugin Registration

### Description
Project: /websites/mapstore_geosolutionsgroup_mapstore
Content:
**MapStore**
  * P
.exports
  * G
plugins
  * C
.AddGroup
  * C
.Annotations
  * C
.AutoMapUpdate
  * C
.BackgroundSelector
  * C
.BrandNavbar
  * C
.BurgerMenu
  * C
.CameraPosition
  * C
.ToolsContainer
  * C
.Context
  * C
.ContextCreator
  * C
.Cookie
  * C
.CRSSelector
  * C
.Dashboard
  * C
.DashboardEditor
  * C
.DeleteResource
  * C
.Details
  * C
.DrawerMenu
  * C
.DynamicLegend
  * C
.EditContext
  * C
.Expander
  * C
.ExportComponent
  * C
.Favorites
  * C
.FeatureEditor
  * C
.FeatureEditor
  * C
.FeedbackMask
  * C
.FilterLayer
  * C
.Footer
  * C
.FullScreen
  * C
.GeoProcessing
  * C
.GeoStory
  * C
.GeoStoryEditor
  * C
.GeoStoryNavigation
  * C
.GlobeViewSwitcher
  * C
.GoFull
  * C
.GroupManager
  * C
.HelpLink
  * C
.Home
  * C
.HomeDescription
  * C
.Identify
  * C
.ImportComponent
  * C
.Isochrone
  * C
.Itinerary
  * C
.Language
  * C
.LayerDownload
  * C
.LayerInfo
  * C
.Locate
  * C
.Login
  * C
.LongitudinalProfileTool
  * C
.Manager
  * C
.ManagerMenu
  * C
.Map
  * C
.MapCatalog
  * C
.MapEditor
  * C
.MapExport
  * C
.MapFooter
  * C
.MapImport
  * C
.MapLoading
  * C
.MapTemplates
  * C
.MapViews
  * C
.Measure
  * C
.MediaEditor
  * C
.MetadataExplorer
  * C
.MetadataInfo
  * C
.MousePosition
  * C
.Notifications
  * C
.OmniBar
  * C
.PermalinkComponent
  * C
.Playback
  * C
.Print
  * M
.defaultFormat
  * C
.PrintGraticule
  * C
.PrintOutputFormat
  * C
.PrintProjection
  * C
.PrintScale
  * C
.PrintTextInput
  * C
.QueryPanel
  * C
.Redirect
  * C
.Redo
  * C
.ResourceDetails
  * C
.ResourcesFiltersForm
  * C
.ResourcesGrid
  * C
.ResourcesSearch
  * C
.RulesDataGrid
  * C
.RulesEditor
  * C
.RulesManagerFooter
  * C
.Save
  * C
.SaveAs
  * C
.ScaleBox
  * C
.ScrollTop
  * C
.Search
  * C
.SearchByBookmark
  * C
.SearchServicesConfig
  * C
.Settings
  * C
.Share
  * C
.SidebarMenu
  * C
.Snapshot
  * C
.StreetView
  * C
.StyleEditor
  * C
.Swipe
  * C
.TagsManager
  * C
.ThematicLayer
  * C
.Timeline
  * C
.TOC
  * C
.TOCItemsSettings
  * C
.Toolbar
  * C
.Tutorial
  * C
.Undo
  * C
.UserExtensions
  * C
.UserManager
  * C
.UserSession
  * C
.Widgets
  * C
.WidgetsBuilder
  * C
.WidgetsTray
  * C
.ZoomAll
  * C
.ZoomIn
  * C
.ZoomOut
  * C
Print
  * G
projectionSelector
  * C
QueryPanel
  * C
SidebarMenu

`module.exports``` static
Plugin registration using MapStore's plugin system.
* * *
`plugins``` global
MapStore2 plugins. In this documentation you can find the list of all the plugins available in MapStore, their main purpose and configuration.
**See** https://mapstore.readthedocs.io/en/latest/developer-guide/plugins-architecture/
  

* * *
`plugins.AddGroup`:`class` static
Adds to the TOC plugin a button for creating new layer groups.
* * *
`plugins.Annotations`:`class` static
Annotations Plugin. Implements annotations handling on maps.
Property| Type| Description  
---|---|---  
`**defaultPointType**`| `string`| default point type of marker geometry type. Can be`'marker'` or `'symbol'`  
`**defaultShape**`| `string`| the default symbol used when switching for the symbol styler  
`**defaultShapeFillColor**`| `string`| default symbol fill color  
`**defaultShapeSize**`| `number`| default symbol shape size in px  
`**defaultShapeStrokeColor**`| `string`| default symbol stroke color  
`**defaultTextAnnotation**`| `string`| default text value for text annotations (default:`'New'`)  
`**fields**`| `Array<object>`| **deprecated** Available annotation fields (`title` and `description` are mandatory). A list of object specifying:
  * `name`: the field synthetic name
  * `type`: type of value for the field (`'text'` or `'html'`) 
  * `validator`: (optional) function for rule for validation
  * `validationError`: (optional) id for the translations file containing the validation error message
  * `showLabel`: whether to show or not the field in the viewer / editor
  * `editable`: whether the field can be edited or not in editing mode

  
`**format**`| `string`| `'decimal'`or`'aeronautical'` degree for coordinates  
`**geodesic**`| `boolean`| **deprecated** draw geodesic annotation. By default `geodesic` is `true` (Currently applicable only for "circle" annotation type)  
`**geometryEditorOptions**`| `object`| properties to be passed to`CoordinatesEditor` of `GeometryEditor`. For more information refer to the documentation of `CoordinatesEditor` component  
`**lineDashOptions**`| `Array<object>`| `[{value: [line1 gap1 line2 gap2 line3...]}, {...}]`defines how dashed lines are displayed. Use values without unit identifier. If an odd number of values is inserted then they are added again to reach an even number of values for more information seethis page  
```

--------------------------------

### Cyclomedia Provider Minimal Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Use this configuration for the Cyclomedia provider when only an API key is available. Credentials will be prompted from the user upon activation.

```json
{
  "provider": "cyclomedia",
  "apiKey": "<your-api-key>",
  "providerSettings": {
    "srs": "EPSG:7791"
  }

}
```

--------------------------------

### Customize QueryPanel UI with Plugins

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins/#plugins

Demonstrates how to customize the QueryPanel's UI by injecting new components or hiding existing ones using plugins. This example shows how to hide the attribute filter and add a new panel.

```javascript
// customize the QueryPanels UI via plugin(s)
import {createPlugin} from "../utils/PluginsUtils";
export default createPlugin('QueryPanelCustomizations', {
    component: () => null,
    containers: {
        QueryPanel: [
            // Hide the attribute filter by injecting a `component: () => null` for one of the default panels, e.g. `attributeFilter`.
            {
                id: 'attributeFilter',
                component: () => null,
                target: 'attributes',
                position: 0,
                layerNameRegex: "^gs:us_states__[0-9]*"
            },
            // adds a panel after the attribute panel (if present) at position `0`
            {
                id: 'attributeFilterNew',
                component: () => 'Sample text',
                target: 'attributes',
                position: 0
            },
        ]
    }
})
```

--------------------------------

### Inject Custom Component into TOC Toolbar

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Example of creating a custom React component and injecting it as a button into the MapStore Table of Content (TOC) toolbar.

```javascript
const MyToolbarComponent = connect(selector, { onActivateTool })(({
 selectedLayers, // current list of selected layers - deprecated use selectedNodes instead
 selectedGroups, // current list of selected groups - deprecated use selectedNodes instead
 selectedNodes, // list of selected nodes object
 status, // selection status depending if only one or more than one layers or groups are selected
 statusTypes, // object with the available status types constant values: DESELECT, LAYER, LAYERS, GROUP or BOTH
 nodeTypes, // object with available node types constant values: LAYER or GROUP
 rootGroupId, constant value for root group id
 defaultGroupId, constant value for default group id
 itemComponent, // default component that provides a consistent UI (see TableOfContentItemButton for props)
 config, // custom configuration provided by the TOC
 onActivateTool, // example of a custom connected action
 ...props // additional props to pass to the default item component eg. buttonProps
}) => {
 const ItemComponent = itemComponent;
 // hide based on selection condition
 if (status !== statusTypes.DESELECT) {
     return null;
 }
 return (
     <ItemComponent
         {...props}
         glyph="heart"
         tooltipId="myMessageId"
         onClick={() => onActivateTool()}
     />
 );
});
createPlugin(
 'MyPlugin',
 {
     containers: {
         TOC: {
             name: "TOOLNAME", // a name for the current tool. 
             target: "toolbar", // the target where to insert the component
             Component: MyToolbarComponent,
             // selector is optional and it will receive same prop as the Component eg.:
             // selector: ({ status, statusTypes }) => status === statusTypes.DESELECT,
         },
// ...
```

--------------------------------

### Configure Available Projections and Roles for CRSSelector

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Configure the CRSSelector plugin with available projections and allowed user roles. This example shows how to list projections by 'value' and 'label', and specify roles like 'ADMIN', 'USER', and 'ALL'.

```json
{
  "name": "CRSSelector",
  "cfg": {
    "availableProjections": [
      { "value": "EPSG:4326", "label": "EPSG:4326" },
      { "value": "EPSG:3857", "label": "EPSG:3857" },
      { "value": "EPSG:3003", "label": "EPSG:3003" }
    ],
    "allowedRoles" : ["ADMIN", "USER", "ALL"]
  }
}
```

--------------------------------

### Identify Plugin Configuration

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

The Identify plugin allows users to get information about a clicked point on the map. It supports different configurations for mobile and desktop.

```APIDOC
## Identify Plugin

### Description

This plugin allows users to get information about a clicked point on the map. It can be configured to have a mobile or a desktop flavor. You can configure some of the features of this plugin by setting up the initial mapInfo state, then you need to update the `"initialState.defaultState"`, or by the plugin configuration.

### Configuration Example

```json
"mapInfo": {
  "enabled": true // enabled by default
}
```
```

--------------------------------

### Customize Measure Plugin Start/End Point Style

Source: https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins

Customize the style for the start and end points of measured features in the Measure plugin for 2D views.

```javascript
{
   "startPointOptions": {
       "radius": 3,
       "fillColor": "green",
       "applyToPolygon": false
   },
   "endPointOptions": {
       "radius": 3,
       "fillColor": "red",
       "applyToPolygon": false
   }
}
```
Tokens:
Raw