mirror/librenms-librenms
1
0
Fork 0
mirror of https://github.com/librenms/librenms.git synced 2024-10-07 16:52:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial setup of new map system

Browse Source
This commit is contained in:
laf
2015-07-20 15:10:56 +01:00
parent 26f137d822
commit b3e14c9ed6
9 changed files with 659 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
Makefile
View File

@@ -46,3 +46,18 @@ vis:
typeahead:
$(GIT_SUBTREE) --prefix=lib/typeahead https://github.com/twitter/typeahead.js.git master
jquery-mapael:
$(GIT_SUBTREE) --prefix=lib/jQuery-Mapael https://github.com/neveldo/jQuery-Mapael.git master
mapael-maps:
$(GIT_SUBTREE) --prefix=lib/mapael-maps https://github.com/neveldo/mapael-maps.git master
jquery-mousewheel:
$(GIT_SUBTREE) --prefix=lib/jquery-mousewheel https://github.com/jquery/jquery-mousewheel.git master
Leaflet.markercluster:
$(GIT_SUBTREE) --prefix=lib/Leaflet.markercluster https://github.com/Leaflet/Leaflet.markercluster.git master
Leaflet.awesome-markers:
$(GIT_SUBTREE) --prefix=lib/Leaflet.awesome-markers https://github.com/lvoogdt/Leaflet.awesome-markers.git 2.0/develop

45
doc/Extensions/Globe-Frontpage.md
View File

@@ -2,6 +2,51 @@
LibreNMS comes with a configurable geochart based frontpage to visualize where your gear is located geographically.
### Expiremental map
An new expiremental map is available, this requires you to have properly formatted addresses in sysLocation or sysLocation override. As part of the standard poller these addresses will be Geocoded by Google and stored in the database. To enable this please set the following config:
```php
$config['front_page'] = "pages/front/map.php";
$config['geoloc']['latlng'] = true;
$config['geoloc']['engine'] = "google";//Only one available at present
```
We have two current mapping engines available:
- Leaflet (default)
- Jquery-Mapael
### Leaflet config
This is a simple engine to use yet is quite powerful, here you can see how to enable this engine and zoom to a default place.
```php
$config['map']['engine'] = "leaflet";
$config['leaflet']['default_lat'] = "50.898482";
$config['leaflet']['default_lng'] = "-3.401402";
$config['leaflet']['default_zoom'] = 8;
```
### Jquery-Mapael config
Further custom options are available to load different maps of the world, set default coordinates of where the map will zoom and the zoom level by default. An example of
this is:
```php
$config['map']['engine'] = "jquery-mapael";
$config['mapael']['default_map'] = 'mapael-maps/united_kingdom/united_kingdom.js';
$config['mapael']['map_width'] = 400;
$config['mapael']['default_lat'] = '50.898482';
$config['mapael']['default_lng'] = '-3.401402';
$config['mapael']['default_zoom'] = 20;
```
A list of maps can be found in html/js/maps/ or html/js/mapael-maps/.
### Standard Globe map
To enable it, set `$config['front_page'] = "pages/front/globe.php";` in your `config.php`.
You can use any of these config-parameters to adjust some aspects of it:

478
html/css/leaflet.css Normal file
View File

@@ -0,0 +1,478 @@
/* required styles */
.leaflet-map-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-tile-container,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-overlay-pane svg,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
-ms-touch-action: none;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container img {
max-width: none !important;
}
/* stupid Android 2 doesn't understand "max-width: none" properly */
.leaflet-container img.leaflet-image-layer {
max-width: 15000px !important;
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-tile-pane { z-index: 2; }
.leaflet-objects-pane { z-index: 3; }
.leaflet-overlay-pane { z-index: 4; }
.leaflet-shadow-pane { z-index: 5; }
.leaflet-marker-pane { z-index: 6; }
.leaflet-popup-pane { z-index: 7; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 7;
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile,
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-tile-loaded,
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile,
.leaflet-touching .leaflet-zoom-animated {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-clickable {
cursor: pointer;
}
.leaflet-container {
cursor: -webkit-grab;
cursor: -moz-grab;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-container,
.leaflet-dragging .leaflet-clickable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline: 0;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-container a.leaflet-active {
outline: 2px solid orange;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255,255,255,0.5);
}
/* general typography */
.leaflet-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-control-zoom-out {
font-size: 20px;
}
.leaflet-touch .leaflet-control-zoom-in {
font-size: 22px;
}
.leaflet-touch .leaflet-control-zoom-out {
font-size: 24px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.7);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover {
text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 18px 0;
}
.leaflet-popup-tip-container {
margin: 0 auto;
width: 40px;
height: 20px;
position: relative;
overflow: hidden;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: #999;
}
.leaflet-popup-scrolled {
overflow: auto;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-popup-tip-container {
margin-top: -1px;
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}

42
html/css/styles.css
View File

@@ -1654,3 +1654,45 @@ tr.search:nth-child(odd) {
color: #FFFFFF;
}
.mapTooltip {
position : fixed;
background-color : #B2B3B1;
moz-opacity:0.90;
opacity: 0.90;
filter:alpha(opacity=90);
border-radius:10px;
padding : 10px;
z-index: 1000;
max-width: 200px;
display:none;
color:#000000;
}
.zoomIn, .zoomOut {
background-color:#fff;
border:1px solid #ccc;
color:#000;
width:15px;
height:15px;
line-height: 15px;
text-align:center;
border-radius:3px;
cursor:pointer;
position:absolute;
top : 10px;
font-weight:bold;
left : 10px;
-webkit-user-select: none; // For Webkit
-khtml-user-select: none;
-moz-user-select: none; // For Mozilla
-o-user-select: none;
user-select: none; // Default
}
.zoomOut {
top:30px;
}
#leaflet-map {
height: 600px;
}

4
html/index.php
View File

@@ -138,6 +138,10 @@ else {
<link href="css/mktree.css" rel="stylesheet" type="text/css" />
<link href="css/vis.min.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/leaflet.css" rel="stylesheet" type="text/css" />
<link href="css/MarkerCluster.css" rel="stylesheet" type="text/css" />
<link href="css/MarkerCluster.Default.css" rel="stylesheet" type="text/css" />
<link href="css/leaflet.awesome-markers.css" rel="stylesheet" type="text/css" />
<link href="<?php echo($config['stylesheet']); ?>" rel="stylesheet" type="text/css" />
<link href="css/<?php echo $config['site_style']; ?>.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>

9
html/js/leaflet.js Normal file
View File

File diff suppressed because one or more lines are too long

4
includes/functions.php
View File

@@ -1278,3 +1278,7 @@ function fping($host,$params) {
$response = array('xmt'=>$xmt,'rcv'=>$rcv,'loss'=>$loss,'min'=>$min,'max'=>$max,'avg'=>$avg);
return $response;
}
function function_check($function) {
return function_exists($function);
}

57
includes/polling/functions.inc.php
View File

@@ -416,3 +416,60 @@ function get_main_serial($device) {
}
}//end get_main_serial()
function location_to_latlng($device) {
if (function_check('curl_version') !== true) {
d_echo("Curl support for PHP not enabled\n");
return false;
exit;
}
$bad_loc = false;
$device_location = $device['location'];
if (!empty($device_location)) {
$device_location = preg_replace("/ /","+",$device_location);
// We have a location string for the device.
$loc = dbFetchRow("SELECT `lat`,`lng` FROM `coordinates` WHERE `location`=? LIMIT 1", array($device_location));
if (is_array($loc) === false) {
// Grab data from which ever Geocode service we use.
switch ($config['geoloc']['engine']) {
case "google":
default:
d_echo("Google geocode engine being used\n");
$api_url = "https://maps.googleapis.com/maps/api/geocode/json?address=$device_location";
break;
}
$curl_init = curl_init($api_url);
set_curl_proxy($curl_init);
curl_setopt($curl_init, CURLOPT_RETURNTRANSFER, true);
$data = json_decode(curl_exec($curl_init),true);
// Parse the data from the specific Geocode services.
switch ($config['geoloc']['engine']) {
case "google":
default:
if ($data['status'] == 'OK') {
$loc = $data['results'][0]['geometry']['location'];
} else {
$bad_loc = true;
}
break;
}
if ($bad_loc === true) {
d_echo("Bad lat / lng received\n");
}
else {
$loc['timestamp'] = array('NOW()');
$loc['location'] = $device_location;
if (dbInsert($loc, 'coordinates')) {
d_echo("Device lat/lng created\n");
}
else {
d_echo("Device lat/lng could not be created\n");
}
}
}
else {
d_echo("Using cached lat/lng from other device\n");
}
}
}// end location_to_latlng()

4
includes/polling/system.inc.php
View File

@@ -120,3 +120,7 @@ if ($poll_device['sysLocation'] && $device['location'] != $poll_device['sysLocat
log_event('Location -> '.$poll_device['sysLocation'], $device, 'system');
}
}
if ($config['geoloc']['latlng'] === true) {
location_to_latlng($device);
}