1046 lines
38 KiB
Plaintext
1046 lines
38 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=053"/>
|
|
<link rel="stylesheet" href="../tilemap/css/foundation.css?v=053">
|
|
<link rel="stylesheet" href="../tilemap/css/app.css?v=053">
|
|
<link rel="stylesheet" href="../tilemap/css/foundation-icons.css?v=053">
|
|
<link rel="stylesheet" href="../tilemap/css/leaflet.contextmenu.min.css?v=053">
|
|
|
|
<script src="../tilemap/js/vendor/jquery.js?v=053"></script>
|
|
<script src="../tilemap/js/leaflet/leaflet.js?v=053"></script>
|
|
<script src="../tilemap/js/vendor/oms.min.js"></script>
|
|
<script src="../tilemap/js/vendor/leaflet.contextmenu.min.js"></script>
|
|
<!--<script src="js/vendor/gktowgs.js?v=053"></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=053"></script>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#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('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 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: 'Show Talas',
|
|
icon: '../TileMap/img/not_listed_location.png',
|
|
callback: showTalas
|
|
}, {
|
|
text: 'Hide Talas',
|
|
icon: '../TileMap/img/not_listed_location.png',
|
|
callback: hideTalas
|
|
}, {
|
|
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 showGSM() {
|
|
map.addLayer(GMA); ////////////////////////////////////////////////////////////////////
|
|
loadData();
|
|
}
|
|
|
|
function hideGSM() {
|
|
map.removeLayer(GMA); ////////////////////////////////////////////////////////////////////
|
|
loadData();
|
|
}
|
|
|
|
var oms = new OverlappingMarkerSpiderfier(map);
|
|
|
|
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;
|
|
let systemsListing = [];
|
|
let systems = [];
|
|
|
|
$(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;
|
|
})
|
|
|
|
).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 (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+'<input name="'+gisSystem.Name+'" id="'+gisSystem.Name+'" type="checkbox" checked><label for="'+gisSystem.Name+'checkbox"><b>'+gisSystem.Name+'</b></label> <br />';
|
|
}
|
|
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;
|
|
})
|
|
).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');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Add Object Du save CircleIds
|
|
var markers = [];
|
|
var setLoadTemp;
|
|
var idsListing = [];
|
|
var idsListingURL = [];
|
|
|
|
// 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,
|
|
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
|
|
});
|
|
|
|
markers[gisStatics.IdLD].setIcon(markerOKIcon);
|
|
oms.addMarker(markers[gisStatics.IdLD]);
|
|
markers[gisStatics.IdLD].setZIndexOffset(9995);
|
|
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(GSM);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 5){
|
|
markers[gisStatics.IdLD].addTo(Cisco);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 6){
|
|
markers[gisStatics.IdLD].addTo(WAGO);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 7){
|
|
markers[gisStatics.IdLD].addTo(Siemens);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 8){
|
|
markers[gisStatics.IdLD].addTo(OTDR);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 9){
|
|
markers[gisStatics.IdLD].addTo(WDM);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 10){
|
|
markers[gisStatics.IdLD].addTo(GMA);
|
|
}
|
|
if (markers[gisStatics.IdLD].options.system === 11){
|
|
markers[gisStatics.IdLD].addTo(GMA);
|
|
}
|
|
|
|
|
|
/////////////////////////////////
|
|
|
|
//console.log("var: "+markerVar);
|
|
//console.log(markers[gisStatics.IdLD]); // Marker Object
|
|
//console.log("Icon : "+markers[gisStatics.IdLD].options.jsonicon); // Icon Number
|
|
var idListing = ([gisStatics.IdLD, markers[gisStatics.IdLD]._leaflet_id]);
|
|
var idListingURL = ([gisStatics.Link, markers[gisStatics.IdLD]._leaflet_id]);
|
|
//console.log(idListing + " - " + idListingURL);
|
|
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 {
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
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
|
|
});
|
|
markers[gisStatics.IdLD].setIcon(markerOKIcon);
|
|
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
|
|
});
|
|
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);
|
|
}
|
|
|
|
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 {
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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" 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>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mapSheet" 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="../TileMap/img/map.png" alt="" onclick="showMap()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="satSheet" 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="../TileMap/img/sat.png" alt="" onclick="showSatMap()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="whiteSheet" 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="../TileMap/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.6.4</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>
|
|
|
|
<!-- 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;">TALAS.MAP Masterkarte Version 0.9.7</small>
|
|
</center>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<button class="close-button" data-close aria-label="Close modal" type="button">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="large reveal" style="padding:0px;border-radius: 8px;" id="einstellungen" data-reveal>
|
|
|
|
<div class="card">
|
|
<div class="top-bar"
|
|
style="background-color:#ffffff;padding-top:10px;padding-bottom:10px;border-bottom:1px solid #D6D8DA">
|
|
<div class="top-bar-left">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
<li class="menu-text" style="color:#333333;font-size:0.9rem;padding-left:30px;">Einstellung</li>
|
|
</ul>
|
|
</div>
|
|
<div class="top-bar-right">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
<button type="button" onclick="cableReset()" class="button small" data-close
|
|
aria-label="Close reveal">Speichern</button>
|
|
<li><a style="color:#333333;font-size:125%;" data-close aria-label="Close reveal"><i
|
|
class="fi-x"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card-section">
|
|
|
|
<div class="grid-container full">
|
|
<div class="grid-x grid-margin-x">
|
|
|
|
<div class="cell small-12 large-6">
|
|
<div class="card" style="padding:0px;border-radius: 8px;">
|
|
|
|
<div class="top-bar" style="background-color:#ffffff;padding:0px;">
|
|
<div class="top-bar-left">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
<li class="menu-text" style="color:#333333;font-size: 0.9rem;">Allgemeine
|
|
Einstellungen</li>
|
|
</ul>
|
|
</div>
|
|
<div class="top-bar-right">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card-section">
|
|
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="small-5 cell">
|
|
<label for="middle-label" class="text-right middle">Updateinterval</label>
|
|
</div>
|
|
<div class="small-7 cell">
|
|
<div class="grid-x grid-margin-x">
|
|
<div class="cell small-5">
|
|
<div class="slider" data-slider data-start="1" data-end="30"
|
|
data-step="1" data-non-linear-base="5">
|
|
<span class="slider-handle" data-slider-handle role="slider"
|
|
tabindex="1" aria-controls="SliderUpdateInterval"></span>
|
|
<span class="slider-fill" id="sliders1" data-slider-fill></span>
|
|
</div>
|
|
</div>
|
|
<div class="cell small-7">
|
|
<div class="input-group">
|
|
<input id="SliderUpdateInterval" class="input-group-field"
|
|
type="number">
|
|
<span class="input-group-label">min.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card" style="padding:0px;border-radius: 8px;">
|
|
<div class="top-bar" style="background-color:#ffffff;padding:0px;">
|
|
<div class="top-bar-left">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
<li class="menu-text" style="color:#333333;font-size: 0.9rem;">Standard
|
|
Einstellungen</li>
|
|
</ul>
|
|
</div>
|
|
<div class="top-bar-right">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card-section">
|
|
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="small-5 cell">
|
|
<label for="middle-label" class="text-right middle">Linien/Dienste</label>
|
|
</div>
|
|
<div class="small-7 cell">
|
|
<div class="grid-x grid-margin-x">
|
|
<div class="cell small-8">
|
|
<div class="slider" data-slider data-initial-start="10"
|
|
data-start="1" data-end="30" data-step="1">
|
|
<span class="slider-handle" data-slider-handle role="slider"
|
|
tabindex="1" aria-controls="StandardCableThickness"></span>
|
|
<span class="slider-fill" data-slider-fill></span>
|
|
</div>
|
|
</div>
|
|
<div class="cell small-4">
|
|
<input type="number" id="StandardCableThickness">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="small-5 cell">
|
|
<label for="middle-label" class="text-right middle">Meldestationen</label>
|
|
</div>
|
|
<div class="small-7 cell">
|
|
<div class="grid-x grid-margin-x">
|
|
<div class="cell small-8">
|
|
<div class="slider" data-slider data-initial-start="10"
|
|
data-start="1" data-end="40" data-step="1">
|
|
<span class="slider-handle" data-slider-handle role="slider"
|
|
tabindex="1" aria-controls="StandardMeldestationen"></span>
|
|
<span class="slider-fill" data-slider-fill></span>
|
|
</div>
|
|
</div>
|
|
<div class="cell small-4">
|
|
<input type="number" id="StandardMeldestationen">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="small-5 cell">
|
|
<label for="middle-label" class="text-right middle">ULAF Stationen</label>
|
|
</div>
|
|
<div class="small-7 cell">
|
|
<div class="grid-x grid-margin-x">
|
|
<div class="cell small-8">
|
|
<div class="slider" data-slider data-initial-start="10"
|
|
data-start="1" data-end="40" data-step="1">
|
|
<span class="slider-handle" data-slider-handle role="slider"
|
|
tabindex="1" aria-controls="StandardUlafStationen"></span>
|
|
<span class="slider-fill" data-slider-fill></span>
|
|
</div>
|
|
</div>
|
|
<div class="cell small-4">
|
|
<input type="number" id="StandardUlafStationen">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="small-5 cell">
|
|
<label for="middle-label" class="text-right middle">passive
|
|
Stationen</label>
|
|
</div>
|
|
<div class="small-7 cell">
|
|
<div class="grid-x grid-margin-x">
|
|
<div class="cell small-8">
|
|
<div class="slider" data-slider data-initial-start="10"
|
|
data-start="1" data-end="40" data-step="1">
|
|
<span class="slider-handle" data-slider-handle role="slider"
|
|
tabindex="1"
|
|
aria-controls="StandardPassiveStationen"></span>
|
|
<span class="slider-fill" data-slider-fill></span>
|
|
</div>
|
|
</div>
|
|
<div class="cell small-4">
|
|
<input type="number" id="StandardPassiveStationen">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="small-5 cell">
|
|
<label for="middle-label" class="text-right middle">Schriftgröße</label>
|
|
</div>
|
|
<div class="small-7 cell">
|
|
<div class="grid-x grid-margin-x">
|
|
<div class="cell small-8">
|
|
<div class="slider" data-slider data-initial-start="3"
|
|
data-start="3" data-end="20" data-step="1">
|
|
<span class="slider-handle" data-slider-handle role="slider"
|
|
tabindex="1" aria-controls="StandardFontSize"></span>
|
|
<span class="slider-fill" data-slider-fill></span>
|
|
</div>
|
|
</div>
|
|
<div class="cell small-4">
|
|
<input type="number" id="StandardFontSize">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="cell small-12 large-6">
|
|
|
|
<div class="card" style="padding:0px;border-radius: 8px;">
|
|
<div class="top-bar" style="background-color:#ffffff;padding:0px;">
|
|
<div class="top-bar-left">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
<li class="menu-text" style="color:#333333;font-size: 0.9rem;">Meldung
|
|
Einstellungen</li>
|
|
</ul>
|
|
</div>
|
|
<div class="top-bar-right">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card-section">
|
|
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="small-5 cell">
|
|
<label for="middle-label" class="text-right middle">Linien/Dienste</label>
|
|
</div>
|
|
<div class="small-7 cell">
|
|
<div class="grid-x grid-margin-x">
|
|
<div class="cell small-8">
|
|
<div class="slider" data-slider data-initial-start="10"
|
|
data-start="1" data-end="30" data-step="1">
|
|
<span class="slider-handle" data-slider-handle role="slider"
|
|
tabindex="1" aria-controls="MeldungCableThickness"></span>
|
|
<span class="slider-fill" data-slider-fill></span>
|
|
</div>
|
|
</div>
|
|
<div class="cell small-4">
|
|
<input type="number" id="MeldungCableThickness">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="small-5 cell">
|
|
<label for="middle-label" class="text-right middle">Meldestationen</label>
|
|
</div>
|
|
<div class="small-7 cell">
|
|
<div class="grid-x grid-margin-x">
|
|
<div class="cell small-8">
|
|
<div class="slider" data-slider data-initial-start="5"
|
|
data-start="2" data-end="60" data-step="1">
|
|
<span class="slider-handle" data-slider-handle role="slider"
|
|
tabindex="1" aria-controls="MeldungMeldestationen"></span>
|
|
<span class="slider-fill" data-slider-fill></span>
|
|
</div>
|
|
</div>
|
|
<div class="cell small-4">
|
|
<input type="number" id="MeldungMeldestationen">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding:0px;border-radius: 8px;">
|
|
|
|
<div class="top-bar" style="background-color:#ffffff;padding:0px;">
|
|
<div class="top-bar-left">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
<li class="menu-text" style="color:#333333;font-size: 0.9rem;">Weitere
|
|
Funktionen</li>
|
|
</ul>
|
|
</div>
|
|
<div class="top-bar-right">
|
|
<ul class="menu" style="background-color:#ffffff;">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card-section">
|
|
|
|
<a class="button expanded" onclick="datenZuruecksetzen()" data-close
|
|
aria-label="Close reveal">Werte zurücksetzen</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script src="../tilemap/js/vendor/foundation.js?v=053"></script>
|
|
<script src="../tilemap/js/vendor/what-input.js?v=053"></script>
|
|
<script src="../tilemap/js/app.js?v=053">
|
|
</script>
|
|
|
|
</asp:Content>
|
|
|