1306 lines
45 KiB
Plaintext
1306 lines
45 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: 7,
|
|
maxZoom: 15,
|
|
tms: false,
|
|
useCache: false,
|
|
crossOrigin: true,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
});
|
|
|
|
function checkInternet(callback) {
|
|
var xhr = new XMLHttpRequest();
|
|
var file = "https://tile.openstreetmap.org/1/1/1.png"; // URL einer kleinen Datei
|
|
var randomNum = Math.round(Math.random() * 10000);
|
|
|
|
xhr.open('HEAD', file + "?rand=" + randomNum, true);
|
|
xhr.send();
|
|
|
|
xhr.addEventListener("readystatechange", processRequest, false);
|
|
|
|
function processRequest(e) {
|
|
if (xhr.readyState == 4) {
|
|
if (xhr.status >= 200 && xhr.status < 304) {
|
|
callback(true);
|
|
} else {
|
|
callback(false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function switchLayer(isOnline) {
|
|
if (isOnline) {
|
|
console.log("online");
|
|
if (!map.hasLayer(osm)) {
|
|
map.removeLayer(osm);
|
|
}
|
|
osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
minZoom: 7,
|
|
maxZoom: 19,
|
|
tms: false,
|
|
useCache: false,
|
|
crossOrigin: true,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
});
|
|
osm.addTo(map);
|
|
} else {
|
|
console.log("offline");
|
|
if (!map.hasLayer(osm)) {
|
|
map.removeLayer(osm);
|
|
}
|
|
osm = L.tileLayer('mapTiles/{z}/{x}/{y}.png', {
|
|
minZoom: 7,
|
|
maxZoom: 14,
|
|
tms: false,
|
|
useCache: false,
|
|
crossOrigin: true,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
});
|
|
osm.addTo(map);
|
|
}
|
|
}
|
|
|
|
// Überprüfen der Internetverbindung und Wechseln des Layers
|
|
checkInternet(function(isOnline) {
|
|
switchLayer(isOnline);
|
|
});
|
|
|
|
// Event Listener für Online- und Offline-Status
|
|
window.addEventListener('online', function() {
|
|
checkInternet(function(isOnline) {
|
|
switchLayer(isOnline);
|
|
});
|
|
});
|
|
window.addEventListener('offline', function() {
|
|
checkInternet(function(isOnline) {
|
|
switchLayer(isOnline);
|
|
});
|
|
});
|
|
|
|
var Esri_WorldImagery = L.tileLayer('../TileMap/geoMapTiles/{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: 15
|
|
});
|
|
|
|
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: 17
|
|
});
|
|
|
|
var TALAS = new L.layerGroup();
|
|
var ECI = new L.layerGroup();
|
|
var ULAF = new L.layerGroup();
|
|
var GSMModem = new L.layerGroup();
|
|
var CiscoRouter = 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 Sonstige = 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, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, TALASICL, Sonstige],
|
|
contextmenu: true,
|
|
contextmenuWidth: 160,
|
|
contextmenuItems: [{
|
|
text: 'Station öffnen (Tab)',
|
|
icon: 'img/screen_new.png',
|
|
callback: newLink
|
|
},
|
|
{
|
|
text: 'Station öffnen',
|
|
icon: 'img/screen_same.png',
|
|
callback: sameLink
|
|
}, '-', {
|
|
text: 'Reinzoomen',
|
|
icon: 'img/zoom_in.png',
|
|
callback: zoomIn
|
|
}, {
|
|
text: 'Rauszoomen',
|
|
icon: 'img/zoom_out.png',
|
|
callback: zoomOut
|
|
}, {
|
|
text: 'Hier zentrieren',
|
|
icon: 'img/center_focus.png',
|
|
callback: centerMap
|
|
}, '-', {
|
|
text: 'Koordinaten',
|
|
icon: 'img/not_listed_location.png',
|
|
callback: showCoordinates
|
|
}, {
|
|
text: 'Get Data to Console',
|
|
icon: 'img/not_listed_location.png',
|
|
callback: showData
|
|
}, {
|
|
text: 'Show Talas',
|
|
icon: 'img/not_listed_location.png',
|
|
callback: showTalas
|
|
}, {
|
|
text: 'Hide Talas',
|
|
icon: 'img/not_listed_location.png',
|
|
callback: hideTalas
|
|
}, {
|
|
text: 'Show GMA',
|
|
icon: 'img/not_listed_location.png',
|
|
callback: showGSM
|
|
}, {
|
|
text: 'Hide GMA',
|
|
icon: '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 = [];
|
|
let namesString = [];
|
|
let namesArray = [];
|
|
let filterSystems = [];
|
|
|
|
$(document).ready(() => {
|
|
$.when(
|
|
// http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisStationsStatic?idMap=8
|
|
$.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;
|
|
|
|
// Filtern der Daten, um nur die Elemente mit Allow = 1 zu behalten
|
|
dataSystem = dataSystem.filter(function (system) {
|
|
return system.Allow === 1;
|
|
});
|
|
console.log(dataSystem);
|
|
// Aktualisieren der Länge des gefilterten Arrays
|
|
dataSystemlength = dataSystem.length;
|
|
|
|
// Erstellen eines Arrays der Namen der gefilterten Systeme
|
|
namesArray = dataSystem.map(function (system) {
|
|
return system.Name;
|
|
});
|
|
console.log(namesArray);
|
|
namesArray = namesArray.map(name => name.replace(/\s/g, ''));
|
|
|
|
let systemFilterDiv = document.createElement("div");
|
|
namesArray.forEach(name => {
|
|
const html = `
|
|
<div id="div-${name}">
|
|
<input name="${name}" id="box-${name}" type="checkbox" checked>
|
|
<label for="box-${name}">
|
|
<b style="font-size:0.75rem;font-weight:400;">${name}</b>
|
|
</label>
|
|
</div>
|
|
`;
|
|
systemFilterDiv.innerHTML += html;
|
|
});
|
|
|
|
document.getElementById("systemfilter").appendChild(systemFilterDiv);
|
|
|
|
filterSystems = dataSystem.map(function (system) {
|
|
return system.IdSystem;
|
|
});
|
|
|
|
console.log(namesArray);
|
|
console.log(filterSystems);
|
|
|
|
var layerObjects = {
|
|
"TALAS": TALAS,
|
|
"ECI": ECI,
|
|
'GSMModem': GSMModem,
|
|
'CiscoRouter': CiscoRouter,
|
|
'WAGO': WAGO,
|
|
'Siemens': Siemens,
|
|
'OTDR': OTDR,
|
|
'WDM': WDM,
|
|
'GMA': GMA,
|
|
'TALASICL': TALASICL,
|
|
'Sonstige': Sonstige,
|
|
// ... andere Layer
|
|
};
|
|
|
|
namesArray.forEach(name => {
|
|
console.log(`#box-${name}`)
|
|
var checkbox = document.querySelector(`#box-${name}`);
|
|
checkbox.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
map.addLayer(layerObjects[name]);
|
|
console.log(`${name} is checked..`);
|
|
} else {
|
|
map.removeLayer(layerObjects[name]);
|
|
console.log(`${name} is not checked..`);
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
}),
|
|
$.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 = [];
|
|
}
|
|
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
|
|
if(filterSystems.includes(gisStatics.System)){
|
|
//console.log("System Add: "+gisStatics.IdLD);
|
|
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: '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) {
|
|
if (namesArray.includes("TALAS")) {
|
|
markers[gisStatics.IdLD].addTo(TALAS);
|
|
console.log("TALAS system added");
|
|
}
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 2) {
|
|
if (namesArray.includes("ECI")) {
|
|
markers[gisStatics.IdLD].addTo(ECI);
|
|
console.log("ECI system added");
|
|
}
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 3) {
|
|
if (namesArray.includes("ULAF")) {
|
|
markers[gisStatics.IdLD].addTo(ULAF);
|
|
console.log("ULAF system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(ULAF);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 4) {
|
|
if (namesArray.includes("TALAS")) {
|
|
markers[gisStatics.IdLD].addTo(TALAS);
|
|
console.log("TALAS+ system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(TALAS); // Fehlt in der Liste
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 5) {
|
|
if (namesArray.includes("GSMModem")) {
|
|
markers[gisStatics.IdLD].addTo(GSMModem);
|
|
console.log("GSM system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(GSM);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 6) {
|
|
if (namesArray.includes("CiscoRouter")) {
|
|
markers[gisStatics.IdLD].addTo(CiscoRouter);
|
|
console.log("Cisco system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(Cisco);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 7) {
|
|
if (namesArray.includes("WAGO")) {
|
|
markers[gisStatics.IdLD].addTo(WAGO);
|
|
console.log("WAGO system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(WAGO);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 8) {
|
|
if (namesArray.includes("Siemens")) {
|
|
markers[gisStatics.IdLD].addTo(Siemens);
|
|
console.log("Siemens system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(Siemens);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 9) {
|
|
if (namesArray.includes("OTDR")) {
|
|
markers[gisStatics.IdLD].addTo(OTDR);
|
|
console.log("OTDR system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(OTDR);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 10) {
|
|
if (namesArray.includes("WDM")) {
|
|
markers[gisStatics.IdLD].addTo(WDM);
|
|
console.log("WDM system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(WDM);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 11) {
|
|
if (namesArray.includes("GMA")) {
|
|
markers[gisStatics.IdLD].addTo(GMA);
|
|
console.log("GMA system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(GMA);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 100) {
|
|
if (namesArray.includes("TALASICL")) {
|
|
markers[gisStatics.IdLD].addTo(TALASICL);
|
|
console.log("Talas ICL system added");
|
|
}
|
|
//markers[gisStatics.IdLD].addTo(TALASICL);
|
|
}
|
|
|
|
if (markers[gisStatics.IdLD].options.system === 200) {
|
|
if (namesArray.includes("Sonstige")) {
|
|
markers[gisStatics.IdLD].addTo(Sonstige);
|
|
console.log("Sonstige system added");
|
|
}
|
|
//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: '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: '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: '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: '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 {
|
|
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
console.log("System Not Viewed: "+gisStatics.IdLD);
|
|
}
|
|
|
|
}
|
|
|
|
// 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="areaname' + LocID + '" style="font-weight:700;font-size:0.9rem">---</div>'
|
|
+ '<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;
|
|
|
|
if ("areaname-"+el.IdL && el.Area_Name) {
|
|
try {document.getElementById("areaname"+el.IdL).innerHTML = el.Area_Name;
|
|
//console.log(el.IdL+"Test"+el.Area_Name);
|
|
}
|
|
catch {}
|
|
}
|
|
|
|
//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');
|
|
console.log(filterSystems);
|
|
getJSONData();
|
|
|
|
for (var i = 0; i < dataStaticlength; i++) {
|
|
var gisStatics = dataStatic[i];
|
|
if(filterSystems.includes(gisStatics.System)){
|
|
// i.O. Marker
|
|
let markerOKIcon = L.icon({
|
|
iconUrl: '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: '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: '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: '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: '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:15px;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 onchange='fly(document.getElementById("stationListing").value)' 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="Ansicht zurücksetzen"
|
|
onclick='fly()'></i></a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="card-section" style="padding-bottom: 15px;padding-top: 15px;">
|
|
<div id="systemfilter">
|
|
<!--<div id="div-TALAS"><input name="TALAS" id="box-TALAS" type="checkbox" checked><label
|
|
for="TALAScheckbox"><b style="font-size:0.75rem;font-weight:100;">TALAS</b></label></div>
|
|
<div id="div-GMA"><input name="GMA" id="box-GMA" type="checkbox" checked><label for="GMAcheckbox"><b
|
|
style="font-size:0.75rem;font-weight:100;">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:100;">GSM Modems</b></label></div>
|
|
<div id="div-SIEMENS"><input name="SIEMENS" id="box-SIEMENS" type="checkbox" checked><label
|
|
for="SIEMENScheckbox"><b style="font-size:0.75rem;font-weight:100;">Notruf Säulen</b></label>
|
|
</div>-->
|
|
|
|
<!--<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="CISCO" id="box-CISCO" type="checkbox" checked><label for="CISCOcheckbox"><b style="font-size:0.75rem;font-weight:400;">Cisco</b></label></div>
|
|
-->
|
|
</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 id="whiteSheet" class="standardSideMenu"
|
|
style="position:absolute;bottom:25px;right:195px;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/white.png" alt="" onclick="showWhiteMap()">
|
|
</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.5</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>
|
|
|
|
<!-- Full Side Menu -->
|
|
<!--<div id="fullDataSheet" class="fullSideMenu"
|
|
style="overflow-x:visible;position:absolute;top:0px;right:0px;width:15%;min-width:350px;z-index:1000;">
|
|
<div id="fullSideMenuCard" class="card">
|
|
<ul class="tabs" data-active-collapse="true" data-tabs id="collapsing-tabs">
|
|
<li class="tabs-title is-active"><a href="#stationenFullSideMenu" aria-selected="true"
|
|
style="color:#000000;font-size:0.75rem;font-weight:700;">STATIONEN</a></li>
|
|
<li class="tabs-title"><a href="#panel2c"
|
|
style="color:#000000;font-size:0.75rem;font-weight:700;">DIENSTE</a></li>
|
|
</ul>
|
|
|
|
<div class="tabs-content" data-tabs-content="collapsing-tabs">
|
|
<div class="tabs-panel is-active" id="stationenFullSideMenu"
|
|
style="padding: 10px 5px 5px 5px !important">
|
|
|
|
</div>
|
|
<div class="tabs-panel" id="panel2c">
|
|
<div class="card-section" style="padding-bottom:0px" id="systemfilter">
|
|
<div id="div-TALAS"><input name="TALAS" id="box-TALAS" type="checkbox" checked><label
|
|
for="TALAScheckbox"><b style="font-size:0.75rem;font-weight:100;">TALAS</b></label>
|
|
</div>
|
|
<div id="div-GMA"><input name="GMA" id="box-GMA" type="checkbox" checked><label
|
|
for="GMAcheckbox"><b style="font-size:0.75rem;font-weight:100;">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:100;">GSM Modems</b></label>
|
|
</div>
|
|
<div id="div-SIEMENS"><input name="SIEMENS" id="box-SIEMENS" type="checkbox" checked><label
|
|
for="SIEMENScheckbox"><b style="font-size:0.75rem;font-weight:100;">Notruf
|
|
Säulen</b></label></div>
|
|
<div style="margin-bottom:15px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="position:absolute;bottom:35px;">
|
|
<hr>
|
|
<div style="padding-left:15px;">
|
|
<div id="mapSheet"
|
|
style="float: left;padding-left:10px;;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" style="float: left;padding-left:10px;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 id="whiteSheet" style="float: left;padding-left:10px;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/white.png" alt="" onclick="showWhiteMap()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
|
|
<!-- Modals -->
|
|
<div class="reveal" id="weitereInfos" style="z-index:100000;" data-reveal>
|
|
<img src="img/Logo_TALAS.png" alt="TALAS V5 Logo" width="50%"
|
|
style="margin-left:25%;margin-top:10px;margin-bottom:10px;">
|
|
<div class="card"
|
|
style="padding:10px;border-radius: 8px;margin-top:10px;margin-bottom:10px;margin-left:10%;width:80%;-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="card-section">
|
|
<p style="font-size:1.2rem;font-weight:700;">Littwin Systemtechnik GmbH & Co. KG</p>
|
|
<p style="font-weight:700;">Bürgermeister-Brötje Str. 28<br />D-26180 Rastede</p>
|
|
<p>T: +49 4402 9725 77-0<br />E: kontakt@littwin-systemtechnik.de</p>
|
|
<div style="background-color: #cacaca;">
|
|
<center><small style="font-size:0.75rem;padding:5px;"><b>TALAS.MAP</b> Version 0.5.5</small>
|
|
</center>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<button class="close-button" data-close aria-label="Close modal" type="button">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</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>
|
|
|