Geovisto Sidebar Tool

Extension of the Geovisto core library which provides a sidebar control for user management of other tools. It is based on the leaflet-sidebar-v2 plug-in.

This repository is a snapshot of Geoviosto tools/sidebar derived from the development repository: geovisto/geovisto-map.

Usage

import {
    GeovistoSidebarTool
} from 'geovisto-sidebar';
import 'geovisto-sidebar/dist/index.css';

// ,,,

// create instance of map with given props
const map = Geovisto.createMap({
  // ...
  tools?: Geovisto.createMapToolsManager([
    // instances of Geovisto tools (extensions) which will be directly used in the map
    // ...
    GeovistoSidebarTool.createTool({
      id: "geovisto-tool-sidebar",
    }),
  ])
});

// rendering of the map
map.draw(Geovisto.getMapConfigManagerFactory().default({
  // initial settings of the map can be overriden by the map config - JSON structure providing user settings 
  // ...
  tools?: [
    // config of Geovisto tools (extensions) used in the map
    {
      "type": "geovisto-tool-sidebar",
      "id": "geovisto-tool-sidebar",
      "enabled": true,
      "tabs": [
        // anonymous tab (not connected with the tool) containing tab fragments (connected with the tool)
        {
          "enabled": true, // tab should be visible
          "name": "General settings", // label of the tab
          "icon": "<i class=\"fa fa-gear\"></i>", // fa icon of the tab
          "checkButton": false, // tab should not contain the check button to enable/disable the tools
          "fragments": [
            {
                "tool": "geovisto-tool-themes", 
                "enabled": true
            },
            // further fragments...
          ]
        },
        // tab connected to a specific tool
        {
          "tool": "id", // identificator of the tool instance
          "enabled": true,
          "name": "Filters",
          "icon": "<i class=\"fa fa-filter\"></i>",
          "checkButton": true // tab should contain the check button to enable/disable the tool
        },
        // further tabs
      ]
    },
    // ...
  ]
}));

It works with the tools which implement the IMapFormControl interface. Such tools provide an HTML div element which can be placed into the sidebar tab or fragment.

Installation

npm install --save geovisto-sidebar

Peer dependencies:

npm install --save geovisto leaflet

This package serves as an extension of Geovisto core using the API for Geovisto tools (extensions). Follow Geovisto core on Github.

License

MIT