348 lines
12 KiB
Plaintext
348 lines
12 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">
|
|
|
|
<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="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>
|
|
|
|
<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">
|
|
</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>
|
|
|
|
<script>
|
|
var map = L.map('map').setView([51.41321407879154, 7.739617925303934], 8);
|
|
L.tileLayer('../tilemap/mapTiles/{z}/{x}/{y}.png', {
|
|
minZoom: 4,
|
|
maxZoom: 15,
|
|
tms: false,
|
|
attribution: 'Generated by Littwin Systemtechnik GmbH & Co KG'
|
|
}).addTo(map);
|
|
|
|
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 notdataStatic;
|
|
var notdataStaticlength;
|
|
var notdataStatus;
|
|
var notdataStatuslength;
|
|
|
|
$(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;
|
|
})
|
|
|
|
).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');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
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');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function getIcon() {
|
|
|
|
}
|
|
|
|
// Add Object Du save CircleIds
|
|
var markers = [];
|
|
var setLoadTemp;
|
|
var idsListing = [];
|
|
var idsListingURL = [];
|
|
|
|
var test = "test";
|
|
|
|
// 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: test}).addTo(map);
|
|
oms.addMarker(markers[gisStatics.IdLD]);
|
|
console.log(markers[gisStatics.IdLD]);
|
|
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+" )");
|
|
// Eventlistener der Marker
|
|
markers[gisStatics.IdLD].on('contextmenu', function (e) {
|
|
for(var idx = 0; idx < idsListing.length; idx++){
|
|
if (this._leaflet_id === idsListing[idx][1]) {
|
|
var url = idsListingURL[idx][0];
|
|
//console.log(url+idsListing[idx][0]);
|
|
//console.log(this);
|
|
//alert(url);
|
|
window.open("../devices/"+url, '_blank').focus();
|
|
}
|
|
}
|
|
});
|
|
markers[gisStatics.IdLD].on('mouseover', function (e) {
|
|
this.openPopup();
|
|
});
|
|
markers[gisStatics.IdLD].on('mouseout', function (e) {
|
|
this.closePopup();
|
|
});
|
|
|
|
// Fehlermarker
|
|
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") {
|
|
markers[gisStatics.IdLD].setIcon(criticalMarkerModemBox);
|
|
}
|
|
if (gisStatus.Na === "system") {
|
|
markers[gisStatics.IdLD].setIcon(systemMarkerModemBox);
|
|
}
|
|
if (gisStatus.Na === "major") {
|
|
markers[gisStatics.IdLD].setIcon(majorMarkerModemBox);
|
|
}
|
|
if (gisStatus.Na === "minor") {
|
|
markers[gisStatics.IdLD].setIcon(minorMarkerModemBox);
|
|
}
|
|
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 /><b style='color:"+gisStatus.Co+";font-size:1rem;'>"+gisStatus.Me+"</b><b style='color:"+gisStatus.Co+";font-size:0.75rem;'> ("+(gisStatus.Na).toUpperCase()+")</b>");
|
|
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
|
|
markers[gisStatics.IdLD].setIcon(greenMarkerBox);
|
|
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();
|
|
|
|
// Fehlermarker
|
|
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") {
|
|
markers[gisStatics.IdLD].setIcon(criticalMarkerModemBox);
|
|
}
|
|
if (gisStatus.Na === "system") {
|
|
markers[gisStatics.IdLD].setIcon(systemMarkerModemBox);
|
|
}
|
|
if (gisStatus.Na === "major") {
|
|
markers[gisStatics.IdLD].setIcon(majorMarkerModemBox);
|
|
}
|
|
if (gisStatus.Na === "minor") {
|
|
markers[gisStatics.IdLD].setIcon(minorMarkerModemBox);
|
|
}
|
|
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 /><b style='color:"+gisStatus.Co+";font-size:1rem;'>"+gisStatus.Me+"</b><b style='color:"+gisStatus.Co+";font-size:0.75rem;'> ("+(gisStatus.Na).toUpperCase()+")</b>");
|
|
}
|
|
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>
|
|
|
|
|
|
<!-- 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>
|
|
|