mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
Borderless fullscreen geographical map, with just the nodes. (#8337)
* Added a variant of map.php which allows for a borderless fullscreen geographical map, with just the nodes. * Signed my work. * Removed a space. * delete whitespace * remove whitespace * hack to fix some tiles not loading found the fix here: https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 https://gis.stackexchange.com/questions/224932/problem-with-map-tiles-loading-with-leaflet-and-bootstrap You might be able to do something more elegant. * added menu entry This removes the need for setting it as a front-page. Now it can be accessed from the menu and LibreNMS can be accessed by navigating back. * Create fullscreenmap.inc.php Notice the line: $pagetitle[] = 'Fullscreen Map'; * REmoved the original fullscreenmap.php * Revert "REmoved the original fullscreenmap.php" This reverts commit570953c5f5. * addded the resize event to html/pages/fullscreenmap.inc.php for proper leaflet rendering * Removed old file * Adjusted CSS and javascript. * Reverting to original javascript. * change Leaflet container CSS to white background * Made the Geographical Map not hide the menu when not in fullscreen mode. * Cleaned up the CSS-file a bit. * Added a variant of map.php which allows for a borderless fullscreen geographical map, with just the nodes. * Signed my work. * Removed a space. * delete whitespace * remove whitespace * hack to fix some tiles not loading found the fix here: https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 https://gis.stackexchange.com/questions/224932/problem-with-map-tiles-loading-with-leaflet-and-bootstrap You might be able to do something more elegant. * added menu entry This removes the need for setting it as a front-page. Now it can be accessed from the menu and LibreNMS can be accessed by navigating back. * Create fullscreenmap.inc.php Notice the line: $pagetitle[] = 'Fullscreen Map'; * REmoved the original fullscreenmap.php * Revert "REmoved the original fullscreenmap.php" This reverts commit570953c5f5. * addded the resize event to html/pages/fullscreenmap.inc.php for proper leaflet rendering * Removed old file * Adjusted CSS and javascript. * Reverting to original javascript. * change Leaflet container CSS to white background * Made the Geographical Map not hide the menu when not in fullscreen mode. * Cleaned up the CSS-file a bit.
This commit is contained in:
Dag Bakke
Tony Murray
30
html/css/fullscreenmap.css
Normal file
30
html/css/fullscreenmap.css
Normal file
@@ -0,0 +1,30 @@
|
||||
html, body, .container, .pace-done, .mapcontainer, .map, .row, .col-md-12, #leaflet-map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.container-fluid, .row, .col-md-12 {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
background: #fff;
|
||||
}
|
||||
@@ -70,6 +70,7 @@ if ($config['title_image']) {
|
||||
echo '</ul></li>';
|
||||
}
|
||||
?>
|
||||
<li><a href="<?php echo(generate_url(array('page'=>'fullscreenmap'))); ?>"><i class="fa fa-expand fa-fw fa-lg" aria-hidden="true"></i> Geographical</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-submenu">
|
||||
|
||||
99
html/pages/fullscreenmap.inc.php
Normal file
99
html/pages/fullscreenmap.inc.php
Normal file
@@ -0,0 +1,99 @@
|
||||
<?php
|
||||
/* Copyright (C) 2014 Daniel Preussker <f0o@devilcode.org>
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>. */
|
||||
/**
|
||||
* Custom Frontpage
|
||||
* @author f0o <f0o@devilcode.org>
|
||||
* @copyright 2014 f0o, LibreNMS
|
||||
* @license GPL
|
||||
* @package LibreNMS
|
||||
* @subpackage Frontpage
|
||||
*/
|
||||
/**
|
||||
* Fullscreen variant
|
||||
* I have mostly axed a lot of stuff and added a tiny bit of CSS
|
||||
* To make use of this, your config.php needs to contain
|
||||
* something like this:
|
||||
$config['front_page'] = "pages/front/fullscreenmap.php";
|
||||
$config['map']['engine'] = 'leaflet';
|
||||
$config['leaflet']['default_zoom'] = 5;
|
||||
$config['leaflet']['default_lat'] = 65.3258792;
|
||||
$config['leaflet']['default_lng'] = 14.1115485;
|
||||
Dag B <dag@bakke.com>
|
||||
*/
|
||||
|
||||
$pagetitle[] = 'Geographical Map';
|
||||
|
||||
if ($config['map']['engine'] == 'leaflet') {
|
||||
require_once 'includes/common/worldmap.inc.php';
|
||||
echo implode('', $common_output);
|
||||
}
|
||||
/* Yes, this code requires the leaflet map engine */
|
||||
?>
|
||||
|
||||
<link href="css/fullscreenmap.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var isFullscreen = false;
|
||||
window.addEventListener('resize', function () {
|
||||
if (window.innerHeight > (screen.height - 10)) {
|
||||
isFullscreen = true;
|
||||
setStyle();
|
||||
} else {
|
||||
isFullscreen = false;
|
||||
setStyle();
|
||||
};
|
||||
}, false);
|
||||
|
||||
function setStyle() {
|
||||
if(isFullscreen) {
|
||||
document.getElementsByClassName('navbar-fixed-top')[0].style.display = "none";
|
||||
document.getElementsByTagName('body')[0].style.paddingTop = 0;
|
||||
} else {
|
||||
document.getElementsByClassName('navbar-fixed-top')[0].style.removeProperty("display");
|
||||
document.getElementsByTagName('body')[0].style.paddingTop = "50px";
|
||||
};
|
||||
};
|
||||
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
</script>
|
||||
|
||||
<script src='js/jquery.mousewheel.min.js'></script>
|
||||
<?php
|
||||
$x=0;
|
||||
foreach (dbFetchRows("SELECT `hostname`,`devices`.`location`,`status`, COUNT(`status`) AS `total`,`lat`,`lng` FROM `devices` LEFT JOIN `locations` ON `devices`.`location`=`locations`.`location` WHERE `disabled`=0 AND `ignore`=0 AND `lat` != '' AND `lng` != '' GROUP BY `status`,`lat`,`lng` ORDER BY `status` ASC, `hostname`") as $map_devices) {
|
||||
$color = "#29FF3B";
|
||||
$size = 15;
|
||||
$status = 'Up';
|
||||
if ($map_devices['status'] == 0) {
|
||||
$color = "#FF0000";
|
||||
$size = 30;
|
||||
$status = 'Down';
|
||||
}
|
||||
$data .= "\"$x\": {
|
||||
value: \"" . $map_devices['total'] . "\",
|
||||
latitude: ". $map_devices['lat'] . ",
|
||||
longitude: " . $map_devices['lng'] . ",
|
||||
size: " . $size . ",
|
||||
attrs: {
|
||||
fill: \"" . $color . "\",
|
||||
opacity: 0.8
|
||||
},
|
||||
tooltip: {
|
||||
content: \"Devices " . $status . ": " . $map_devices['total'] . "\"
|
||||
}
|
||||
},\n";
|
||||
$x++;
|
||||
}
|
||||
?>
|
||||
Reference in New Issue
Block a user