initial commit; version 22.5.12042
This commit is contained in:
237
html/includes/map/google-mc.inc.php
Normal file
237
html/includes/map/google-mc.inc.php
Normal file
@ -0,0 +1,237 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Observium
|
||||
*
|
||||
* This file is part of Observium.
|
||||
*
|
||||
* @package observium
|
||||
* @subpackage map
|
||||
* @copyright (C) 2006-2013 Adam Armstrong, (C) 2013-2019 Observium Limited
|
||||
*
|
||||
*/
|
||||
|
||||
// Detect map center and zoom
|
||||
$where = ' WHERE 1 ';
|
||||
$where .= generate_query_permitted(array('device'), array('hide_ignored' => TRUE));
|
||||
|
||||
if (!is_numeric($config['frontpage']['map']['center']['lat']) || !is_numeric($config['frontpage']['map']['center']['lng']))
|
||||
{
|
||||
$map_center = dbFetchRow('SELECT MAX(`location_lon`) AS `lng_max`, MIN(`location_lon`) AS `lng_min`,
|
||||
MAX(`location_lat`) AS `lat_max`, MIN(`location_lat`) AS `lat_min`
|
||||
FROM `devices_locations` '.$where);
|
||||
$map_center['lat'] = ($map_center['lat_max'] + $map_center['lat_min']) / 2;
|
||||
$map_center['lng'] = ($map_center['lng_max'] + $map_center['lng_min']) / 2;
|
||||
$config['frontpage']['map']['center']['lat'] = $map_center['lat'];
|
||||
$config['frontpage']['map']['center']['lng'] = $map_center['lng'];
|
||||
|
||||
// Auto-zoom
|
||||
if (!is_numeric($config['frontpage']['map']['zoom']))
|
||||
{
|
||||
$map_center['lat_size'] = abs($map_center['lat_max'] - $map_center['lat_min']);
|
||||
$map_center['lng_size'] = abs($map_center['lng_max'] - $map_center['lng_min']);
|
||||
$l_max = max($map_center['lng_size'], $map_center['lat_size'] * 2);
|
||||
// This is the magic array (2: min zoom, 10: max zoom).
|
||||
foreach (array(1 => 10, 2 => 9, 4 => 8, 6 => 7, 15 => 5, 45 => 4, 90 => 3, 360 => 2) as $g => $z)
|
||||
{
|
||||
if ($l_max <= $g)
|
||||
{
|
||||
$config['frontpage']['map']['zoom'] = $z;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
//r($map_center);
|
||||
} else {
|
||||
if (!is_numeric($config['frontpage']['map']['zoom'])) { $config['frontpage']['map']['zoom'] = 4; }
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<script type='text/javascript' src='//www.google.com/jsapi'></script>
|
||||
<script type="text/javascript" src="js/google/markerclusterer.js"></script>
|
||||
|
||||
<?php
|
||||
if ($config['frontpage']['map']['clouds'])
|
||||
{
|
||||
echo '<script src="//maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather&key='.$config['geo_api']['google']['key'].'"></script>';
|
||||
} else {
|
||||
echo '<script src="//maps.google.com/maps/api/js?key='.$config['geo_api']['google']['key'].'"></script>';
|
||||
}
|
||||
?>
|
||||
|
||||
<script type="text/javascript">
|
||||
google.load('visualization', '1.1', {'packages': ['geochart']});
|
||||
function getMapData() {
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('number', 'Latitude');
|
||||
data.addColumn('number', 'Longitude');
|
||||
data.addColumn('number', 'Number up');
|
||||
data.addColumn('number', 'Number down');
|
||||
data.addColumn({type: 'string', role: 'tooltip'});
|
||||
data.addColumn('string', 'Location');
|
||||
data.addColumn('string', 'url');
|
||||
data.addRows([
|
||||
<?php
|
||||
$locations = array();
|
||||
foreach ($GLOBALS['cache']['devices']['id'] as $device)
|
||||
{
|
||||
if (!$config['web_show_disabled'] && $device["disabled"]) { continue; }
|
||||
$lat = (is_numeric($device['location_lat']) ? $device['location_lat'] : $config['geocoding']['default']['lat']);
|
||||
$lon = (is_numeric($device['location_lon']) ? $device['location_lon'] : $config['geocoding']['default']['lon']);
|
||||
if ($device["status"] == "0")
|
||||
{
|
||||
if ($device["ignore"] == "0")
|
||||
{
|
||||
$locations[$lat][$lon]["down_hosts"][] = $device;
|
||||
}
|
||||
} else {
|
||||
$locations[$lat][$lon]["up_hosts"][] = $device;
|
||||
}
|
||||
}
|
||||
|
||||
foreach ($locations as $la => $lat)
|
||||
{
|
||||
foreach ($lat as $lo => $lon)
|
||||
{
|
||||
$num_up = count($lon["up_hosts"]);
|
||||
$num_down = count($lon["down_hosts"]);
|
||||
$total_hosts = $num_up + $num_down;
|
||||
$tooltip = "$total_hosts Hosts";
|
||||
|
||||
$location_name = "";
|
||||
if ($num_down > 0)
|
||||
{
|
||||
$location_name = ($lon['down_hosts'][0]['location'] === '' ? OBS_VAR_UNSET : $lon['down_hosts'][0]['location']);
|
||||
$location_url = generate_location_url($lon['down_hosts'][0]['location']);
|
||||
$tooltip .= "\\n\\nDown hosts:";
|
||||
|
||||
foreach ($lon["down_hosts"] as $down_host) {
|
||||
$tooltip .= "\\n" . escape_html($down_host['hostname']);
|
||||
}
|
||||
}
|
||||
elseif ($num_up > 0)
|
||||
{
|
||||
$location_name = ($lon['up_hosts'][0]['location'] === '' ? OBS_VAR_UNSET : $lon['up_hosts'][0]['location']);
|
||||
$location_url = generate_location_url($lon['up_hosts'][0]['location']);
|
||||
}
|
||||
// Google Map JS not allowed chars: ', \
|
||||
$location_name = strtr(escape_html($location_name), "'\\", "`/");
|
||||
|
||||
echo "[$la, $lo, $num_up, $num_down, \"$tooltip\", '$location_name', '$location_url'],\n ";
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
]);
|
||||
return data;
|
||||
}
|
||||
|
||||
function initialize() {
|
||||
var data = getMapData();
|
||||
var markers = [];
|
||||
var base_link = '<?php echo generate_url(array("page" => "devices")); ?>';
|
||||
for (var i = 0; i < data.getNumberOfRows(); i++) {
|
||||
var latLng = new google.maps.LatLng(data.getValue(i, 0), data.getValue(i, 1));
|
||||
icon_ = '//maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png';
|
||||
|
||||
var num_up = data.getValue(i, 2);
|
||||
var num_down = data.getValue(i, 3);
|
||||
var location = data.getValue(i, 5);
|
||||
var ratio_up = num_up / (num_up + num_down);
|
||||
|
||||
if (ratio_up < 0.9999) {
|
||||
icon_ = '//maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png';
|
||||
}
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: latLng,
|
||||
icon: icon_,
|
||||
title: data.getValue(i, 4),
|
||||
location: location,
|
||||
num_up: num_up,
|
||||
num_down: num_down,
|
||||
url: data.getValue(i, 6)
|
||||
});
|
||||
|
||||
// marker.num_up = num_up;
|
||||
// marker.num_down = num_down;
|
||||
|
||||
markers.push(marker);
|
||||
|
||||
google.maps.event.addDomListener(marker, 'click', function() {
|
||||
window.location.href = this.url;
|
||||
});
|
||||
}
|
||||
var styles = [];
|
||||
for (var i = 0; i < 4; i++) {
|
||||
image_path = "/images/mapclusterer/";
|
||||
image_ext = ".png";
|
||||
styles.push({
|
||||
url: image_path + i + image_ext,
|
||||
height: 52,
|
||||
width: 53
|
||||
});
|
||||
}
|
||||
|
||||
var mcOptions = {gridSize: 30,
|
||||
maxZoom: 15,
|
||||
zoomOnClick: false,
|
||||
styles: styles
|
||||
};
|
||||
var markerClusterer = new MarkerClusterer(map, markers, mcOptions);
|
||||
|
||||
var iconCalculator = function(markers, numStyles) {
|
||||
var total_up = 0;
|
||||
var total_down = 0;
|
||||
for (var i = 0; i < markers.length; i++) {
|
||||
total_up += markers[i].num_up;
|
||||
total_down += markers[i].num_down;
|
||||
}
|
||||
|
||||
var ratio_up = total_up / (total_up + total_down);
|
||||
|
||||
//The map clusterer really does seem to use index-1...
|
||||
index_ = 1;
|
||||
if (ratio_up < 0.9999) {
|
||||
index_ = 4; // Could be 2, and then more code to use all 4 images
|
||||
}
|
||||
|
||||
return {
|
||||
text: (total_up + total_down),
|
||||
index: index_
|
||||
};
|
||||
}
|
||||
|
||||
markerClusterer.setCalculator(iconCalculator);
|
||||
}
|
||||
|
||||
var center_ = new google.maps.LatLng(<?php echo $config['frontpage']['map']['center']['lat']; ?>, <?php echo $config['frontpage']['map']['center']['lng']; ?>);
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
zoom: <?php echo $config['frontpage']['map']['zoom']?>,
|
||||
scrollwheel: false,
|
||||
streetViewControl: false,
|
||||
center: center_,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
});
|
||||
|
||||
<?php if ($config['frontpage']['map']['clouds']) { ?>
|
||||
var cloudLayer = new google.maps.weather.CloudLayer();
|
||||
cloudLayer.setMap(map);
|
||||
<?php } ?>
|
||||
|
||||
function resetMap() {
|
||||
map.setZoom(4);
|
||||
map.panTo(center_);
|
||||
}
|
||||
|
||||
google.maps.event.addListener(map, 'click', function(event) {
|
||||
map.setZoom(map.getZoom() + <?php echo $config['frontpage']['map']['zooms_per_click']; ?>);
|
||||
map.panTo(event.latLng);
|
||||
});
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
</script>
|
||||
<?php
|
||||
|
||||
// EOF
|
||||
108
html/includes/map/google.inc.php
Normal file
108
html/includes/map/google.inc.php
Normal file
@ -0,0 +1,108 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Observium
|
||||
*
|
||||
* This file is part of Observium.
|
||||
*
|
||||
* @package observium
|
||||
* @subpackage map
|
||||
* @copyright (C) 2006-2013 Adam Armstrong, (C) 2013-2019 Observium Limited
|
||||
*
|
||||
*/
|
||||
|
||||
?>
|
||||
<script type='text/javascript' src='//www.google.com/jsapi'></script>
|
||||
<script type='text/javascript'>
|
||||
google.load('visualization', '1.1', {'packages': ['geochart']});
|
||||
google.setOnLoadCallback(drawRegionsMap);
|
||||
function drawRegionsMap() {
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('number', 'Latitude');
|
||||
data.addColumn('number', 'Longitude');
|
||||
data.addColumn('string', 'Location');
|
||||
data.addColumn('number', 'Status');
|
||||
data.addColumn('number', 'Devices');
|
||||
data.addColumn({type: 'string', role: 'tooltip'});
|
||||
data.addColumn('string', 'url');
|
||||
data.addRows([
|
||||
<?php
|
||||
$locations_up = array();
|
||||
$locations_down = array();
|
||||
foreach (get_locations() as $location)
|
||||
{
|
||||
$location_name = ($location === '' ? OBS_VAR_UNSET : strtr(escape_html($location), "'\\", "`/"));
|
||||
$location_url = generate_location_url($location);
|
||||
$devices_down = array();
|
||||
$devices_up = array();
|
||||
$count = $GLOBALS['cache']['device_locations'][$location];
|
||||
$down = 0;
|
||||
foreach ($GLOBALS['cache']['devices']['id'] as $device)
|
||||
{
|
||||
if ($device['location'] == $location)
|
||||
{
|
||||
if ($device['status'] == "0" && $device['ignore'] == "0")
|
||||
{
|
||||
$down++;
|
||||
$devices_down[] = $device['hostname'];
|
||||
$lat = (is_numeric($device['location_lat']) ? $device['location_lat'] : $config['geocoding']['default']['lat']);
|
||||
$lon = (is_numeric($device['location_lon']) ? $device['location_lon'] : $config['geocoding']['default']['lon']);
|
||||
}
|
||||
else if ($device['status'] == "1")
|
||||
{
|
||||
$devices_up[] = $device['hostname'];
|
||||
$lat = (is_numeric($device['location_lat']) ? $device['location_lat'] : $config['geocoding']['default']['lat']);
|
||||
$lon = (is_numeric($device['location_lon']) ? $device['location_lon'] : $config['geocoding']['default']['lon']);
|
||||
}
|
||||
}
|
||||
}
|
||||
$count = (($count < 100) ? $count : 100);
|
||||
if ($down > 0)
|
||||
{
|
||||
$locations_down[] = "[$lat, $lon, '$location_name', $down, ".$count*$down.", '".count($devices_up). " Devices UP, " . count($devices_down). " Devices DOWN: (". implode(", ", $devices_down).")', '$location_url']";
|
||||
} else if ($count) {
|
||||
$locations_up[] = "[".$lat.", ".$lon.", '".$location_name."', 0, ".$count.", '".count($devices_up). " Devices UP: (". implode(", ", $devices_up).")', '$location_url']";
|
||||
}
|
||||
}
|
||||
echo(implode(",\n ", array_merge($locations_up, $locations_down)));
|
||||
?>
|
||||
]);
|
||||
|
||||
var options = {
|
||||
region: '<?php echo $config['frontpage']['map']['region']; ?>',
|
||||
resolution: '<?php echo $config['frontpage']['map']['resolution']; ?>',
|
||||
displayMode: 'markers',
|
||||
keepAspectRatio: 0,
|
||||
//width: 1240,
|
||||
//height: 480,
|
||||
is3D: true,
|
||||
legend: 'none',
|
||||
enableRegionInteractivity: true,
|
||||
<?php if ($config['frontpage']['map']['realworld']) { echo "\t\t datalessRegionColor: '#93CA76',"; }
|
||||
else { echo "\t\t datalessRegionColor: '#d5d5d5',"; }
|
||||
if ($config['frontpage']['map']['realworld']) { echo "\t\t backgroundColor: {fill: '#000000'},"; } ?>
|
||||
backgroundColor: {fill: 'transparent'},
|
||||
magnifyingGlass: {enable: true, zoomFactor: 5},
|
||||
colorAxis: {values: [0, 1, 2, 3], colors: ['darkgreen', 'orange', 'orangered', 'red']},
|
||||
markerOpacity: 0.75,
|
||||
sizeAxis: {minValue: 1, maxValue: 10, minSize: 10, maxSize: 40}
|
||||
};
|
||||
|
||||
var view = new google.visualization.DataView(data);
|
||||
// exclude last url column in the GeoChart
|
||||
view.setColumns([0, 1, 2, 3, 4, 5]);
|
||||
|
||||
var chart = new google.visualization.GeoChart(document.getElementById('map'));
|
||||
google.visualization.events.addListener(chart, 'ready', onReady);
|
||||
function onReady() {
|
||||
google.visualization.events.addListener(chart, 'select', gotoLocation);
|
||||
}
|
||||
function gotoLocation() {
|
||||
var selection = chart.getSelection();
|
||||
var item = selection[0];
|
||||
var url = data.getValue(item.row, 6);
|
||||
window.location = url;
|
||||
}
|
||||
chart.draw(view, options);
|
||||
}
|
||||
</script>
|
||||
259
html/includes/map/leaflet.inc.php
Normal file
259
html/includes/map/leaflet.inc.php
Normal file
@ -0,0 +1,259 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Observium
|
||||
*
|
||||
* This file is part of Observium.
|
||||
*
|
||||
* @package observium
|
||||
* @subpackage map
|
||||
* @copyright (C) 2006-2013 Adam Armstrong, (C) 2013-2019 Observium Limited
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Don't do this here, this is inside a widget!
|
||||
*
|
||||
register_html_resource('css', 'leaflet.css');
|
||||
register_html_resource('js', 'leaflet.js');
|
||||
|
||||
$ua = detect_browser();
|
||||
if ($ua['browser'] == 'MSIE' ||
|
||||
($ua['browser'] == 'Firefox' && version_compare($ua['version'], '61', '<'))) // Also for FF ESR60 and older
|
||||
{
|
||||
register_html_resource('js', 'js/compat/bluebird.min.js');
|
||||
register_html_resource('js', 'js/compat/fetch.js');
|
||||
}
|
||||
register_html_resource('js', 'leaflet-realtime.js');
|
||||
register_html_resource('css', 'MarkerCluster.css');
|
||||
register_html_resource('css', 'MarkerCluster.Default.css');
|
||||
|
||||
//register_html_resource('js', 'leaflet.markercluster.js');
|
||||
//register_html_resource('js', 'leaflet.featuregroup.subgroup');
|
||||
|
||||
//register_html_resource('js', '/geo.php');
|
||||
|
||||
*/
|
||||
|
||||
// [lat, lng], zoom
|
||||
if (is_numeric($config['frontpage']['map']['zoom']) &&
|
||||
is_numeric($config['frontpage']['map']['center']['lat']) &&
|
||||
is_numeric($config['frontpage']['map']['center']['lng']))
|
||||
{
|
||||
// Manual zoom & map center
|
||||
$leaflet_init = '[' . $config['frontpage']['map']['center']['lat'] . ', ' .
|
||||
$config['frontpage']['map']['center']['lng'] . '], ' .
|
||||
$config['frontpage']['map']['zoom'];
|
||||
$leaflet_bounds = '';
|
||||
}
|
||||
else
|
||||
{
|
||||
// Auto zoom
|
||||
$leaflet_init = '[0, -0], 2';
|
||||
$leaflet_bounds = 'map'.$vars['widget_id'].'.fitBounds(realtime.getBounds(), { padding: [30, 30] });';
|
||||
}
|
||||
|
||||
switch ($config['frontpage']['map']['tiles'])
|
||||
{
|
||||
case 'esri-worldgraycanvas':
|
||||
$leaflet_url = 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}';
|
||||
$leaflet_copy = 'Tiles © Esri — Esri, DeLorme, NAVTEQ';
|
||||
break;
|
||||
|
||||
case 'opentopomap':
|
||||
$leaflet_url = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
|
||||
$leaflet_copy
|
||||
= 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)';
|
||||
break;
|
||||
|
||||
case 'osm-mapnik':
|
||||
$leaflet_url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||||
$leaflet_copy = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
|
||||
break;
|
||||
|
||||
case 'nasa-night':
|
||||
$leaflet_url = 'https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default//GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg';
|
||||
$leaflet_copy = 'Imagery provided by GIBS, operated by <a href="https://earthdata.nasa.gov">ESDIS</a>, funding by NASA/HQ.';
|
||||
$leaflet_format = 'jpg';
|
||||
break;
|
||||
|
||||
case 'wikimedia':
|
||||
$leaflet_url = 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png';
|
||||
$leaflet_copy = '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>';
|
||||
break;
|
||||
|
||||
case 'carto-base-dark':
|
||||
case 'carto-base-light':
|
||||
case 'carto-base-auto':
|
||||
default:
|
||||
|
||||
if($config['frontpage']['map']['tiles'] == "carto-base-dark") {
|
||||
$leaflet_variant = "dark_all";
|
||||
} elseif ($config['frontpage']['map']['tiles'] == "carto-base-light") {
|
||||
$leaflet_variant = "light_all";
|
||||
} else {
|
||||
$leaflet_variant = ($config['themes'][$_SESSION['theme']]['type'] == 'dark' ? "dark_all" : "light_all");
|
||||
}
|
||||
|
||||
$leaflet_url = is_ssl() ? 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/' . $leaflet_variant . '/{z}/{x}/{y}.png' :
|
||||
'http://{s}.basemaps.cartocdn.com/' . $leaflet_variant . '/{z}/{x}/{y}.png';
|
||||
|
||||
$leaflet_hqurl = is_ssl() ? 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/' . $leaflet_variant . '/{z}/{x}/{y}@2x.png' :
|
||||
'http://{s}.basemaps.cartocdn.com/' . $leaflet_variant . '/{z}/{x}/{y}@2x.png';
|
||||
|
||||
|
||||
$leaflet_copy = 'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' .
|
||||
'© <a href="https://carto.com/attributions">CARTO</a>';
|
||||
break;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var icons = {
|
||||
ok: L.icon({
|
||||
iconUrl: 'images/svg/ok.svg',
|
||||
popupAnchor: [0, 16],
|
||||
iconSize: [<?php echo $config['frontpage']['map']['okmarkersize']; ?>, <?php echo $config['frontpage']['map']['okmarkersize']; ?>] // size of the icon
|
||||
}),
|
||||
|
||||
alert: L.icon({
|
||||
iconUrl: 'images/svg/high_priority.svg',
|
||||
popupAnchor: [0, 12],
|
||||
iconSize: [<?php echo $config['frontpage']['map']['alertmarkersize']; ?>, <?php echo $config['frontpage']['map']['alertmarkersize']; ?>] // size of the icon
|
||||
})
|
||||
};
|
||||
|
||||
var map<?php echo $vars['widget_id']; ?> = L.map('map<?php echo $vars['widget_id']; ?>'),
|
||||
realtime = L.realtime({
|
||||
url: 'geojson.php',
|
||||
crossOrigin: true,
|
||||
type: 'json',
|
||||
getFeatureId: function (feature) {
|
||||
return feature.properties.id + feature.properties.state;
|
||||
}
|
||||
}, {
|
||||
interval: 10 * 1000,
|
||||
|
||||
onEachFeature: function (feature, layer) {
|
||||
|
||||
if (feature.properties && feature.properties.popupContent) {
|
||||
layer.bindPopup(feature.properties.popupContent, {closeButton: false, offset: L.point(0, -20)});
|
||||
layer.on('mouseover', function () {
|
||||
layer.openPopup();
|
||||
});
|
||||
layer.on('mouseout', function () {
|
||||
layer.closePopup();
|
||||
});
|
||||
}
|
||||
|
||||
layer.on('click', function () {
|
||||
window.open(feature.properties.url, "_self");
|
||||
});
|
||||
|
||||
|
||||
if (feature.properties.state === "up") {
|
||||
layer.setIcon(icons['ok']);
|
||||
}
|
||||
else {
|
||||
layer.setIcon(icons['alert']);
|
||||
}
|
||||
},
|
||||
|
||||
updateFeature: function (feature, layer) {
|
||||
|
||||
if (!layer) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (feature.properties && feature.properties.popupContent) {
|
||||
layer.bindPopup(feature.properties.popupContent, {closeButton: false, offset: L.point(0, -20)});
|
||||
layer.on('mouseover', function () {
|
||||
layer.openPopup();
|
||||
});
|
||||
layer.on('mouseout', function () {
|
||||
layer.closePopup();
|
||||
});
|
||||
}
|
||||
|
||||
layer.on('click', function () {
|
||||
window.open(feature.properties.url, "_self");
|
||||
});
|
||||
|
||||
|
||||
if (feature.properties.state === "up") {
|
||||
layer.setIcon(icons['ok']);
|
||||
}
|
||||
else {
|
||||
layer.setIcon(icons['alert']);
|
||||
}
|
||||
|
||||
return layer;
|
||||
}
|
||||
|
||||
}).addTo(map<?php echo $vars['widget_id']; ?>);
|
||||
|
||||
map<?php echo $vars['widget_id']; ?>.setView(<?php echo $leaflet_init; ?>);
|
||||
|
||||
<?php
|
||||
// echo $leaflet_bounds;
|
||||
?>
|
||||
|
||||
/* disable scroll wheel by default, toggle by click on map */
|
||||
map<?php echo $vars['widget_id']; ?>.scrollWheelZoom.disable();
|
||||
map<?php echo $vars['widget_id']; ?>.on('click', function () {
|
||||
if (map<?php echo $vars['widget_id']; ?>.scrollWheelZoom.enabled()) {
|
||||
map<?php echo $vars['widget_id']; ?>.scrollWheelZoom.disable();
|
||||
} else {
|
||||
map<?php echo $vars['widget_id']; ?>.scrollWheelZoom.enable();
|
||||
}
|
||||
});
|
||||
|
||||
map<?php echo $vars['widget_id']; ?>.on('mouseover', function () {
|
||||
//console.log('STOPPING');
|
||||
realtime.stop();
|
||||
//console.log(realtime.isRunning());
|
||||
});
|
||||
|
||||
map<?php echo $vars['widget_id']; ?>.on('mouseout', function () {
|
||||
//console.log('STARTING');
|
||||
realtime.start();
|
||||
//console.log(realtime.isRunning());
|
||||
});
|
||||
|
||||
<?php if (isset($leaflet_hqurl))
|
||||
{
|
||||
echo "var tileUrl = (L.Browser.retina ? '$leaflet_hqurl' : '$leaflet_url');";
|
||||
}
|
||||
else
|
||||
{
|
||||
echo "var tileUrl = '$leaflet_url';";
|
||||
} ?>
|
||||
var layer = L.tileLayer(tileUrl, {
|
||||
detectRetina: true,
|
||||
tilematrixset: 'GoogleMapsCompatible_Level',
|
||||
<?php if (isset($leaflet_format)) {
|
||||
echo "format: '" . $leaflet_format . "',";
|
||||
} ?>
|
||||
attribution: '<?php echo $leaflet_copy; ?>'
|
||||
}).addTo(map<?php echo $vars['widget_id']; ?>);
|
||||
|
||||
|
||||
realtime.on('update', function () {
|
||||
|
||||
if(realtime.isRunning())
|
||||
{
|
||||
<?php echo $leaflet_bounds; ?>
|
||||
//map.fitBounds(realtime.getBounds(), {maxZoom: 3});
|
||||
//console.log('REBOUNDING');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
|
||||
// EOF
|
||||
Reference in New Issue
Block a user