# 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](https://rubo77.gitbook.io/meshviewer-documentation/examples/geo-json)

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).*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rubo77.gitbook.io/meshviewer-documentation/config_js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.