1001 lines
35 KiB
Plaintext
1001 lines
35 KiB
Plaintext
<%@ Page Title="" Language="C#" MasterPageFile="~/Standard.Master" AutoEventWireup="true" CodeBehind="MapTypC.aspx.cs" Inherits="TALAS_V5.MessagesMap.MapTypC" %>
|
|
|
|
<%@ Register assembly="DevExpress.Web.v19.2, Version=19.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
|
|
|
|
<asp:Content ID="NaviContent" ContentPlaceHolderID="NaviContent" runat="server">
|
|
|
|
</asp:Content>
|
|
|
|
|
|
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server" >
|
|
|
|
<link rel="stylesheet" href="../TileMap/css/leaflet.css?v=054" />
|
|
<link rel="stylesheet" href="../TileMap/css/foundation.css?v=054">
|
|
<link rel="stylesheet" href="../TileMap/css/app.css?v=054">
|
|
<link rel="stylesheet" href="../TileMap/css/foundation-icons.css?v=054">
|
|
<link rel="stylesheet" href="../TileMap/css/leaflet.contextmenu.min.css?v=054">
|
|
|
|
<script src="../TileMap/js/vendor/jquery.js?v=054"></script>
|
|
<script src="../TileMap/js/leaflet/leaflet.js?v=054"></script>
|
|
<script src="../TileMap/js/vendor/oms.min.js"></script>
|
|
<script src="../TileMap/js/vendor/leaflet.contextmenu.min.js"></script>
|
|
<!--<script src="../TileMap/js/vendor/gktowgs.js?v=054"></script>-->
|
|
<script src="../TileMap/js/config.js?v=053"></script>
|
|
<script src="../TileMap/js/icons.js?v=053"></script>
|
|
<script src="../TileMap/js/vendor/bundle.js?v=054"></script>
|
|
|
|
<style type="text/css">
|
|
#map{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div id="map" style="z-index: 1;position:absolute !important;top:36px;left:37px;" ></div>
|
|
|
|
<script>
|
|
var toggle = false;
|
|
var toggleTalas = false;
|
|
var osm = L.tileLayer('../TileMap/mapTiles/{z}/{x}/{y}.png', {
|
|
minZoom: 4,
|
|
maxZoom: 15,
|
|
tms: false,
|
|
attribution: 'Generated by Littwin Systemtechnik GmbH & Co KG'
|
|
});
|
|
|
|
/*var Esri_WorldImagery = L.tileLayer('../TileMap/geotiles/{z}/{y}/{x}.png', {
|
|
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
|
|
minZoom: 4,
|
|
maxZoom: 14
|
|
});*/
|
|
|
|
/*var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
|
|
minZoom: 4,
|
|
maxZoom: 20
|
|
});*/
|
|
|
|
var Esri_WorldImagery = L.tileLayer('https://api.mapbox.com/styles/v1/andreastholen/cloo8nm8v00eq01nz2hpn5ygy/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYW5kcmVhc3Rob2xlbiIsImEiOiJjbG9waWhjZDQwYzlrMnFwNWY0czhtM3luIn0.wT7hut8ufynHJc0bErMyvA', {
|
|
attribution: 'MapBox',
|
|
minZoom: 4,
|
|
maxZoom: 20
|
|
});
|
|
|
|
var CartoDB_PositronNoLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
|
subdomains: 'abcd',
|
|
maxZoom: 20
|
|
});
|
|
|
|
var TALAS = new L.layerGroup();
|
|
var ECI = new L.layerGroup();
|
|
var ULAF = new L.layerGroup();
|
|
var GSM = new L.layerGroup();
|
|
var Cisco = new L.layerGroup();
|
|
var WAGO = new L.layerGroup();
|
|
var Siemens = new L.layerGroup();
|
|
var OTDR = new L.layerGroup();
|
|
var WDM = new L.layerGroup();
|
|
var GMA = new L.layerGroup();
|
|
var TALASICL = new L.layerGroup();
|
|
|
|
//var map = L.map('map').setView([51.41321407879154, 7.739617925303934], 8);
|
|
ll = new L.LatLng(51.41321407879154, 7.739617925303934),
|
|
map = L.map('map', {
|
|
center: ll,
|
|
zoom: 8,
|
|
layers: [osm,TALAS,ECI,ULAF,GSM,Cisco,WAGO,Siemens,OTDR,WDM,GMA,TALASICL],
|
|
contextmenu: true,
|
|
contextmenuWidth: 160,
|
|
contextmenuItems: [{
|
|
text: 'Station öffnen (Tab)',
|
|
icon: '../TileMap/img/screen_new.png',
|
|
callback: newLink
|
|
},
|
|
{
|
|
text: 'Station öffnen',
|
|
icon: '../TileMap/img/screen_same.png',
|
|
callback: sameLink
|
|
}, '-', {
|
|
text: 'Reinzoomen',
|
|
icon: '../TileMap/img/zoom_in.png',
|
|
callback: zoomIn
|
|
}, {
|
|
text: 'Rauszoomen',
|
|
icon: '../TileMap/img/zoom_out.png',
|
|
callback: zoomOut
|
|
}, {
|
|
text: 'Hier zentrieren',
|
|
icon: '../TileMap/img/center_focus.png',
|
|
callback: centerMap
|
|
}, '-', {
|
|
text: 'Koordinaten',
|
|
icon: '../TileMap/img/not_listed_location.png',
|
|
callback: showCoordinates
|
|
}, {
|
|
text: 'Get Data to Console',
|
|
icon: '../TileMap/img/not_listed_location.png',
|
|
callback: showData
|
|
}/*, {
|
|
text: 'Show Cisco',
|
|
icon: '../TileMap/img/not_listed_location.png',
|
|
callback: showCisco
|
|
}, {
|
|
text: 'Hide Cisco',
|
|
icon: '../TileMap/img/not_listed_location.png',
|
|
callback: hideCisco
|
|
}, {
|
|
text: 'Show GMA',
|
|
icon: '../TileMap/img/not_listed_location.png',
|
|
callback: showGSM
|
|
}, {
|
|
text: 'Hide GMA',
|
|
icon: '../TileMap/img/not_listed_location.png',
|
|
callback: hideGSM
|
|
}*/]
|
|
});
|
|
|
|
function showCoordinates(e) {
|
|
alert("Breitengrad: " + e.latlng.lat + "\nLängengrad: " + e.latlng.lng);
|
|
}
|
|
|
|
function newLink(e) {
|
|
//alert("Neues Fenster: " + e.relatedTarget.options.test);
|
|
window.open("../devices/" + e.relatedTarget.options.test, '_blank').focus();
|
|
|
|
}
|
|
|
|
function sameLink(e) {
|
|
//alert(e.relatedTarget.options.test);
|
|
window.open("../devices/" + e.relatedTarget.options.test, '_parent').focus();
|
|
}
|
|
|
|
function showData(e) {
|
|
console.log(e);
|
|
}
|
|
|
|
function showSatMap() {
|
|
map.removeLayer(osm);
|
|
map.addLayer(Esri_WorldImagery);
|
|
map.removeLayer(CartoDB_PositronNoLabels);
|
|
document.getElementById("satSheet").style.opacity = "0.5";
|
|
document.getElementById("whiteSheet").style.opacity = "1";
|
|
document.getElementById("mapSheet").style.opacity = "1";
|
|
}
|
|
|
|
function showWhiteMap() {
|
|
map.removeLayer(osm);
|
|
map.removeLayer(Esri_WorldImagery);
|
|
map.addLayer(CartoDB_PositronNoLabels);
|
|
document.getElementById("whiteSheet").style.opacity = "0.5";
|
|
document.getElementById("satSheet").style.opacity = "1";
|
|
document.getElementById("mapSheet").style.opacity = "1";
|
|
}
|
|
|
|
function showMap() {
|
|
map.addLayer(osm);
|
|
map.removeLayer(Esri_WorldImagery);
|
|
map.removeLayer(CartoDB_PositronNoLabels);
|
|
document.getElementById("mapSheet").style.opacity = "0.5";
|
|
document.getElementById("whiteSheet").style.opacity = "1";
|
|
document.getElementById("satSheet").style.opacity = "1";
|
|
}
|
|
|
|
function centerMap(e) {
|
|
//map.removeLayer(TALAS); ////////////////////////////////////////////////////////////////////
|
|
map.panTo(e.latlng);
|
|
}
|
|
|
|
function zoomIn(e) {
|
|
map.flyTo(e.latlng, 12);
|
|
}
|
|
|
|
function zoomOut(e) {
|
|
//map.addLayer(TALAS); ///////////////////////////////////////////////////////////////
|
|
//map.flyTo(e.latlng,8);
|
|
fly();
|
|
}
|
|
|
|
function showTalas() {
|
|
map.addLayer(TALAS); ////////////////////////////////////////////////////////////////////
|
|
loadData();
|
|
}
|
|
|
|
function hideTalas() {
|
|
map.removeLayer(TALAS); ////////////////////////////////////////////////////////////////////
|
|
loadData();
|
|
}
|
|
|
|
function showCisco() {
|
|
map.addLayer(Cisco); ////////////////////////////////////////////////////////////////////
|
|
loadData();
|
|
}
|
|
|
|
function hideCisco() {
|
|
map.removeLayer(Cisco); ////////////////////////////////////////////////////////////////////
|
|
loadData();
|
|
}
|
|
|
|
function showGSM() {
|
|
map.addLayer(GMA); ////////////////////////////////////////////////////////////////////
|
|
loadData();
|
|
}
|
|
|
|
function hideGSM() {
|
|
map.removeLayer(GMA); ////////////////////////////////////////////////////////////////////
|
|
loadData();
|
|
}
|
|
|
|
var oms = new OverlappingMarkerSpiderfier(map);
|
|
|
|
/*oms.addListener('format', function(marker, status) {
|
|
var iconURL = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED ? console.log :
|
|
status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE ? 'marker-plus.svg' :
|
|
status == OverlappingMarkerSpiderfier.markerStatus.UNSPIDERFIABLE ? 'marker.svg' :
|
|
null;
|
|
marker.setIcon({
|
|
url: iconURL,
|
|
scaledSize: new google.maps.Size(23, 32); // makes SVG icons work in IE
|
|
});
|
|
});*/
|
|
|
|
var popup = new L.Popup();
|
|
oms.addListener('click', function (marker) {
|
|
popup.setContent(marker.desc);
|
|
popup.setLatLng(marker.getLatLng());
|
|
//map.openPopup(popup);
|
|
});
|
|
|
|
var dataStatic;
|
|
var dataStaticlength;
|
|
var dataStatus;
|
|
var dataStatuslength;
|
|
var dataSystem;
|
|
var dataSystemlength;
|
|
var notdataStatic;
|
|
var notdataStaticlength;
|
|
var notdataStatus;
|
|
var notdataStatuslength;
|
|
var dataMeasures = [];
|
|
var dataMeasureslength = [];
|
|
let systemsListing = [];
|
|
let systems = [];
|
|
const filtersystems = ["GSM Modem", "GMA", "Cisco"];
|
|
|
|
$(document).ready(() => {
|
|
$.when(
|
|
|
|
$.getJSON(mapDataStaticUrl, function (dataD) {
|
|
dataStatic = dataD.Points;
|
|
dataStaticlength = dataStatic.length;
|
|
}),
|
|
$.getJSON(mapDataStatusUrl, function (dataS) {
|
|
dataStatus = dataS.Statis;
|
|
dataStatuslength = dataStatus.length;
|
|
}),
|
|
$.getJSON(mapDataIconUrl, function (dataI) {
|
|
dataIcons = dataI.List;
|
|
dataIconslength = dataIcons.length;
|
|
}),
|
|
$.getJSON(mapDataSystemUrl, function (dataSy) {
|
|
dataSystem = dataSy.Systems;
|
|
dataSystemlength = dataSystem.length;
|
|
}),
|
|
$.getJSON(mapDataMeasures, function (dataM) {
|
|
dataMeasures = dataM.Statis;
|
|
dataMeasureslength = dataMeasures.length;
|
|
})
|
|
|
|
).then(function () {
|
|
if (dataStatic) {
|
|
console.log("%cMAP| Statische Daten geladen", 'color: green');
|
|
}
|
|
else {
|
|
console.log("%cMAP| Fehler beim Laden der statischen Daten", 'color: red');
|
|
}
|
|
if (dataStatus) {
|
|
console.log("%cMAP| Status Daten geladen", 'color: green');
|
|
loadData();
|
|
getDataMenu();
|
|
}
|
|
else {
|
|
console.log("%cMAP| Fehler beim Laden der status Daten", 'color: red');
|
|
}
|
|
if (dataIcons) {
|
|
console.log("%cMAP| Icons geladen", 'color: green');
|
|
}
|
|
else {
|
|
console.log("%cMAP| Fehler beim Laden der Icons", 'color: red');
|
|
}
|
|
if (dataMeasures) {
|
|
console.log("%cMAP| Messwerte geladen", 'color: green');
|
|
}
|
|
else {
|
|
console.log("%cMAP| Fehler beim Laden der Messwerte", 'color: red');
|
|
}
|
|
if (dataSystem) {
|
|
console.log("%cMAP| System Liste geladen", 'color: green');
|
|
console.log("%cMAP| " + dataSystemlength + " Systeme gefunden", 'color: green');
|
|
var systemHTMLFields = [];
|
|
var field = "";
|
|
/*for (var i = 0; i < dataSystemlength; i++) {
|
|
var gisSystem = dataSystem[i];
|
|
var systemListing = gisSystem.Name; // Area_Name
|
|
systemsListing.push(systemListing);
|
|
field = field+'<div id="div-'+gisSystem.Name+'"><input name="'+gisSystem.Name+'" id="box-'+gisSystem.Name+'" type="checkbox" checked><label for="'+gisSystem.Name+'checkbox"><b style="font-size:0.75rem;font-weight:100;">'+gisSystem.Name+'</b></label></div>';
|
|
}*/
|
|
/*for (var i = 0; i < filtersystems.length; i++) {
|
|
field = field+'<div id="div-'+filtersystems[i]+'"><input name="'+filtersystems[i]+'" id="box-'+filtersystems[i]+'" type="checkbox" checked><label for="'+filtersystems[i]+'checkbox"><b style="font-size:0.75rem;font-weight:100;">'+filtersystems[i]+'</b></label></div>';
|
|
}
|
|
field = field+'<div style="margin-bottom:15px;"></div>';
|
|
document.getElementById("systemfilter").innerHTML = field;
|
|
console.log("%cMAP| Systeme indexiert: %c"+systemsListing,'color: green', 'color:grey'); */
|
|
}
|
|
else {
|
|
console.log("%cMAP| Fehler beim Laden der System Liste", 'color: red');
|
|
}
|
|
});
|
|
});
|
|
|
|
function getJSONData() {
|
|
$(document).ready(() => {
|
|
$.when(
|
|
$.getJSON(mapDataStaticUrl, function (dataD) {
|
|
dataStatic = dataD.Points;
|
|
dataStaticlength = dataStatic.length;
|
|
}),
|
|
$.getJSON(mapDataStatusUrl, function (dataS) {
|
|
dataStatus = dataS.Statis;
|
|
dataStatuslength = dataStatus.length;
|
|
}),
|
|
$.getJSON(mapDataIconUrl, function (dataI) {
|
|
dataIcons = dataI.List;
|
|
dataIconslength = dataIcons.length;
|
|
}),
|
|
$.getJSON(mapDataMeasures, function (dataM) {
|
|
dataMeasures = dataM.Statis;
|
|
dataMeasureslength = dataMeasures.length;
|
|
})
|
|
).then(function () {
|
|
if (dataStatic) {
|
|
console.log("%cMAP| Statische Daten geladen", 'color: green');
|
|
}
|
|
else {
|
|
console.log("%cMAP| Fehler beim Laden der statischen Daten", 'color: red');
|
|
}
|
|
if (dataStatus) {
|
|
console.log("%cMAP| Status Daten geladen", 'color: green');
|
|
}
|
|
else {
|
|
console.log("%cMAP| Fehler beim Laden der status Daten", 'color: red');
|
|
}
|
|
if (dataIcons) {
|
|
console.log("%cMAP| Icons geladen", 'color: green');
|
|
}
|
|
else {
|
|
console.log("%cMAP| Fehler beim Laden der Icons", 'color: red');
|
|
}
|
|
if (dataMeasures) {
|
|
console.log("%cMAP| Messwerte geladen", 'color: green');
|
|
}
|
|
else {
|
|
console.log("%cMAP| Fehler beim Laden der Messwerte", 'color: red');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Add Object Du save CircleIds
|
|
var markers = [];
|
|
var setLoadTemp;
|
|
var idsListing = [];
|
|
var idsListingURL = [];
|
|
let geoDataListlat = [];
|
|
let geoDataListlng = [];
|
|
let geoDataID = [];
|
|
let geoDataIdLD = [];
|
|
let geoDataIdLocation = [];
|
|
let geoDataListComb = [];
|
|
let uniqueGMA = [];
|
|
let uniqueGMAFilter = [];
|
|
|
|
|
|
// Loop through the data
|
|
function loadData() {
|
|
var clicked = [];
|
|
// Erstes Setzen der Pins
|
|
if (setLoadTemp == null) {
|
|
console.log("%cMAP| Marker werden fixiert", 'color: green');
|
|
for (var i = 0; i < dataStaticlength; i++) {
|
|
var gisStatics = dataStatic[i];
|
|
|
|
// i.O. Marker
|
|
markers[gisStatics.IdLD] = L.marker([gisStatics.X, gisStatics.Y],
|
|
{
|
|
icon: greenMarkerBox,
|
|
test: gisStatics.Link,
|
|
device: gisStatics.Device,
|
|
jsonicon: gisStatics.Icon,
|
|
system: gisStatics.System, ///////////////////////////////////////////////////////
|
|
IdLD: gisStatics.IdLD,
|
|
IdLocation: gisStatics.IdLocation,
|
|
contextmenu: true,
|
|
|
|
}).addTo(map);
|
|
let markerOKIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/marker-icon-'+gisStatics.Icon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
//console.log(markers[gisStatics.IdLD]._latlng);
|
|
geoDataListlat.push(markers[gisStatics.IdLD]._latlng.lat);
|
|
geoDataListlng.push(markers[gisStatics.IdLD]._latlng.lng);
|
|
geoDataID.push(markers[gisStatics.IdLD]._leaflet_id);
|
|
geoDataIdLD.push(markers[gisStatics.IdLD].options.IdLD);
|
|
geoDataIdLocation.push(markers[gisStatics.IdLD].options.IdLocation);
|
|
|
|
markers[gisStatics.IdLD].setIcon(markerOKIcon);
|
|
let markerTemp = markers[gisStatics.IdLD];
|
|
|
|
oms.addMarker(markers[gisStatics.IdLD]);
|
|
|
|
markers[gisStatics.IdLD].setZIndexOffset(9995);
|
|
//console.log(markers[gisStatics.IdLD]);
|
|
//console.log("bingo");
|
|
|
|
//OverlappingMarkerSpiderfier.markers[gisStatics.IdLD].SPIDERFIED ? console.log("Is Spidered ") : console.log("Not Spidered ");
|
|
let markerVar = markers[gisStatics.IdLD].options.jsonicon;
|
|
|
|
///////////////////////////////// Layer Filter
|
|
if (markers[gisStatics.IdLD].options.system === 1) {
|
|
markers[gisStatics.IdLD].addTo(TALAS);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 2) {
|
|
markers[gisStatics.IdLD].addTo(ECI);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 3) {
|
|
markers[gisStatics.IdLD].addTo(ULAF);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 4) {
|
|
markers[gisStatics.IdLD].addTo(TALAS); // Fehlt in der Liste
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 5) {
|
|
markers[gisStatics.IdLD].addTo(GSM);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 6) {
|
|
markers[gisStatics.IdLD].addTo(Cisco);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 7) {
|
|
markers[gisStatics.IdLD].addTo(WAGO);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 8) {
|
|
markers[gisStatics.IdLD].addTo(Siemens);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 9) {
|
|
markers[gisStatics.IdLD].addTo(OTDR);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 10) {
|
|
markers[gisStatics.IdLD].addTo(WDM);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 11) {
|
|
markers[gisStatics.IdLD].addTo(GMA);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 100) {
|
|
markers[gisStatics.IdLD].addTo(TALASICL);
|
|
}
|
|
|
|
var idListing = ([gisStatics.IdLD, markers[gisStatics.IdLD]._leaflet_id]);
|
|
var idListingURL = ([gisStatics.Link, markers[gisStatics.IdLD]._leaflet_id]);
|
|
idsListing.push(idListing);
|
|
idsListingURL.push(idListingURL);
|
|
markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )");
|
|
|
|
markers[gisStatics.IdLD].on('mouseover', function (e) {
|
|
this.openPopup();
|
|
});
|
|
markers[gisStatics.IdLD].on('mouseout', function (e) {
|
|
this.closePopup();
|
|
});
|
|
|
|
// Fehlermarker
|
|
let meldungen = [];
|
|
for (var istatus = 0; istatus < dataStatuslength; istatus++) {
|
|
var gisStatus = dataStatus[istatus];
|
|
if (gisStatus.IdLD == gisStatics.IdLD) {
|
|
//console.log(dataStatuslength);
|
|
//console.log(markers[gisStatics.IdLD]);
|
|
//console.log("Fehlerfall: "+gisStatus.IdLD);
|
|
if (gisStatus.Na === "critical") {
|
|
//console.log(gisStatus.Icon);
|
|
let markerIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/critical-marker-icon-'+markers[gisStatics.IdLD].options.jsonicon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
markers[gisStatics.IdLD].setIcon(markerIcon);
|
|
markers[gisStatics.IdLD].setZIndexOffset(10000);
|
|
}
|
|
if (gisStatus.Na === "system") {
|
|
|
|
let markerIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/system-marker-icon-'+markers[gisStatics.IdLD].options.jsonicon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
markers[gisStatics.IdLD].setIcon(markerIcon);
|
|
markers[gisStatics.IdLD].setZIndexOffset(9997);
|
|
}
|
|
if (gisStatus.Na === "major") {
|
|
|
|
let markerIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/major-marker-icon-'+markers[gisStatics.IdLD].options.jsonicon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
markers[gisStatics.IdLD].setIcon(markerIcon);
|
|
markers[gisStatics.IdLD].setZIndexOffset(9999);
|
|
}
|
|
if (gisStatus.Na === "minor") {
|
|
|
|
let markerIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/minor-marker-icon-'+markers[gisStatics.IdLD].options.jsonicon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
markers[gisStatics.IdLD].setIcon(markerIcon);
|
|
markers[gisStatics.IdLD].setZIndexOffset(9998);
|
|
}
|
|
|
|
let idldTemp = gisStatus.IdLD;
|
|
let idldlast = "";
|
|
var meldung = "";
|
|
|
|
if (idldlast = idldTemp) {
|
|
meldung = "<b style='font-size:0.75rem;'><i style='color:" + gisStatus.Co + ";' class='fi-stop'></i> " + gisStatus.Me + "</b><b style='color:" + gisStatus.Co + ";font-size:0.5rem;'> (" + (gisStatus.Na).toUpperCase() + ")</b><br />";
|
|
meldungen.push(meldung);
|
|
idldlast = gisStatus.IdLD;
|
|
//console.log(meldungen+" - "+idldTemp+" - "+idldlast);
|
|
}
|
|
else {
|
|
var meldung = "<b style='font-size:0.75rem;'>" + gisStatus.Me + "</b><b style='color:" + gisStatus.Co + ";font-size:0.5rem;'> (" + (gisStatus.Na).toUpperCase() + ")</b><br />";
|
|
meldungen.push(meldung);
|
|
idldlast = gisStatus.IdLD;
|
|
console.log("NOP");
|
|
}
|
|
|
|
|
|
markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )<br /><br />"+meldungen.reverse().join(''));
|
|
markers[gisStatics.IdLD].bounce();
|
|
}
|
|
else {
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// GeoDaten mit Leaflet-ID und IdLD verbinden
|
|
for (let index = 0; index < geoDataListlat.length; index++) {
|
|
geoDataListComb[index] = geoDataListlat[index] + "," + geoDataListlng[index] + "," + geoDataID[index] + "," + geoDataIdLD[index] + "," + geoDataIdLocation[index];
|
|
console.log("Station Nr.: "+index+" Geo Daten: "+geoDataListComb[index]);
|
|
}
|
|
|
|
// Wenn idLocation gleich dann IdLDs zusammenfassen
|
|
|
|
// Doppelte IdLDs aussortieren und mit Gruppenzeichen versehen
|
|
let uniqueIdLDsGeo = [];
|
|
let uniqueIdLDsData = [];
|
|
let doubleIdLDsGeo = [];
|
|
let geoGroupIdLDs = [];
|
|
let geoGroupIdLDsfiltert = [];
|
|
|
|
geoDataListComb.forEach((c) => {
|
|
const myArray = c.split(",");
|
|
let el = myArray[3];
|
|
let ele = myArray[4];
|
|
|
|
geoGroupIdLDs[ele] += ","+ele+","+el;
|
|
|
|
if (!uniqueIdLDsGeo.includes(myArray[0] + myArray[1])) {
|
|
uniqueIdLDsGeo.push(myArray[0] + myArray[1]);
|
|
uniqueIdLDsData.push(myArray[0] + "," + myArray[1] + "," + myArray[2] + "," + myArray[3]+ "," + myArray[4]);
|
|
//console.log(myArray[3]);
|
|
}
|
|
else {
|
|
doubleIdLDsGeo.push(myArray[0] + myArray[1]);
|
|
//console.log("Double:" +myArray[3]);
|
|
L.marker([myArray[0], myArray[1]],
|
|
{
|
|
icon: markerGroup
|
|
|
|
}).addTo(map);
|
|
}
|
|
});
|
|
|
|
//console.log(geoGroupIdLDs);
|
|
|
|
for (let index = 0; index < geoGroupIdLDs.length; index++) {
|
|
try {
|
|
const element = geoGroupIdLDs[index].split(",");
|
|
if(element.length == 3){
|
|
geoGroupIdLDsfiltert.push(element[1]+","+element[2]);
|
|
}
|
|
|
|
if(element.length == 5){
|
|
geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]);
|
|
}
|
|
|
|
if(element.length == 7){
|
|
geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]+","+element[6]);
|
|
}
|
|
if(element.length == 9){
|
|
geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]+","+element[6]+","+element[8]);
|
|
}
|
|
if(element.length == 11){
|
|
geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]+","+element[6]+","+element[8]+","+element[10]);
|
|
}
|
|
if(element.length == 13){
|
|
geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]+","+element[6]+","+element[8]+","+element[10]+","+element[12]);
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Tooltips an die Stationen legen
|
|
console.log(geoGroupIdLDsfiltert);
|
|
console.log(geoDataIdLD);
|
|
|
|
let Tooltip = [];
|
|
|
|
for (let index = 0; index < uniqueIdLDsData.length; index++) {
|
|
let element = uniqueIdLDsData[index].split(",");
|
|
let lat = element[0];
|
|
let lng = element[1];
|
|
let ID = element[2];
|
|
let IdLD = element[3];
|
|
let LocID = element[4];
|
|
|
|
Tooltip[LocID] = L.marker([lat, lng], { icon: invisibleMarker }).bindTooltip('<div id="tip-' + LocID + '">'
|
|
+ '<div id="value1-' + LocID + '" style="font-weight:700;color:blue">---</div>'
|
|
+ '<div id="value2-' + LocID + '" style="font-weight:700;color:red">---</div>'
|
|
+ '<div id="value3-' + LocID + '" style="font-weight:700;color:#ECC5C0">---</div>'
|
|
+ '<div id="value4-' + LocID + '" style="font-weight:700;color:green">---</div>'
|
|
+ '</div>', { permanent: true, direction: "right", opacity: 0, offset: L.point({ x: 10, y: 0 }) }).openTooltip().addTo(GMA);
|
|
}
|
|
// console.log(dataMeasures);
|
|
|
|
for (let index = 0; index < dataMeasures.length; index++) {
|
|
let el = dataMeasures[index];
|
|
let shortname = el.Na;
|
|
//console.log(dataMeasures.Na);
|
|
if (el.Na == "LT") {
|
|
//console.log("FBT found!"+el.IdLD);
|
|
try {
|
|
Tooltip[el.IdL].getTooltip().setOpacity(0.8);
|
|
document.getElementById("value1-"+el.IdL).innerHTML = shortname +": "+ el.Val +" "+ el.Unit;
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
if (el.Na == "FBT") {
|
|
try {
|
|
Tooltip[el.IdL].getTooltip().setOpacity(0.8);
|
|
document.getElementById("value2-"+el.IdL).innerHTML = shortname +": "+ el.Val +" "+ el.Unit;
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
if (el.Na == "GT") {
|
|
try {
|
|
Tooltip[el.IdL].getTooltip().setOpacity(0.8);
|
|
document.getElementById("value3-"+el.IdL).innerHTML = shortname +": "+ el.Val +" "+ el.Unit;
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
if (el.Na == "RLF") {
|
|
try {
|
|
Tooltip[el.IdL].getTooltip().setOpacity(0.8);
|
|
document.getElementById("value4-"+el.IdL).innerHTML = shortname +": "+ el.Val +" "+ el.Unit;
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
setLoadTemp = true;
|
|
}
|
|
else {
|
|
// Update der Pins
|
|
console.log("%cMAP| -UPDATE BEGINN-", 'color: grey;font-weight:700;');
|
|
console.log("%cMAP| Update der Marker", 'color: green');
|
|
getJSONData();
|
|
|
|
for (var i = 0; i < dataStaticlength; i++) {
|
|
var gisStatics = dataStatic[i];
|
|
// i.O. Marker
|
|
let markerOKIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/marker-icon-'+gisStatics.Icon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
try {
|
|
markers[gisStatics.IdLD].setIcon(markerOKIcon);
|
|
} catch (err) {
|
|
|
|
}
|
|
|
|
markers[gisStatics.IdLD].setZIndexOffset(9995);
|
|
markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )");
|
|
markers[gisStatics.IdLD].stopBouncing();
|
|
//console.log("Marker :"+markers[gisStatics.IdLD].options.jsonicon);
|
|
let markerVar = markers[gisStatics.IdLD].options.jsonicon;
|
|
|
|
// Fehlermarker
|
|
meldungen = [];
|
|
//console.log(meldungen);
|
|
for (var istatus = 0; istatus < dataStatuslength; istatus++) {
|
|
var gisStatus = dataStatus[istatus];
|
|
if (gisStatus.IdLD == gisStatics.IdLD) {
|
|
//console.log("Fehlerfall: "+gisStatus.IdLD);
|
|
if (gisStatus.Na === "critical") {
|
|
|
|
let markerIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/critical-marker-icon-'+markers[gisStatics.IdLD].options.jsonicon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
try {
|
|
markers[gisStatics.IdLD].setIcon(markerIcon);
|
|
markers[gisStatics.IdLD].setZIndexOffset(10000);
|
|
} catch (err) {
|
|
|
|
}
|
|
|
|
}
|
|
if (gisStatus.Na === "system") {
|
|
|
|
let markerIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/system-marker-icon-'+markers[gisStatics.IdLD].options.jsonicon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
try {
|
|
markers[gisStatics.IdLD].setIcon(markerIcon);
|
|
markers[gisStatics.IdLD].setZIndexOffset(9997);
|
|
} catch (err) {
|
|
|
|
}
|
|
}
|
|
if (gisStatus.Na === "major") {
|
|
|
|
let markerIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/major-marker-icon-'+markers[gisStatics.IdLD].options.jsonicon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
try {
|
|
markers[gisStatics.IdLD].setIcon(markerIcon);
|
|
markers[gisStatics.IdLD].setZIndexOffset(9999);
|
|
} catch (err) {
|
|
|
|
}
|
|
}
|
|
if (gisStatus.Na === "minor") {
|
|
|
|
let markerIcon = L.icon({
|
|
iconUrl: '../TileMap/img/icons/minor-marker-icon-'+markers[gisStatics.IdLD].options.jsonicon+'.png',
|
|
iconSize: [26, 41], // Größe
|
|
iconAnchor: [13, 41], // Ankerpunkt
|
|
popupAnchor: [0, -36] // PopUp Anker
|
|
});
|
|
try {
|
|
markers[gisStatics.IdLD].setIcon(markerIcon);
|
|
markers[gisStatics.IdLD].setZIndexOffset(9998);
|
|
} catch (err) {
|
|
|
|
}
|
|
}
|
|
|
|
idldTemp = gisStatus.IdLD;
|
|
idldlast = "";
|
|
meldung = "";
|
|
|
|
if (idldlast = idldTemp) {
|
|
meldung = "<b style='font-size:0.75rem;'><i style='color:" + gisStatus.Co + ";' class='fi-stop'></i> " + gisStatus.Me + "</b><b style='color:" + gisStatus.Co + ";font-size:0.5rem;'> (" + (gisStatus.Na).toUpperCase() + ")</b><br />";
|
|
meldungen.push(meldung);
|
|
idldlast = gisStatus.IdLD;
|
|
//console.log(meldungen+" - "+idldTemp+" - "+idldlast);
|
|
}
|
|
else {
|
|
var meldung = "<b style='font-size:0.75rem;'>" + gisStatus.Me + "</b><b style='color:" + gisStatus.Co + ";font-size:0.5rem;'> (" + (gisStatus.Na).toUpperCase() + ")</b><br />";
|
|
meldungen.push(meldung);
|
|
idldlast = gisStatus.IdLD;
|
|
console.log("NOP");
|
|
}
|
|
|
|
markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )<br /><br />" + meldungen.reverse().join(''));
|
|
//markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )<br /><br />"+meldung);
|
|
|
|
}
|
|
else {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
for (let index = 0; index < dataMeasures.length; index++) {
|
|
let el = dataMeasures[index];
|
|
let shortname = el.Na+" : ";
|
|
//console.log(dataMeasures.Na);
|
|
|
|
if (el.Na == "LT") {
|
|
//console.log("FBT found!"+el.IdLD);
|
|
try {
|
|
document.getElementById("value1-"+el.IdL).innerHTML = shortname + el.Val +" "+ el.Unit;
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
if (el.Na == "FBT") {
|
|
try {
|
|
document.getElementById("value2-"+el.IdL).innerHTML = shortname + el.Val +" "+ el.Unit;
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
if (el.Na == "GT") {
|
|
try {
|
|
document.getElementById("value3-"+el.IdL).innerHTML = shortname + el.Val +" "+ el.Unit;
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
if (el.Na == "RLF") {
|
|
try {
|
|
document.getElementById("value4-"+el.IdL).innerHTML = shortname + el.Val +" "+ el.Unit;
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
setTimeout(loadData, updateIntervall);
|
|
}
|
|
|
|
var marker = markers[1866];
|
|
//console.log(marker);
|
|
|
|
function fly(stationValue) {
|
|
|
|
var x = 51.41321407879154;
|
|
var y = 7.739617925303934;
|
|
var zoom = 14;
|
|
|
|
for (var i = 0; i < dataStaticlength; i++) {
|
|
var gisStatics = dataStatic[i];
|
|
if (stationValue === gisStatics.Area_Name) {
|
|
//console.log(gisStatics.X+","+gisStatics.Y);
|
|
x = gisStatics.X;
|
|
y = gisStatics.Y;
|
|
}
|
|
}
|
|
if (y === 7.739617925303934) {
|
|
zoom = 8;
|
|
}
|
|
map.flyTo([x, y], zoom);
|
|
var popup = new L.Popup();
|
|
oms.addListener('click', function (marker) {
|
|
popup.setContent(marker.desc);
|
|
popup.setLatLng(marker.getLatLng());
|
|
map.openPopup(popup);
|
|
});
|
|
|
|
for (var i = 0; i < window.mapData.length; i++) {
|
|
var datum = window.mapData[i];
|
|
var loc = new L.LatLng(datum.lat, datum.lon);
|
|
var marker = new L.Marker(loc);
|
|
marker.desc = datum.d;
|
|
map.addLayer(marker);
|
|
oms.addMarker(marker); // <-- here
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
<!--Overlay-->
|
|
<div id="mainDataSheet" class="standardSideMenu" style="position:absolute;top:50px;right:25px;width:15%;min-width:300px;z-index:1000;">
|
|
<div class="card"
|
|
style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
|
|
|
|
<div class="title-bar" style="border-bottom:1px solid #D6D8DA">
|
|
<div class="title-bar-left" onmouseover="" style="cursor: move;">
|
|
<form>
|
|
<select id="stationListing" style="margin:0 0 0 0 !important;width:100%;border:none;">
|
|
<option>Station wählen</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
<div class="title-bar-right">
|
|
<a><i class="fi-magnifying-glass"
|
|
style="color:#333333;font-size:1rem;padding-right:10px;padding-left:3px;border-right:1px solid #D6D8DA"
|
|
title="Suchen" onclick='fly(document.getElementById("stationListing").value)'></i></a>
|
|
<a><i class="fi-filter" style="color:#333333;font-size:1rem;padding-right:10px;padding-left:3px;border-right:1px solid #D6D8DA" title="Filter für die Geräte"></i></a>
|
|
<a><i class="fi-arrows-out"
|
|
style="color:#333333;font-size:1rem;padding-right:10px;padding-left:3px;" title="Suchen"
|
|
onclick='fly()'></i></a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="card-section" style="padding-bottom:0px" id="systemfilter">
|
|
|
|
<div id="div-GMA"><input name="GMA" id="box-GMA" type="checkbox" checked><label for="GMAcheckbox"><b style="font-size:0.75rem;font-weight:400;">GMA</b></label></div>
|
|
<div id="div-MODEM"><input name="MODEM" id="box-MODEM" type="checkbox" checked><label for="MODEMcheckbox"><b style="font-size:0.75rem;font-weight:400;">Modems</b></label></div>
|
|
<div id="div-CISCO"><input name="TALAS" id="box-CISCO" type="checkbox" checked><label for="CISCOcheckbox"><b style="font-size:0.75rem;font-weight:400;">Cisco</b></label></div>
|
|
|
|
<div style="margin-bottom:15px;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mapSheet" class="standardSideMenu"
|
|
style="position:absolute;bottom:25px;right:25px;width:75px;height:75px;z-index:1000;opacity:0.5;">
|
|
<div class="card"
|
|
style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
|
|
<div style="padding:5px;">
|
|
<img src="img/map.png" alt="" onclick="showMap()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="satSheet" class="standardSideMenu"
|
|
style="position:absolute;bottom:25px;right:110px;width:75px;height:75px;z-index:1000;">
|
|
<div class="card"
|
|
style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
|
|
<div style="padding:5px;">
|
|
<img src="img/sat.png" alt="" onclick="showSatMap()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="z-index:1000;position:absolute;bottom:0px;left:50px;width:300px;border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
|
|
<div class="title-bar">
|
|
<div class="title-bar-left">
|
|
<span class="title-bar-title" id="mousovertext"
|
|
style="padding-left:10px;color:#333333;font-size:0.8rem;">TALAS.Map<br />Version 0.5.3</span>
|
|
</div>
|
|
<div class="title-bar-right">
|
|
<a><i class="fi-info" title="Weitere Infos" style="color:#0c0c9d;font-size:1.5rem;padding-right:10px;" data-open="weitereInfos"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="../TileMap/js/vendor/foundation.js?v=054"></script>
|
|
<script src="../TileMap/js/vendor/what-input.js?v=054"></script>
|
|
<script src="../TileMap/js/app.js?v=054"></script>
|
|
|
|
</asp:Content>
|
|
|