Mapstats v5.0 Leaflet documentation

JS library for display and monitoring (wireless) network on the Leaflet map.

Installation

First of all check out Mapstats homepage if there is newer version available:
https://www.jklir.net/mapstats.html

These programs must be available for bash script: awk, tr, ping or nmap or fping

unpack the archive
move mapstats directory to your www directory (or somewhere you want to use it)
change path, directories and configuration in 'gen_mapstats.sh'
if you have fping installed change STATS_TYPE from 'ping' to 'fping' (www.fping.org) for faster stats generation
if you have nmap installed change STATS_TYPE from 'ping' to 'nmap' (www.nmap.org) for faster stats generation
run 'gen_mapstats.sh' to test the configuration
edit 'name.*' files to match your configuration (sample files are included)
add 'gen_mapstats.sh' to cron if you want to generate statistics periodically

Mapstats can be combine with other Leaflet plugins.

You can buy me a beer or coffee 😉 or also support Leaflet project.

Content:

Implementation
Mapstats options
Files structure

Implementation

This example is in index.html.

You need to include Leaflet and Mapstats CSS and JS files to head of the page, and add map container with a certain id to body element:

<!DOCTYPE html>
<html>
  <head>
    <title>Mapstats v5.0</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    
    <link rel="stylesheet" href="css/mapstats.css" type="text/css" />
    <script src="js/mapstats.min.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Add Javascript part to body element:

<script>

var OSM = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    minZoom: 9,
    maxZoom: 21,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

var ESRI = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; <a href="http://www.esri.com/">Esri</a> &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
    minZoom: 9,
    maxZoom: 21,
    maxNativeZoom: 19
});

var CUZK = L.tileLayer.wms('https://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/service.svc/get', {
    layers: 'GR_ORTFOTORGB',
    format: 'image/jpeg',
    crs: L.CRS.EPSG4326,
    minZoom: 9,
    maxZoom: 21,
    attribution: '&copy; <a href="https://www.cuzk.cz/">ČÚZK</a>, <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});

var baseMaps = {
    "CUZK Ortofoto": CUZK,
    "ESRI Satellite": ESRI,
    "OpenStreetMap": OSM
};

var map = L.map('map', {
    center: [50.1321556, 14.4651017],
    zoom: 15,
    preferCanvas: true,
    layers: [CUZK]
});

var layerControl = L.control.layers(baseMaps).addTo(map);

var mapstatsOptions = {
    translate: {
        'status_0': 'inactive',
        'status_1': 'active',
        'status_2': 'planning'
    }
};
var mapstats = L.mapstats(map, layerControl, mapstatsOptions);

</script>

ČÚZK map tile provider is available only for the area of the Czech Republic. Many countries offer their own satellite map tiles for free or you can use ESRI, or you can choose from existing tile providers.

Detailed Leaflet documentation is here. You can set Mapstats options for override default display and behavior.

TIP: You can download Mapstats_CZFMap_mod inspired by CZFree Map application with more markers and statuses than in the base. The archive also contains a PHP script for getting nodes from the selected area from the CZFree map with a lot of setting options.

Mapstats options

Option	Type	Default	Description
`linkSize`	`Number`	`1.4`	Size in pixels for the client link
`backboneLinkSize`	`Number`	`3.3`	Size in pixels for the backbone link
`showLinks`	`Boolean`	`true`	Display links layer on the map after init
`showNodes`	`Boolean`	`true`	Display nodes layer on the map after init
`showTooltips`	`Boolean`	`true`	Display tooltips layer on the map after init
`showPingTooltips`	`Boolean`	`true`	Display ping tooltips layer on the map after init
`showLegend`	`Boolean`	`false`	Display legend on the map after init
`allowLayersControl`	`Boolean`	`true`	Allow display layer control for nodes, links, tooltips and ping tooltips. If the value is `false` then checkboxes for display nodes, links, tooltips and pings will be hidden.
`allowPingTooltips`	`Boolean`	`true`	Allow display ping tooltips layer on the map. If the value is `false` then checkbox for display pings will be hidden.
`allowLegend`	`Boolean`	`true`	Allow display legend on the map. If the value is `false` then checkbox for display legend will be hidden.
`legendPosition`	`String`	`'bottomleft'`	Position of the opened legend. Possible values are `'topleft'`, `'topright'`, `'bottomleft'` or `'bottomright'`
`nodesFile`	`String`	`'name.nodes'`	Name or path to nodes file
`linksFile`	`String`	`'name.links'`	Name or path to links file
`pingsFile`	`String`	`'name.ping'`	Name or path to ping file
`statesFile`	`String`	`'name.state'`	Name or path to state file
`stateIndicator`	`String`	`'background'`	Possible values are `'marker'`, `'label'` or `'background'`
`statesUpdateInterval`	`Number`	`300`	Time interval in seconds for periodically update the states from the state file and then redraw map markers and tooltips. 300 seconds = 5 minutes. Set to `0` if you don't want to use this functionality
`clientMarkers`	`Array`	`['unknown', 'client', 'infopoint']`	Array of the client marker names used for clientsZoomTrigger functionality
`clientsZoomTrigger`	`Number`	`17`	Show defined client node types and client links if the map zoom is greater or equals the value. Set to `0` if you don't want to use this functionality
`planningLinksZoomTrigger`	`Number`	`15`	Show links in planning (not active links) if the map zoom is greater or equals the value. Set to `0` if you don't want to use this functionality
`planningLinksOpacity`	`Number`	`0.45`	Opacity for the links in planning (not active links). Value can be from `0` to `1`
`planningLinksBorderOpacity`	`Number`	`0.45`	Opacity for the "border" of links in planning (not active links). Value can be from `0` to `1`
`allowPopups`	`Boolean`	`true`	Allow popups on the nodes with ping/state information.
`markersPath`	`String`	`'markers/'`	Path to markers icons
`markers`	`Object`	Markers options	Marker types object of objects. Sort by priority from low to high.
`links`	`Object`	Links options	Link types object of objects
`legend`	`Object`	Legend options	Legend options object
`translate`	`Object`	`{}`	With this feature you can translate or replace texts or names on the map (as layer names, legend fields, legend statuses etc.). Setting by: `'text': 'new text'`. For example: `{ 'Nodes': 'My points', 'status_0': 'inactive', 'status_1': 'active', 'status_2': 'planning' }`.

Markers options

Default value of the markers options sorted by priority from low to high:

{
    /* sort by priority from low to high */
    unknown: {
        name: 'Unknown',
        width: 14,
        height: 14,
        ignoreNodeStatus: true
    },
    infopoint: {
        name: 'Infopoint',
        width: 14,
        height: 14,
        ignoreNodeStatus: true
    },
    switch: {
        name: 'Switch',
        width: 12,
        height: 12,
        ignoreNodeStatus: true,
        disableTooltips: true
    },
    client: {
        name: 'Client',
        width: 14,
        height: 14
    },
    router: {
        name: 'Router',
        width: 17,
        height: 17
    },
    ap: {
        name: 'Access Point',
        width: 17,
        height: 17,
        shadowImage: true,
        shadowWidth: 62,
        shadowHeight: 34
    }
}

Key is used in nodes file as a type. Value is a object and has the following basic settings:

Option	Type	Default	Description
`name`	`String`	`null`	(required) Name of the marker used in legend. Name can be translated by translate option.
`width`	`Number`	`null`	(required) Width of the marker in pixels. It is used for size of the marker on the map and for online/offline marker if is set stateIndicator as `'marker'`.
`height`	`Number`	`null`	(required) Height of the marker in pixels. It is used for size of the marker on the map and for online/offline marker if is set stateIndicator as `'marker'`.
`ignoreNodeStatus`	`Boolean`	`false`	If the value is `true` then marker icon can be only one and with no suffix with statuses in the markers directory.
`disableTooltips`	`Boolean`	`false`	If the value is `true` then marker has no tooltips on the map
`shadowImage`	`Boolean`	`false`	Set `true` when you want to display shadow image under marker icon. There must exists image "key + '_shadow.png'" in the markers directory. Example: ap_shadow.png The shadow image will be centered under the marker icon.
`shadowWidth`	`Number`	`null`	Width of the marker shadow image in pixels
`shadowHeight`	`Number`	`null`	Height of the marker shadow image in pixels

Links options

Default value of the links options:

{
    0: {
        name: 'Unknown',
        color: '#000000'
    },
    1: {
        name: '2.4 GHz',
        color: '#00cc00'
    },
    2: {
        name: 'FSO',
        color: '#bb0000'
    },
    3: {
        name: 'UTP',
        color: '#66ccff'
    },
    4: {
        name: 'Fiber',
        color: '#aa22aa'
    },
    5: {
        name: 'VPN',
        color: '#00ffff'
    },
    6: {
        name: 'FSO + Wifi',
        color: '#ff4444'
    },
    7: {
        name: '5 GHz',
        color: '#888888'
    },
    8: {
        name: '10 GHz',
        color: '#ffffff'
    },
    9: {
        name: 'Licenced',
        color: '#ff8800'
    },
    10: {
        name: '80 GHz',
        color: '#ffff00'
    },
    11: {
        name: 'Leased',
        color: '#0000bb'
    },
    12: {
        name: '5 GHz MIMO',
        color: '#cccccc'
    },
    13: {
        name: '17 GHz',
        color: '#ff9999'
    },
    14: {
        name: '24 GHz',
        color: '#88ff00'
    },
    15: {
        name: '60 GHz',
        color: '#3366ff'
    },
    99: {
        name: 'Other',
        color: '#777733'
    }
}

Key is used in links file as a link_type. Value is a object and has the following basic settings:

Option	Type	Default	Description
`name`	`String`	`null`	(required) Name of the link used in legend. Name can be translated by translate option.
`color`	`String`	`null`	(required) Color of the link in HEX color code

Legend options

Option	Type	Default	Description
`links`	`String \| Boolean`	`'used'`	(required) Which types of links to display. Possible values are `'all'`, `'used'` or `false`
`markers`	`String \| Boolean`	`'all'`	(required) Which types of markers to display. Possible values are `'all'`, `'used'` or `false`
`statuses`	`Array`	`[0, 1, 2]`	(required) Array of statuses used in nodes file. There must exists marker icons for this statuses.
`statusesMarker`	`String`	`'client'`	(required) String with key of object from markers object. Marker will be display with possible statuses.
`defaultMarkerStatus`	`Number`	`1`	Default status for markers

Files structure

Each implementation must contain four files:
name.nodes - list of all nodes on the map
name.links - list of links between nodes
name.ping - list of nodes with IP address to ping (optional)
name.state - actual state of ping nodes (generated by Mapstats bash script)

Name 'name' can be changed or created other files with different name and same extensions - script gen_mapstats.sh will generate all state files in the same directory.
If you can not use *.ping and *.state files, don't delete it, but only erase content inside.

*.nodes files

name_of_node;latitude;longitude;type;status

name_of_node:
Name of the node.

latitude:
GPS latitude position of the node.

longitude:
GPS longitude position of the node.

type:
Type of the node - types can be defined in Mapstats options or you can use default values.

status:
Status of the node - statuses can be defined by existing markers icons. By default exists icons for statuses 0, 1, 2, but can be changed/extended.

Example - name.nodes:

############################
# Name;Lat;Lng;Type;Status #
############################
Restaurace Na Vyhlídce;50.132251124412;14.453820082453;infopoint;1
Cobolis;50.127118855988;14.470448260225;infopoint;1
Zanzibar;50.128217534734;14.474457800388;infopoint;1
Restaurace Na Mělnické;50.134620736011;14.47781738018;infopoint;1
krivenicka;50.141615808264;14.433141487056;router;1
kberanovu8;50.140115517877;14.448269989359;router;1
ZleBra;50.131268239759;14.450344070792;router;1
verste;50.143645306237;14.450559988618;router;1
TOMCAT-BERK;50.12883365;14.45074396;ap;0
Hykes;50.14494545952;14.451060003523;router;1
marnov;50.145053092487;14.451701939106;router;1
jark Kobylisy;50.132359;14.45430024;ap;1
Alderan;50.13136554;14.45548442;router;1
kankovskehov;50.129847758442;14.462254854256;router;1
Jelinkova;50.133111808136;14.463912025094;ap;1
simunkova24;50.134689427847;14.468468191439;ap;1
zernojelin;50.133245914326;14.470420405269;switch;1
Žernosecká;50.133105790542;14.470632970333;ap;1
Havrankova-1s10;50.135994578584;14.471889585257;switch;1
strelnicna;50.127000179268;14.47192704803;router;1
Havrankova;50.136056470067;14.472082704306;ap;1
simunkova14;50.135055451479;14.472855180502;router;1
Irter;50.127876272864;14.47305759913;ap;1
BD Bříza;50.134636384237;14.473168998957;router;1
AP_Kubikova;50.1357175;14.4733475;router;1
javorova_a1;50.137506169175;14.474402815103;router;1
Slovanka;50.124994245223;14.475356340408;router;1
beach;50.132462080058;14.475718202406;router;2
Jipe;50.1311442;14.4777383;ap;1
Jipe2;50.1312936;14.4777411;switch;1
Client1;50.1307350;14.4761772;client;1
Client2;50.1301572;14.4764886;client;1
Client3;50.1299989;14.4765850;client;1
Client4;50.1288092;14.4782481;client;1
Client5;50.1291531;14.4793744;client;2
Passi;50.1307694;14.4792244;client;1
Lemming;50.136911337974;14.476118758321;router;1
Unreal;50.136357760097;14.476130157709;ap;1
Seidlovka;50.13551276785;14.476139545441;router;1
Pospa;50.13433192;14.47617822;ap;1
k_ovcinu;50.138329637159;14.476270973682;router;1
hapri;50.125406948448;14.476343393326;ap;1
AP_dan;50.138584066989;14.476472139358;ap;1
david_l;50.135192131078;14.476635754108;router;1
Freedom242;50.134318101774;14.476674005485;router;1
Looser;50.13823941;14.4766871;ap;1
Voza;50.134060793839;14.476828191291;router;1
dan_klient;50.139154810064;14.476933479309;router;1
Vojtech;50.137430526312;14.477012604475;ap;1
dablicka1a;50.134254109104;14.477223169181;router;1
Soucek;50.137575794888;14.477355256677;router;1
mata j;50.138297001904;14.477466491386;router;1
Modrin;50.137742122567;14.478008898441;router;1
špačková;50.139340472006;14.478333592415;router;1
Duch;50.13826882;14.47833944;ap;1
Děda;50.139077020934;14.478564932942;router;1
Bláha;50.1188957104;14.480163529515;router;1
Kocvara;50.120923769043;14.480927288532;ap;1
Kozel;50.118875932428;14.481795653701;ap;1
jitrnew;50.122464640621;14.482606351376;router;1
teplicka;50.125725989005;14.487274648014;router;1
t265;50.126147574434;14.488048317247;router;1
jab352;50.1272753;14.4905083;router;1
sluknovska;50.127498353314;14.493513554335;ap;1
jabtoc;50.1248644;14.4941856;ap;1
jablonecka;50.1232619;14.4965139;ap;1

*.links files

name_of_node_from*name_of_node_to;link_type;is_backbone;is_active

name_of_node_from*name_of_node_to:
Node names from *.nodes file separated by "*".
You can change the name to coordinates latitude,longitude or/and add other points for the path (useful for creating fiber links). Each points must be separated by "*".
example: Jipe*50.1312542,14.4762686*50.1302500,14.4722344*50.1282417,14.4733933*Irter

link_type:
Type of the link - types can be defined in Mapstats options or you can use default values.

is_backbone:
If link is backbone (thick), set '1', if link is client (thin), set '0'. Sizes of the links can be changed in Mapstats options.

is_active:
If link is active (not in planning), set '1', otherwise set '0'. Links in planning have opacity.

Example - name.links:

##################################################
# Name1*Name2[*Lat,Lng];LinkType;Backbone;Active #
##################################################
Duch*Děda;7;1;1
Pospa*david_l;7;1;1
jablonecka*jabtoc;3;1;1
jab352*sluknovska;10;1;1
hapri*teplicka;7;1;1
Voza*dablicka1a;4;1;1
dablicka1a*david_l;10;1;0
Voza*Freedom242;4;1;1
beach*Žernosecká;7;1;0
TOMCAT-BERK*Jelinkova;1;0;1
Kozel*jark Kobylisy;7;1;1
Děda*špačková;4;1;1
Irter*david_l;7;1;1
Alderan*jark Kobylisy;7;1;1
AP_dan*dan_klient;4;1;1
kankovskehov*jark Kobylisy;7;1;1
sluknovska*Looser;13;1;1
Vojtech*Looser;4;1;1
Voza*Pospa;1;0;1
ZleBra*marnov;7;1;1
Kocvara*jitrnew;7;1;1
BD Bříza*simunkova14;4;1;0
Freedom242*Pospa;4;1;0
Havrankova*Unreal;2;1;0
Žernosecká*zernojelin;3;1;1
Bláha*Jelinkova;7;1;1
Jelinkova*zernojelin;7;1;1
Jipe*50.1312542,14.4762686*50.1302500,14.4722344*50.1282417,14.4733933*Irter;4;1;0
Jipe*Jipe2;3;1;1
Voza*Jipe2;7;1;1
Jipe*t265;10;1;1
Jipe*Client1;1;0;1
Jipe*Client2;1;0;1
Jipe*Client3;12;0;1
Jipe*Client4;12;0;1
Jipe*Client5;12;0;0
Jipe*Passi;12;1;1
beach*Jipe;7;1;0
Kozel*Bláha;7;1;1
Lemming*Vojtech;12;1;1
Kocvara*jabtoc;7;1;1
kankovskehov*Jelinkova;10;1;1
Looser*k_ovcinu;4;1;1
k_ovcinu*AP_dan;4;1;1
Havrankova-1s10*Havrankova;3;1;1
jitrnew*teplicka;7;1;0
simunkova14*Havrankova;7;1;1
javorova_a1*AP_dan;7;1;1
Jelinkova*simunkova24;10;1;1
teplicka*t265;4;1;1
jabtoc*t265;13;1;1
Slovanka*strelnicna;10;1;1
david_l*Seidlovka;15;1;1
BD Bříza*Unreal;7;1;1
t265*simunkova24;13;1;1
jitrnew*Irter;7;1;1
ZleBra*verste;15;1;1
simunkova24*Havrankova-1s10;10;1;1
t265*jab352;10;1;1
krivenicka*verste;15;1;1
AP_Kubikova*Havrankova;10;1;1
Alderan*Jelinkova;7;1;1
ZleBra*krivenicka;15;1;1
jitrnew*strelnicna;7;1;1
ZleBra*Jelinkova;15;1;1
strelnicna*jab352;10;1;1
jablonecka*ZleBra;10;1;1
Vojtech*Soucek;4;1;1
Seidlovka*Unreal;15;1;1
Unreal*Vojtech;15;1;1
Vojtech*mata j;4;1;1
Vojtech*Modrin;12;1;1
Duch*AP_dan;12;1;1
dan_klient*špačková;4;1;1
Modrin*Duch;15;1;0
Duch*mata j;4;1;0
Voza*AP_Kubikova;10;1;1
ZleBra*kberanovu8;10;1;1
kberanovu8*krivenicka;10;1;1
jabtoc*sluknovska;10;1;1
jitrnew*jabtoc;10;1;1
AP_Kubikova*Unreal;12;1;1
jab352*javorova_a1;10;1;0
Hykes*marnov;15;1;1
verste*Hykes;15;1;1
Slovanka*hapri;7;1;1

*.ping files

name_of_node;ip_address

name_of_node:
Name of the node must be same as in *.nodes file.

ip_address:
IP address of the node.

Example - name.ping:

###########
# Name;IP #
###########
marnov;10.32.0.166
verste;10.32.0.153
krivenicka;10.32.0.172
ZleBra;10.32.0.159
kankovskehov;10.32.138.87
simunkova24;10.32.0.173
Havrankova;10.32.0.137
Žernosecká;10.32.0.164
AP_Kubikova;10.32.0.160
simunkova14;10.32.0.143
BD Bříza;10.32.0.145
Seidlovka;10.32.0.158
david_l;10.32.0.152
AP_dan;10.32.0.144
Vojtech;10.32.0.148
Děda;10.32.0.149
javorova_a1;10.32.0.161
Irter;10.32.0.174
strelnicna;10.32.0.171
Slovanka;10.32.0.162
Unreal;10.32.0.136
Alderan;10.32.0.146
hapri;10.32.0.142
jark Kobylisy;10.32.0.140
Jelinkova;10.32.0.138
Pospa;10.32.0.131
Looser;10.32.0.135
Duch;10.32.0.157
Jipe;10.32.0.132
Passi;10.32.0.134
Kozel;10.33.0.1
Kocvara;10.33.0.58
sluknovska;10.33.0.4
jabtoc;10.33.21.1
jablonecka;10.33.0.2
Bláha;10.33.0.120
jitrnew;10.33.0.100
teplicka;10.33.0.20
jab352;10.33.0.82

*.state files

ip_address;is_online;latency

This file is fully generated by gen_mapstats.sh script.

ip_address
IP address of the node.

is_online
If node is online ('1'), then node is green, otherwise red.

latency
Latency in miliseconds.

Example - name.state:

10.32.0.166;1;3.787
10.32.0.153;1;2.599
10.32.0.172;1;3.325
10.32.0.159;1;2.939
10.32.138.87;1;3.659
10.32.0.147;0;0
10.32.0.173;1;2.820
10.32.0.137;1;1.698
10.32.0.164;0;0
10.32.0.160;1;1.460
10.32.0.143;1;2.942
10.32.0.145;1;2.012
10.32.0.158;1;0.746
10.32.0.152;1;1.375
10.32.0.144;1;1.090
10.32.0.148;1;0.927
10.32.0.149;1;1.377
10.32.0.161;1;1.804
10.32.0.174;1;13.247
10.32.0.171;1;2.942
10.32.0.162;1;4.526
10.32.0.136;1;0.148
10.32.0.146;0;0
10.32.0.142;1;3.183
10.32.0.140;0;0
10.32.0.138;1;2.768
10.32.0.131;0;0
10.32.0.135;1;1.010
10.32.0.157;1;2.953
10.32.0.132;1;2.241
10.32.0.134;0;0
10.33.0.1;1;5.914
10.33.0.58;1;237.417
10.33.0.4;1;1.409
10.33.21.1;1;1.987
10.33.0.2;1;1.657
10.33.0.120;1;24.474
10.33.0.100;1;3.720
10.33.0.20;1;2.297
10.33.0.82;1;2.163