> For the complete documentation index, see [llms.txt](https://rubo77.gitbook.io/meshviewer-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rubo77.gitbook.io/meshviewer-documentation/config_js.md).

# config\_js

Gulp merges `config.js` into `config.default.js` (`config.default.js` will be overwritten). **This is no deep merge**, i.e. you always need to add **complete** arrays or objects like `nodeInfobox` or `supportedLocale` to your `config.js`. You can use JS and functions to create new node details rows.

> **`config.default.js`** contains settings like `supportedLocale` or `maxAge` **`config.js`** contains community specific settings like statistic images or `siteName` (and the values/arrays/objects you want to overwrite in config.default.js)

## config.js

### dataPath (string/array)

`dataPath` needs a path/URL with `meshviewer.js` provided in an array. Don't forget the trailing slash! Also, proxying the data through a webserver will allow `brotli` or `deflat/gzip` which will greatly reduce bandwidth consumption. The header `Access-Control-Allow-Origin: "*"` should be added to allow local development.

Single data source

```javascript
'dataPath' : [
    'https://regensburg.freifunk.net/data/'
]
```

Multiple data sources

```javascript
'dataPath' : [
    'https://regensburg.freifunk.net/data/',
    'https://bremen.freifunk.net/data/'
]
```

### siteName (string)

Set this to match your community name. It's used in several places.

```javascript
'siteName': 'Freifunk Regensburg'
```

### mapLayers (List)

A list of objects describing the map layers. Each object has at least the properties `name`, `url` and `config`.

* A list of some possible layers available: [Example layers and configuration](http://leaflet-extras.github.io/leaflet-providers/preview/), but every source supporting the used standard will work.
* [Layer provider list for meshviewer](https://app.gitbook.com/build_install/map-layers.md)

#### mode (string, optional)

Allows to load an additional style for a night mode or a similar use case. It is possible to load the stylesheet `inline` or with a `link`-tag. Inline avoids re-rendering and possible issues with label-layer updates. It is important to add the following attributes: `class="css-mode mode-name" media="not"`.

*Default mode is `night` which is added inline in `index.html`*

```javascript
'mode': 'night'
```

`html/index.html`

```markup
 <link rel="stylesheet" class="css-mode mode-name" media="not" href="mode-name.css">
```

or

```markup
<style class="css-mode mode-name" media="not">
   <inline src="mode-name.css" />
</style>
```

#### start (integer, optional)

Start a time range to put this mapLayer on first position.

```javascript
'start': 19
```

#### end (integer, optional)

End a time range for first map. Stops sort this mapLayer.

```javascript
'end': 7
```

### fixedCenter (array\[array, array])

This sets the initial area shown on loading the map. Chose exactly two locations. Everything between those two locations will be displayed. Nodes outside the initial \`fixedCenter\`\` will be visible then you use map controls like zoom or moving around on the map.

Examples for `fixedCenter`:

```javascript
'fixedCenter': [
  [
    49.3522,
    11.7752
  ],
  [
    48.7480,
    12.8917
  ]
],
```

### nodeInfos (array, optional)

This option allows to show node statistics depending on following case-sensitive parameters:

* `name` - header of statistics segment in the infobox
* `href` - absolute or relative URL to statistics image
* `image` **(required)** - absolute or relative URL to image,

  can be the same like `href`
* `title` - the image title tag (also used as mouse hover)

To insert variables in either `href`, `image` or `title` you can use the case-sensitive template strings `{NODE_ID}`, `{NODE_NAME}`, `{LOCALE}` and `{TIME}` (as cache-breaker).

Examples for `nodeInfos`:

```javascript
'nodeInfos': [
  { 
    'name': 'Clientstatistik',
    'href': 'stats/dashboard/db/node-byid?var-nodeid={NODE_ID}',
    'image': 'stats/render/dashboard-solo/db/node-byid?panelId=1&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}&var-host={NODE_NAME}&_t={TIME}',
    'title': 'Knoten {NODE_ID}'
  },
  {
    'name': 'Uptime',
    'href': 'stats/dashboard/db/node-byid?var-nodeid={NODE_ID}',
    'image': 'stats/render/dashboard-solo/db/node-byid?panelId=2&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}&_t={TIME}',
    'title': 'Knoten {NODE_ID}'
  }
]
```

In order to have statistics images available, you have to set up an instance of each [Prometheus](http://prometheus.io/) and [Grafana](http://grafana.org/).

### globalInfos (array, optional)

This option allows to show global statistics on statistics page depending on following case-sensitive parameters:

* `name` - header of statistics segment in the infobox
* `href` - absolute or relative URL to statistics image
* `image` **(required)** - absolute or relative URL to image,

  can be the same like `href`
* `title` - the image title tag (also used as mouse hover)

To insert the variables locale or time (as cache-breaker) in either `href`, `image` or `title` you can use the case-sensitive template strings `{LOCALE}` and `{TIME}`.

Examples for `globalInfos` using Grafana server rendering:

```javascript
'globalInfos': [
  { 
    'name': 'Wochenstatistik',
    'href': 'stats/render/render/dashboard-solo/db/global?panelId=1&fullscreen&theme=light&width=600&height=300',
    'image': 'nodes/globalGraph.png',
    'title': 'Bild mit Wochenstatistik'
  }
]
```

### linkInfos (array, optional)

This option allows to show link statistics depending on the following case-sensitive parameters:

* `name` - header of statistics segment in the infobox
* `href` - absolute or relative URL to statistics image
* `image` **(required)** - absolute or relative URL to image,

  can be the same like `href`
* `title` - the image title tag (also used as mouse hover)

To insert the source or target variables in either `href`, `image` or `title` you can use the case-sensitive template strings `{SOURCE_ID}`, `{TARGET_ID}`, `{SOURCE_MAC}`, `{TARGET_MAC}`, `{SOURCE_ADDR}`, `{TARGET_ADDR}`, `{SOURCE_NAME}`, `{TARGET_NAME}`, `{LOCALE}` and `{TIME}` (as cache-breaker).

```javascript
'linkInfos': [
  {
    'name': 'Linkstatistik',
    'href': 'stats/dashboard/db/links?var-source={SOURCE_ID}&var-target={TARGET_ID}',
    'image': 'stats/render/dashboard-solo/db/links?panelId=1&fullscreen&theme=light&width=800&height=600&var-source={SOURCE_ID}&var-target={TARGET_ID}&_t={TIME}',
    'title': 'Bild mit Linkstatistik'
  }
]
```

### siteNames (array, optional)

In this array name definitions for site statistics and node info can be set. This requires one object for each `site` code. This object must contain:

* `site` - the site code
* `name` - the displayed name for this site

If neither `siteNames` nor `showSites` are set, site statistics and node info won't be displayed.

Example for `siteNames`:

```javascript
  'siteNames': [
    {
      'site': 'ffrgb',
      'name': 'Regensburg'
    },
    {
      'site': 'ffrgb-dummy',
      'name': 'Regensburg Test'
    }
  ]
```

### linkList (array, optional)

Defines an additional list of links displayed in the infobox. It can be used for links to legal notice, web or stats:

* `title` - the image title tag (also used as mouse hover) link
* `href` - URL of the link

Example for `linkList`:

```javascript
    'linkList': [
      {
        'title': 'Impressum',
        'href': '/verein/impressum/'
      },
      {
        'title': 'Datenschutz',
        'href': '/verein/datenschutz/'
      }
    ]
]
```

### geo (array, optional)

The definition for additional custom GeoJSON objects to be displayed in Meshviewer.

* `json` - geoJSON (javascript allowed e.g. load external json)
* `option` - style or other options

[Multiple GeoJSON examples](/meshviewer-documentation/examples/geo-json.md)

Example for `geo`:

```javascript
geo: [
      {
        json: function () {
          return Promise.all([
              // Content
          ]);
        },
        option: {
          style: {
            color: '#e23535',
            weight: 5,
            opacity: 0.4,
            fillColor: '#6de922',
            fillOpacity: 0.1
          }
        }
      }
    ]
```

## config.default.js

### reverseGeocodingApi (string)

Settings for a reverse proxy or your own geocoding server used by the location-picker. Setting up this will enhance data privacy and avoid problems caused by script-blockers like NoScript in case you are using different domains for your json data or the map tiles. External URLs need to be considered in your privacy policy.

```javascript
'reverseGeocodingApi': 'https://nominatim.openstreetmap.org/reverse'
```

### maxAge (string)

Nodes being online for less than `maxAge` days are considered "new". Likewise, nodes being offline for more than than `maxAge` days are considered "lost".

```javascript
'maxAge': 14
```

### maxAgeAlert (integer)

Nodes being offline for more than than `maxAge` days are considered "lost". Lost will be split up in `alert` and `lost`.

```javascript
'maxAgeAlert': 3
```

### nodeZoom (integer)

The zoom level that is used when clicking on a node or when using a deep-link URL directly to a node. The value `18` is a good default where nearby buildings and streets should be visible.

```javascript
'nodeZoom': 18
```

### labelZoom (integer)

Min. zoom level from which on the node labels are shown on the map. Note that every level in between `labelZoom` and `maxZoom` (defined in `mapLayers`) has a negative performance impact.

```javascript
'labelZoom': 13
```

### clientZoom (integer)

The min. level from which on the client dots are visible. Note that every level in between `clientZoom` and `maxZoom` (defined in `mapLayers`) has a negative performance impact.

```javascript
'clientZoom': 15
```

### nodeAttr (array)

Remove or add node properties in details view. The value can be a node attribute (depth 1) or any of the functions with a name starting with "show" from `lib/utils/node.js`.

```javascript
'nodeAttr': [
    // value can be a node attribute (depth 1) or any of the functions with a name starting with "show" from lib/utils/node.js with
    {
      'name': 'node.status',
      'value': 'Status'
    },
    {
      'name': 'node.gateway',
      'value': 'Gateway'
    },
    {
      'name': 'node.coordinates',
      'value': 'GeoURI'
    },
// Remove unwanted attributes    
//    {
//      'name': 'node.contact',
//      'value': 'owner'
//    },
    {
      'name': 'node.hardware',
      'value': 'model'
    },
    {
      'name': 'node.primaryMac',
      'value': 'mac'
    },
    {
      'name': 'node.firmware',
      'value': 'Firmware'
    },
    {
      'name': 'node.uptime',
      'value': 'Uptime'
    },
    {
      'name': 'node.firstSeen',
      'value': 'FirstSeen'
    },
    {
      'name': 'node.systemLoad',
      'value': 'Load'
    },
    {
      'name': 'node.ram',
      'value': 'RAM'
    },
    {
      'name': 'node.ipAddresses',
      'value': 'IPs'
    },
    {
      'name': 'node.update',
      'value': 'Autoupdate'
    },
    {
      'name': 'node.site',
      'value': 'Site'
    },
    {
      'name': 'node.clients',
      'value': 'Clients'
    }
  ]
```

### supportedLocale (array)

Add supported locale (with matching language file in `locales/*.js`). This will be matched against the browser language setting. Fallback will be the first language in the array.

Example for `supportedLocale`:

```javascript
'supportedLocale': [
  'en',
  'de',
  'cz',
  'fr',
  'tr',
  'ru'
]
```

### color (array)

Different color values for all canvas related settings. Couldn't be done via SCSS.

### cacheBreaker (string)

Will be replaced in every build to avoid missing or outdated language strings because `language.js` is not up to date.

*Fixed value (vy0zx).*